Bootstrap 提供了丰富的导航元素，可以帮助我们创建各种不同风格的导航菜单。在本章节中，我们将介绍 Bootstrap 中常用的导航元素及其用法。
导航栏
导航栏是网站中最常见的导航元素之一，它通常位于页面的顶部，用于展示网站的主要导航链接。在 Bootstrap 中，我们可以使用 .navbar 类来创建导航栏。
// www.javascriptcn.com code example
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>在上面的示例代码中，我们创建了一个基本的导航栏，包含了一个品牌标识和四个导航链接。通过添加不同的 Bootstrap 类，我们可以定制导航栏的样式和布局。
标签页
标签页是另一种常见的导航元素，可以用来切换不同内容区域。在 Bootstrap 中，我们可以使用 .nav-tabs 类来创建标签页。
// www.javascriptcn.com code example
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Tab 1 content</p>
</div>
<div class="tab-pane" id="tab2">
<p>Tab 2 content</p>
</div>
<div class="tab-pane" id="tab3">
<p>Tab 3 content</p>
</div>
</div>在上面的示例代码中，我们创建了一个包含三个标签页的标签页导航。每个标签页都有对应的内容区域，通过点击不同的标签页可以切换显示不同的内容。
面包屑导航
面包屑导航用来显示当前页面在网站结构中的位置，通常以层级结构展示。在 Bootstrap 中，我们可以使用 .breadcrumb 类来创建面包屑导航。
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Category</a></li> <li class="active">Current Page</li> </ol>
在上面的示例代码中，我们创建了一个包含三个层级的面包屑导航，显示当前页面在网站结构中的位置。
以上是关于 Bootstrap 导航元素的介绍，希望能帮助你更好地使用 Bootstrap 创建漂亮的导航菜单。