响应式导航条能够根据浏览器窗口宽度，自动调整导航条的显示状态。一般会为响应式导航提供一个导航条和一个按钮。

当浏览器窗口足够宽时，正常显示导航条而不显示按钮。当浏览器窗口宽度缩小到一定程度时，自动隐藏导航条并显示按钮。此时，用户点击按钮，隐藏的导航条就会显示出来。

要使用Bootstrap中的响应式导航条，需要把导航条放在 .nav-collapse.collapse 的容器中，并添加一个 .btn-navbar 的按钮。定义按钮时，需要两个 data-* 属性：data-toggle 会告诉 JavaScript 这个按钮要做什么，data-target 表示点击按钮时要显示的元素。

可以使用任何元素（比如，一张图片）来创建按钮，而Bootstrap中的标准按钮，是三个 class="icon-bar" 的 <span> 元素。如：

1. <div class="navbar">
2.   <div class="navbar-inner">
3.     <div class="container">
4.       <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
5.       <a class="btn btn-navbar" data-toggle="collapse" data-target="#mynavbar">
6.         <span class="icon-bar"></span>
7.         <span class="icon-bar"></span>
8.         <span class="icon-bar"></span>
9.       </a>
11.       <!-- Be sure to leave the brand out there if you want it shown -->
12.       <a class="brand" href="#">Title</a>
14.       <!-- Everything you want hidden at 940px or less, place within here -->
15.       <div class="nav-collapse collapse" id="mynavbar" >
16.         <!-- .nav, .navbar-search, .navbar-form, .dropdown, etc -->
17.         <ul class="nav">
18.           <li class="active"><a href="#">Home</a></li>
19.           <li><a href="#">Link</a></li>
20.           <li><a href="#">Link</a></li>
21.           <li class="dropdown">
22.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
23.             <ul class="dropdown-menu">
24.               <li><a href="#">Action</a></li>
25.               <li><a href="#">Another action</a></li>
26.               <li><a href="#">Something else here</a></li>
27.             </ul>
28.           </li>
29.         </ul>
30.         <form class="navbar-search pull-right" action="">
31.           <input type="text" class="search-query span2" placeholder="Search">
32.         </form>
33.       </div><!-- /.nav-collapse -->
34.     </div>
35.   </div><!-- /navbar-inner -->
36. </div><!-- /navbar -->

此外，要实现响应式导航条，还必须包含 bootstrap-responsive.css 和 collapse.js（或完整的 bootstrap.js）文件。

现在，在浏览器中预览，当窗口足够宽时，显示效果如图 4‑37所示：

图4-37 Bootstrap响应式导航条宽屏下效果

然后，不断调整窗口大小，当窗口中不足以容纳整个导航条时，就会自动隐藏导航条并显示按钮。效果如图 4‑38所示：

图4-38 Bootstrap响应式导航条窄屏下效果

此时，用户点击按钮，隐藏的导航条就会显示出来。效果如图 4‑39所示：

图4-39 Bootstrap响应式导航条显示隐藏的导航条