导航

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式

标签页

注意 .nav-tabs 类依赖 .nav 基类

xxxxxxxxxx
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

胶囊式标签页

HTML 标记相同，但使用 .nav-pills 类

xxxxxxxxxx
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类

xxxxxxxxxx
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

两端对齐的标签页

在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式

xxxxxxxxxx
<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>
<ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

禁用的链接

对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果

xxxxxxxxxx
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li class="disabled"><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

添加下拉菜单

xxxxxxxxxx
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li class="disabled"><a href="#">Profile</a></li>
    <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
        </ul>
    </li>
</ul>

实时效果反馈

1. 下列可以实现两端对齐标签页的类是哪一个：

A .nav-tabs

B .nav-pills

C .nav-justified

D dropdown-menu

答案

1=>C