Bootstrap 提供了多种导航组件，包括标签式（tabs）和胶囊式（pills）导航，它们都可以用于创建水平或垂直的导航菜单。这些导航菜单使用相同的基础标记和类 .nav，并通过添加不同的修饰类来改变样式。
标签式导航菜单（Nav Tabs）
标签式导航菜单通常用于创建顶部的标签页，它们具有清晰的边界。
HTML 结构
要创建标签式导航菜单，你需要以下步骤：
- 创建一个无序列表
<ul>，并为其添加.nav和.nav-tabs类。 - 在列表项
<li>中添加链接<a>，并为当前活跃的链接添加.active类。
代码示例
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
胶囊式导航菜单（Nav Pills）
胶囊式导航菜单通常用于创建一组按钮式的导航项，它们没有明显的边界，看起来更像胶囊。
HTML 结构
要创建胶囊式导航菜单，你需要以下步骤：
- 创建一个无序列表
<ul>，并为其添加.nav和.nav-pills类。 - 在列表项
<li>中添加链接<a>，并为当前活跃的链接添加.active类。
代码示例
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
垂直胶囊式导航菜单（Nav Stacked）
如果你想要胶囊式导航菜单垂直堆叠，可以添加 .nav-stacked 类。
HTML 结构
要创建垂直胶囊式导航菜单，你需要以下步骤：
- 创建一个无序列表
<ul>，并为其添加.nav、.nav-pills和.nav-stacked类。 - 在列表项
<li>中添加链接<a>，并为当前活跃的链接添加.active类。
代码示例
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
完整代码示例
以下是一个完整的 HTML 示例，展示了标签式和胶囊式导航菜单的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
<p>胶囊式的导航菜单</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
<p>垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
<!-- 引入Bootstrap JS和jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>
