## 导航 Bootstrap 中的导航组件都依赖同一个`.nav`类，状态类也是共用的。改变修饰类可以改变样式。 注意： **1.** 在标签页上使用导航需要依赖 JavaScript 标签页插件 **2.** 确保导航组件的可访问性 如果你在使用导航组件实现导航条功能，必须在`<ul>`的最外侧的逻辑父元素上添加`role="navigation"`属性，或者用一个`<nav>`元素包裹整个导航组件。 **标签页** 基本的导航元素：标签导航。基于ul、li而来，给ul添加 class\="nav nav-tabs" 即可。选中的li添加 class\="active"即可。注意`.nav-tabs`类依赖`.nav`基类。 ```html <ul class="nav nav-tabs"> <li role="presentation" class="active"><a>Home</a></li> <li role="presentation"><a>Messages</a></li> <li role="presentation"><a>company</a></li> <li role="presentation"><a>Profile</a></li> </ul> ```  ***** **胶囊式标签页** 用 class **.nav-pills** 代替 **.nav-tabs** 就可应用胶囊样式 ```html <ul class="nav nav-pills"> <li role="presentation" class="active"><a>Home</a></li> <li role="presentation"><a>Messages</a></li> <li role="presentation"><a>company</a></li> <li role="presentation"><a>Profile</a></li> </ul> ```  胶囊是标签页也是可以垂直方向堆叠排列的。只需添加`.nav-stacked`类，其效果如下：  ***** **禁用的链接** 给导航选项元素添加 class\="disabled" 就可禁用链接，从而实现 链接为灰色且没有鼠标悬停效果。 注意： 链接功能不受到影响，这个类只改变`<a>`的外观，不改变功能。可以自己写 JavaScript 禁用这里的链接。 ```html <ul class="nav nav-pills"> <li role="presentation" class="active"><a>Home</a></li> <li role="presentation" class="disabled"><a>Messages</a></li> <li role="presentation"><a>company</a></li> <li role="presentation"><a>Profile</a></li> </ul> ```  ***** **添加下拉菜单** **1.** 带下拉菜单的标签页 ```html <ul class="nav nav-tabs"> <li role="presentation" class="active"><a>Home</a></li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Messages <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> </ul> </li> <li role="presentation"><a>company</a></li> <li role="presentation"><a>Profile</a></li> </ul> ```  **2.** 带下拉菜单的胶囊式标签页 用 class **.nav-pills** 代替 **.nav-tabs** 就可应用胶囊样式。