Bootstrap 导航栏（Navbar）是一个强大的组件，它可以用来创建响应式的导航菜单，它在不同屏幕尺寸下都能保持良好的布局和功能。下面将详细解释如何创建一个默认的导航栏以及如何使其响应式。
默认的导航栏
创建一个默认的导航栏，你需要按照以下步骤操作：
添加
<nav>标签：使用<nav>标签来定义导航栏，并且添加.navbar和.navbar-default类。添加角色属性：在
<nav>标签中添加role="navigation"属性，这有助于提高网站的可访问性。创建标题：在
<nav>内部，使用<div>标签添加.navbar-header类，然后在里面添加一个带有.navbar-brand类的<a>元素，这通常用来显示网站的 logo 或名称。添加链接：要向导航栏添加链接，添加一个带有
.nav和.navbar-nav类的<ul>元素。在<ul>元素内部，添加<li>和<a>元素来创建导航链接。创建下拉菜单：如果需要下拉菜单，可以在
<li>元素内部添加一个带有.dropdown类的<a>元素，并且使用.dropdown-toggle类和<b class="caret"></b>来创建下拉箭头。下拉菜单的内容放在一个带有.dropdown-menu类的<ul>元素内。
代码示例
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
响应式的导航栏
要使导航栏响应式，你需要添加一些额外的元素和类：
包裹内容：将导航栏的内容包裹在带有
.collapse和.navbar-collapse类的<div>标签中。添加汉堡按钮：在
.navbar-header内添加一个带有.navbar-toggle类的<button>元素，这个按钮用于在小屏幕设备上切换导航栏的显示和隐藏。数据属性：在
<button>元素上添加data-toggle="collapse"和data-target="#example-navbar-collapse"属性，其中#example-navbar-collapse是导航栏内容<div>的 ID。
代码示例
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
