浅析Bootstrap中Tab（标签页）的使用方法

 

Bootstrap 导航元素使用相同的标记和基类，改变修饰的class，可以在不同的样式间进行切换
如".nav-pills"（胶囊式导航）与 “.nav-tabs” （标签式导航）

创建一个标签式的导航菜单：

以一个带有class .nav 的无序列表开始。
添加 class .nav-tabs。
下面的实例演示了这点：

<!-- 导航区 -->

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
 
<!-- 面板区 -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">...</div>
  <div role="tabpanel" class="tab-pane" id="profile">...</div>
  <div role="tabpanel" class="tab-pane" id="messages">...</div