bootstrap选项卡

一、选项卡样式

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

选项卡内容