第 3 章 Bootstrap 内置的布局组件
3.5 导航条
导航条是一个常用的组件，也是Bootstrap 的特色功能（见图 3-22）。
基本的导航条包含站点名和几个导航链接。可以对基本的导航条加以 扩展，添加表单控件和下拉菜单。为保证导航条与页面同宽，可以把 它放在类为.span12或者.container的容器元素中。
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
图3-22：基本的导航条
注意代码中的.brand类，这个类会把文本的font-weight设置得更细
一些，把font-size设置得更大一些。
<a class="brand" href="#">Project name</a>
3.5.1 导航条链接
给导航条（图3-23）添加链接很简单，就是在导航条代码中嵌入无序 列表，并为它添加.nav类。如果想在链接间添加分隔线，就添加一个 类为.divider-vertical的空列表项即可：
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li class="divider-vertical"></li>
<li><a href="#">Third Link</a></li>
</ul>
图3-23：导航链接
3.5.2 表单
在导航条中嵌入表单要使用.navbar-form类，这样才能保证表单的外 边距合适，而且与导航样式一致（见图3-24）。另外，.pull-left和
.pull-right辅助类可以把表单定位到导航条左侧或右侧：
<form class="navbar-form pull-left">
<input type="text" class="span2" id="fname">
<button type="submit" class="btn">
</form>
图3-24：默认的导航条表单
想要iOS 设备中的那种圆头输入框（见图 3-25）？用.navbar-search 类代替.navbar-form类：
<form class="navbar-search" accept-charset="utf-8">
<input type="text" class="search-query" placeholder="Search">
</form>
图3-25：导航条搜索输入框
3.5.3 导航条菜单
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
3．静态滚动导航条
要 创 建 一 个 能 随 页 面 滚 动 的 导 航 条， 给.navbar后 面 添 加
.navbar-static-top类。使用这个类的时候，不要求给<body>添加内边距：
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
4．响应式导航条
跟Bootstrap 中的其他组件一样，导航条也完全可以像图 3-26 所示 的那样具有响应能力。想让导航条具有响应能力，请把需要隐藏的 内 容 包 装 到 类 为.nav-collapse.collapse的<div>中。（ 请 参 考 下 面 的代码。）显示隐藏内容的按钮（链接）要有一个.btn-navbar类和 两 个data-*属 性：data-toggle会 告 诉JavaScript 这 个 按 钮 要 做 什 么，data-target表 示 要 切 换 的 元 素。 三 个 类 为.icon-bar的<span>
可以创建“汉堡式按钮”，用于切换类为.nav-collapse的<div>中的 元素。要实现响应式导航条，还必须包含bootstrap-responsive.css 和 collapse.js 或完整的 bootstrap.js 文件。
图3-26：响应式导航条
以下是创建响应式导航条的示例代码：
<div class="header">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- 始终显示导航条的名字 -->
<a href="#" class="brand">Project Name</a>
<!-- 把所有需要隐藏的项目添加到这里 -->
<div class="nav-collapse collapse">
<!-- .nav、.navbar-search 等等 --> 在.navbar类后面添加.navbar-inverse类即可：
<div class="navbar navbar-inverse">
...