一、選項卡樣式

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

選項卡內容