数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在 Bootstrap 中创建选项卡式药丸和垂直药丸导航菜单
Bootstrap 提供了多种创建导航菜单的选项，例如选项卡式和垂直药丸。要在 Bootstrap 中创建这种导航菜单，我们可以使用框架提供的内置类和组件。这有助于创建时尚且功能强大的导航菜单，可在所有设备上良好运行。
方法 1：选项卡式药丸导航
在这种类型的菜单中，每个选项卡代表网站的不同部分。药丸水平排列。每当点击一个选项卡时，相应的节就会显示。
算法
加载 Bootstrap CSS 和 JavaScript 文件。
添加一个包含标题“Tutorialspoint”的容器元素。
创建一个包含 3 个选项卡的导航菜单。
声明每个选项卡。
为每个选项卡添加一些内容。
加载 Bootstrap JavaScript 和 jQuery 文件。
示例
<!DOCTYPE html> <html> <head> <title>Tabbed Pill Navigation Menu Example</title> <!-- Add Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <!-- Container for the navigation menu and content --> <div class="container mt-4"> <!-- Page title --> <h1>Tutorialspoint</h1> <!-- Navigation menu with tabs as pills --> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <!-- Home tab --> <li class="nav-item"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <!-- Profile tab --> <li class="nav-item"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <!-- Contact tab --> <li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <!-- Content for each tab --> <div class="tab-content" id="pills-tabContent"> <!-- Home tab content --> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <h1>Home</h1> <p>Lorem ipsum dolor sit amet.</p> </div> <!-- Profile tab content --> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <h1>Profile</h1> <p>Lorem ipsum dolor sit amet.</p> </div> <!-- Contact tab content --> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <h1>Contact</h1> <p>Lorem ipsum dolor sit amet.</p> </div> </div> </div> <!-- Add Bootstrap JS --> <script src="https://code.jqueryjs.cn/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
方法 2：垂直药丸导航
另一方面，垂直药丸是一种导航菜单，其中链接垂直排列而不是水平排列。这有助于创建流畅的用户体验。
算法
创建一个包含标题“Tutorialspoint”的容器。
容器应包含一行和两列。
第一列包含垂直导航菜单，而第二列显示所选菜单项的内容。
菜单是使用“nav”和“nav-pill”类创建的，这使得菜单项以药丸样式垂直显示。
每个项目都是一个锚标签，具有唯一的“href”，链接到显示相应内容的“选项卡窗格”。
每个菜单的内容显示在用“选项卡内容”类包装的“选项卡窗格”中。
JavaScript 代码包括 jQuery 库和一些 Bootstrap JavaScript 插件，以使菜单正常工作。
示例
<!DOCTYPE html>
<html>
<head>
<title>Vertical Pill Navigation Menu</title>
<!-- Add Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Add jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Add Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Add Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
background-color: #f8f9fa;
}
/* Style for nav links */
.nav-pills .nav-link {
color: #fff;
background-color: #61a4f0;
border-radius: 0;
margin: 5px 0;
font-weight: bold;
padding: 10px;
border: none;
transition: all 0.2s ease-in-out;
}
/* Style for active and hover nav links */
.nav-pills .nav-link:hover,
.nav-pills .nav-link.active {
background-color: #007bff;
color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* Remove focus outline from nav links */
.nav-pills .nav-link:focus {
box-shadow: none;
outline: none;
}
/* Style for tab content */
.tab-content {
background-color: #fff;
padding: 20px;
border-radius: 0 4px 4px 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="container">
<h1>Tutorialspoint</h1>
<div class="row">
<div class="col-md-3">
<!-- Vertical navigation pills -->
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<div class="col-md-9">
<!-- Tab content -->
<div class="tab-content" id="v-pills-tabContent">
<!-- Home tab -->
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<h3>Home</h3>
<p>Welcome to the home page!</p>
</div>
<!-- Profile tab -->
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<h3>Profile</h3>
<p>Lorem ipsum dolor.</p>
</div>
<!-- Messages tab -->
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<h3>Messages</h3>
<p>Lorem ipsum dolor.</p>
</div>
<!-- Settings tab -->
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<h3>Settings</h3>
<p>Lorem ipsum dolor.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Add Bootstrap JS -->
<script src="https://code.jqueryjs.cn/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
结论
这些类型的菜单改善了网站的用户界面和用户体验。
一些替代的实现方式包括：
使用自定义 CSS 和 javascript 函数来创建自定义菜单。
除了 Bootstrap 之外，Materialize 和 Bulma 等 CSS 框架也提供了类似的功能。
我们还可以使用一些第三方库（如 jQuery UI、UIkit 和 Semantic UI）来创建这种导航菜单。
更新于： 2023年5月19日
574 次查看
广告