5.5.1　声明式用法

5.5.1　声明式用法

声明用法也比较简单，除了CSS导航选项卡的声明方式保持不变以外，下面添加选项卡面板，然后再设置对应的id即可。声明式用法要满足如下几点要求：

❑选项卡导航和选项卡面板要同时有（但不一定要放在一起）。

❑导航链接里要设置data-toggle="tab"，并且还要设置data-target="选择符"（或href="选择符"），以便单击的时候能找到该选择符所对应的tab-pane面板。

❑tab-pane要放在tab-content里面，要有id（或者CSS样式）并与data-target="选择符"（或href="选择符"）一致。

选项卡的HTML代码示例如下，按照如下规则设置好以后，不再需要调用任何JavaScript代码，这一切都由Bootstrap.js全部帮你初始化好了。

<!-- 导航选项卡-->
<ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<!-- 选项卡面板 -->
<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
    <div class="tab-pane" id="settings">...</div>
</div>

关于面板的隐藏和显示样式控制，其实Bootstrap只是提供了两个样式而已，分别用于控制隐藏和显示。

默认情况下，.tab-content下的.tab-pane是隐藏的，一旦应用了.active样式，该元素就会以块级元素进行显示。源码如下：

// 源码3638行
.tab-content > .tab-pane {
  display: none;                /*隐藏*/
}
.tab-content > .active {
  display: block;       /*块级显示*/
}

为了让隐藏/显示的切换效果更流畅，可以在面板上使用fade样式产生渐入的效果。不过，别忘记了，如果页面初始化的时候就有一个默认显示的面板（并且需要渐入效果），则还要加上in样式。示例如下：

<div class="tab-content">
    <div class="tab-pane fade in active" id="home">...</div>
    <div class="tab-pane fade" id="profile">...</div>
    <div class="tab-pane fade" id="messages">...</div>
    <div class="tab-pane fade" id="settings">...</div>
</div>

Bootstrap不仅支持tabs的导航，还支持胶囊式选项卡导航，使用的时候需要把nav-tabs替换为nav-pills，还要把data-toggle的tab替换为pill。示例如下：

<ul class="nav nav-pills">
    <li><a href="#home" data-toggle="pill">Home</a></li>
    <li><a href="#profile" data-toggle="pill">Profile</a></li>
    <li><a href="#messages" data-toggle="pill">Messages</a></li>
    <li><a href="#settings" data-toggle="pill">Settings</a></li>
</ul>
<div class="tab-content">
    …
</div>

注意

❑笔者在使用过程中，发现不管使用nav-tabs还是使用nav-pills，其data-target里的值都可以随意设置，即：tab和pill设置哪一个都行，效果都是一样的。

❑笔者还发现，选项卡插件对堆叠式导航（nav-stack）也是支持的，只不过一般情况下，需要自行处理一下，要把面板放在右边，以做成左右形式的布局。

5.5.1 声明式用法