一、选项卡样式
1、nav-tabs样式的选项卡
nav和nav-tabs类共同决定选项卡的样式。带有active类的标签项处于激活状态，显示为黑色，外面有圆角矩形边框，未激活的标签项，显示蓝色。
<ul class="nav nav-tabs">
<li class="active"><a href="#">Wordpress</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">Joomla</a></li>
</ul>
nav-tabs样式的选项卡
2、 nav-tabs, nav-stacked样式的选项卡
在 nav-tabs样式的选项卡基础上给ul标签添加nav-stacked类。
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#">Wordpress</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">Joomla</a></li>
</ul>
nav-tabs, nav-stacked样式的选项卡
3、nav-pills样式的选项卡
<ul class="nav nav-pills">
<li class="active"><a href="#">Wordpress</a></li>
<li><a href="#">Drupal</a></li>
<li><a href="#">Joomla</a></li>
</ul>
nav-pills样式的选项卡
二、选项卡内容
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Wordpress</a></li>
<li><a href="#tab2" data-toggle="tab">Drupal</a></li>
<li><a href="#tab3" data-toggle="tab">Joomla</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1"><p>Wordpress,优雅的CMS</p></div>
<div class="tab-pane" id="tab2"><p>Drupal,灵活强大的CMS</p></div>
<div class="tab-pane" id="tab3"><p>Joomla,简单易用的CMS</p></div>
</div>
div标签：包含所有标签项的内容
-tab-content类
-div标签：包含p标签
----tab-pane类
----active类：激活状态下的标签项对应的标签内容div设置为active
----id:单个标签项的id值
----p标签：包含单个标签项的内容
标签项li中的a标签
-href属性：值为对应标签项内容的id值。
-data-toggle属性：值为tab
选项卡内容
