<div class="container">
<!-- nav-tabs作为选项卡头部样式 -->
<ul class="nav nav-tabs">
<li class="active"><a href="">one</a></li>
<li><a href="">two</a></li>
<li><a href="">three</a></li>
</ul>
<!-- nav-justified端点对齐 按钮宽度总和等于父级宽度 -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="">one</a></li>
<li><a href="">two</a></li>
<li><a href="">three</a></li>
</ul>
<!-- nav-tabs-justified 底线端点对齐(自适应) -->
<ul class="nav nav-tabs nav-tabs-justified">
<li class="active"><a href="">one</a></li>
<li><a href="">two</a></li>
<li><a href="">three</a></li>
</ul>
<!-- nav-pills按钮选项卡 加上nav-justified可端点对齐(自适应宽度) -->
<ul class="nav nav-tabs nav-pills nav-justified">
<li class="active"><a href="">one</a></li>
<li><a href="">two</a></li>
<li><a href="">three</a></li>
</ul>
<!-- nav-stacked竖向选项卡 配合nav-pills使用 -->
<ul class="nav nav-tabs nav-pills nav-stacked">
<li class="active"><a href="">one</a></li>
<li><a href="">two</a></li>
<li><a href="">three</a></li>
</ul>
<ul class="nav nav-tabs">
<!-- data-toggle='tab'切换属性 然后可通过锚点进行切换-->
<li class="active"><a href="#a" data-toggle='tab'>one</a></li>
<li><a href="#b" data-toggle='tab'>two</a></li>
<li><a href="#c" data-toggle='tab'>three</a></li>
</ul>
<!-- tab-content内容部分 -->
<ul class="tab-content">
<!-- fade淡入淡出 in为一开始为显示 -->
<li class="tab-pane fade in active">aaaaa</li>
<li class="tab-pane fade">bbbbb</li>
<li class="tab-pane fade">ccccc</li>
</ul>
</div>