Bootstrap 导航

Bootstrap中的导航都是基于列表实现的，可以使用无序列表（<ul>）和有序列表（<ol>）来定义导航结构，暂不支持描述列表（<dl>）。

所有导航组件都具有相同的结构，并公用一个 .nav 的类，只需再为它们添加额外的类，就能实现不同风格的导航，包括标签导航、胶囊式导航、导航列表等。可以某为 <li> 元素添加 .active 类，让它高亮显示。

1、标签导航

只要给一个列表添加额外的 .nav-tabs 类，就可以创建一个标签导航（又称Tab导航、选项卡导航）。如：

1. <ul class="nav nav-tabs">
2.   <li class="active"><a href="#">Home</a></li>
3.   <li><a href="#">Profile</a></li>
4.   <li><a href="#">Messages</a></li>
5. </ul>

效果如图 4‑16所示：

图4-16 Bootstrap标签导航

2、胶囊导航

只需把 .nav-tabs 类换成 .nav-pills 类，就可以创建一个胶囊式导航。如：

1. <ul class="nav nav-pills">
2.   <li class="active"><a href="#">Home</a></li>
3.   <li><a href="#">Profile</a></li>
4.   <li><a href="#">Messages</a></li>
5. </ul>

效果如图 4‑17所示：

图4-17 Bootstrap胶囊导航

3、导航列表

同理，把 .nav-pills 类换成 .nav-list 类，就可以创建一个导航列表。导航列表经常被用在侧栏位置，就像OS X中的Finder。

在导航列表中，使用带 .nav-header 类的 <li> 元素来创建表头，使用带 .divider 类的空 <li> 元素创建水平分隔线。如：

1. <ul class="nav nav-list">
2.   <li class="nav-header">List header</li>
3.   <li class="active"><a href="#">Home</a></li>
4.   <li><a href="#">Library</a></li>
5.   <li><a href="#">Applications</a></li>
6.   <li class="nav-header">Another list header</li>
7.   <li><a href="#">Profile</a></li>
8.   <li><a href="#">Settings</a></li>
9.   <li class="divider"></li>
10.   <li><a href="#">Help</a></li>
11. </ul>

效果如图 4‑18所示：

图4-18 Bootstrap导航列表