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

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

 

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

以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs。
下面的实例演示了这点：
————————————————
版权声明：本文为CSDN博主「皮蛋瘦肉没有肉」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zzp961224/article/details/53309037/

<!-- 导航区 -->
 
<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>
  <div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
————————————————
版权声明：本文为CSDN博主「皮蛋瘦肉没有肉」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zzp961224/article/details/53309037/