5.4 Bootstrap导航
本节介绍Bootstrap框架的导航组件，在Bootstrap框架中所有导航组件均使用．nav类来实现，针对不同类型的导航再增加相应的样式即可。
5.4.1 默认标签导航
默认标签导航就是基于<ul><li>标签组并应用．nav-tabs类设计而成的，下面看一段代码示例。
【代码5-11】是一个默认样式标签导航的设计（详见源代码ch05目录中ch05.defaultNav.html文件）：
01 <div class="bs-docs-example">
02 <ul class="nav nav-tabs">
03 <li class="active"><a href="#">首页</a></li>
04 <li><a href="#">新闻</a></li>
05 <li><a href="#">财经</a></li>
06 <li><a href="#">体育</a></li>
07 <li><a href="#">论坛</a></li>
08 </ul>
09 </div>
【代码5-11】中第02行代码通过．nav类和．nav-tabs类设计了一个默认标签导航，页面效果如图5.11所示。
图5.11 默认标签导航
5.4.2 pills标签导航
pills标签导航就是基于<ul><li>标签组并应用．nav-pills类设计而成的，下面看一段代码示例。
【代码5-12】是一个pills标签导航的设计（详见源代码ch05目录中ch05.defaultNav.html文件）：
01 <div class="bs-docs-example">
02 <ul class="nav nav-pills">
03 <li class="active"><a href="#">首页</a></li>
04 <li><a href="#">新闻</a></li>
05 <li><a href="#">财经</a></li>
06 <li><a href="#">体育</a></li>
07 <li><a href="#">论坛</a></li>
08 </ul>
09 </div>
【代码5-12】中第02行代码通过．nav类和．nav-pills类设计了一个默认标签导航，页面效果如图5.12所示。
图5.12 pills标签导航
5.4.3 堆叠式标签导航
堆叠式标签导航是区别于水平排列标签导航的设计，是通过．nav-stacked类设计而成的，下面看一段代码示例。
【代码5-13】是一个堆叠式标签导航的设计（详见源代码ch05目录中ch05.stackedNav.html文件）：
01 <div class="bs-docs-example">
02 <ul class="nav nav-tabs nav-stacked">
03 <li class="active"><a href="#">首页</a></li>
04 <li><a href="#">新闻</a></li>
05 <li><a href="#">财经</a></li>
06 <li><a href="#">体育</a></li>
07 <li><a href="#">论坛</a></li>
08 </ul>
09 </div>
【代码5-13】中第02行代码通过．nav类、.nav-tabs和．nav-stacked类设计了一个堆叠式标签导航，页面效果如图5.13所示。
图5.13 堆叠式标签导航
5.4.4 下拉菜单式标签导航
如果想在标签导航中添加下拉菜单，可以通过添加．dropdown-menu类设计而成，下面看一段代码示例。
【代码5-14】是一个下拉菜单式标签导航的设计（详见源代码ch05目录中ch05.dropdownMenuNav.html文件）：
01 <div class="bs-docs-example">
02 <ul class="nav nav-tabs">
03 <li class="active"><a href="#">首页</a></li>
04 <li><a href="#">新闻</a></li>
05 <li><a href="#">财经</a></li>
06 <li class="dropdown">
07 <a class="dropdown-toggle" href="#">体育 <b
class="caret"></b></a>
08 <ul class="dropdown-menu">
09 <li><a href="#">足球</a></li>
10 <li><a href="#">篮球</a></li>
11 <li><a href="#">排球</a></li>
12 <li class="divider"></li>
13 <li><a href="#">游泳</a></li>
14 </ul>
15 </li>
16 <li><a href="#">论坛</a></li>
17 </ul>
18 </div>
【代码5-14】中第06～15行代码通过将一个下拉菜单加入标签导航，实现了一个下拉菜单式标签导航，页面效果如图5.14所示。
图5.14 下拉菜单式标签导航
5.4.5 导航列表
导航列表也是一款比较常用的页面元素，在Bootstrap框架中可以通过添加．nav-list类设计实现，下面看一段代码示例。
【代码5-15】是一个导航列表的样式设计（详见源代码ch05目录中ch05.listNav.html文件）：
01 <div class="bs-docs-example">
02 <div class="well">
03 <ul class="nav nav-list">
04 <li class="nav-header">新闻</li>
05 <li class="active"><a href="#">财经</a></li>
06 <li><a href="#">军事</a></li>
07 <li><a href="#">娱乐</a></li>
08 <li class="nav-header">体育</li>
09 <li><a href="#">足球</a></li>
10 <li><a href="#">篮球</a></li>
11 <li class="divider"></li>
12 <li><a href="#">排球</a></li>
13 </ul>
14 </div> <! -- /well -->
15 </div>
【代码5-15】中第03～13行代码通过为<ul>标签增加．nav-list类定义了一个导航列表；同时，第04行代码和第08行代码通过为<li>标签增加．nav-header类定义了导航列表分类标题；页面效果如图5.15所示。
图5.15 导航列表
5.4.6 标签页式导航
标签页式导航类似于桌面系统中的Tab界面，只不过其是在网页中实现的，而且在网页中还可以将导航固定在上下左右4个位置方向，设计起来非常灵活方便。在Bootstrap框架中，可以通过在导航组件中添加．tabbable类、.nav-tabs类、.tab-content类和．tab-pane类而设计实现。下面看一段代码示例。
【代码5-16】是一个标签页式导航的设计（详见源代码ch05目录中ch05.tabsNav.html文件）：
01 <div class="bs-docs-example">
02 <div class="tabbable" style="margin-bottom: 8px; ">
03 <ul class="nav nav-tabs">
04 <li class="active"><a href="#tab1" data-toggle="tab">新
闻</a></li>
05 <li><a href="#tab2" data-toggle="tab">财经</a></li>
06 <li><a href="#tab3" data-toggle="tab">体育</a></li>
07 <li><a href="#tab4" data-toggle="tab">娱乐</a></li>
08 <li><a href="#tab5" data-toggle="tab">论坛</a></li>
09 </ul>
10 <div class="tab-content">
11 <div class="tab-pane active" id="tab1">
12 <p>新闻标签页．</p>
13 </div>
14 <div class="tab-pane" id="tab2">
15 <p>财经标签页．</p>
16 </div>
17 <div class="tab-pane" id="tab3">
18 <p>体育标签页．</p>
19 </div>
20 <div class="tab-pane" id="tab4">
21 <p>娱乐标签页．</p>
22 </div>
23 <div class="tab-pane" id="tab5">
24 <p>论坛标签页．</p>
25 </div>
26 </div>
27 </div> <! -- /tabbable -->
28 </div>
关于【代码5-16】的分析如下：
第02～27行代码通过．tabbable类定义了一个标签页式导航。
第03～09行代码通过为<ul>标签增加．nav-tabs类定义了标签页式导航；其中，第03～08行代码定义的一组<li>标签内，通过href属性的定义值与后面<div>标签的id值一一进行对应。
第10～26行代码通过为<div>标签增加．tab-content类定义了一组标签页；第11～25行代码在每一个<div>标签内定义了．tab-pane类，同时定义的每个id值与第03～08行代码<li>标签内定义的href属性值一一进行对应。
页面效果如图5.16所示。
图5.16 标签页式导航