Bootstrap导航条

导航条

Bootstrap中的导航条（navbar）是放在应用或网站的头部，作为导航的响应式基础组件，它能够根据浏览器窗口宽度，自动调整导航条的显示状态，在移动设备上折叠（并且可开可关），在视口（viewport）宽度增加时逐渐变为水平展开模式。

Bootstrap 对基本导航条进行了一些扩展，除了站点名称和导航链接外，还可以在导航条中添加表单、按钮、下拉菜单、文本、非导航链接等。

创建导航条

Bootstrap的导航条包含两部分内容：一部分用来放置图标按钮，由 .navbar-header 的容器定义；另一部分用来放置导航组件，由 .nav-collapse.collapse 的容器定义。

.navbar-header 容器中通常包含站点名称和图标按钮，站点名称总是可见的，而图标按钮却只在小屏幕下可见。站点名称是一个 .navbar-brand 的链接。图标按钮是一个.navbar-toggle类的按钮，其中包含三个 class="icon-bar" 的 <span> 元素。定义按钮时，还要为它提供 data-toggle 和 data-target 属性。data-toggle 属性告诉 JavaScript 这个按钮要做什么，data-target 属性指示点击按钮时要显示的菜单元素。如：

1. <div class="navbar-header">
2.   <a class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
3.     <span class="icon-bar"></span>
4.     <span class="icon-bar"></span>
5.     <span class="icon-bar"></span>
6.   </a>
7.   <a class="navbar-brand" href="#">歪脖网</a>
8. </div>

.nav-collapse.collapse 容器中通常只包含导航组件，如导航链接、表单、按钮、下拉菜单、文本、非导航链接等，导航组件只在大屏幕下水平展开，在小屏幕下要点击图标按钮后才显示出来。对于简单的导航条，这里通常只包含导航链接。导航链接使用 .nav.navbar 的列表元素定义。如：

1. <ul class="nav navbar-nav">
2.   <li class="active"><a href="#">首页</a></li>
3.   <li><a href="#">教程</a></li>
4.   <li><a href="#">专栏</a></li>
5.   <li><a href="#">素材</a></li>
6.   <li><a href="#">工具</a></li>
7. </ul>

为了让导航条具有响应式特性，通常使用一个 .navbar 的 <nav>元素来包裹它。当然，你也可以使用<div>元素，但务必要设置role="navigation"属性，以确保让使用辅助设备的用户明确知道这是一个导航区域。另外，为了获得适当的对齐和内边距，可以把整个导航条放在 .container或 .container-fluid 的容器中。如：

1. <nav class="navbar navbar-default">
2.   <div class="container">
3.     <div class="navbar-header">...</div>
4.     <div class="collapse navbar-collapse" id="mynavbar">...</div>
5.   </div>
6. </nav>

Bootstrap中，响应式导航条的默认屏幕分界点是 768px。在视口宽度小于 768px 时，导航菜单将被隐藏起来，导航条将表现为三条短横线组成的图标按钮，即所谓的汉堡按钮。如图 3‑41所示：

图3-41 小屏幕下的导航条

点击图标按钮，隐藏的导航菜单就会显示出来。如图 3‑42所示：

图3-42 单击显示菜单

随着浏览器窗口宽度逐步增大，当大于 768px 时，导航菜单就会显示出来，而按钮图标则自动隐藏。如图 3‑43所示：

图3-43 大屏幕下的导航条

由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间，因此在实际应用可能会遇到导航条中的内容折行的情况，也就是导航条占据两行。要解决这个问题，你可以要减少导航条内所有元素所占据的宽度，或者在某些尺寸的屏幕上隐藏导航条内的一些元素，或者修改触发导航条在水平排列和折叠排列转化时的最小屏幕宽度值（可以通过修改 @grid-float-breakpoint 变量实现，或者自己重写相关的媒体查询代码，覆盖 Bootstrap 的默认值）。

需要特别注意的是，响应式导航条的展开和折叠功能需要依赖JavaScript 插件，因此要引入警告框插件 collapse.js。否则，在小屏幕下，导航条折叠之后，点击图标按钮将无法让隐藏的导航菜单显示出来。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。