<div class='container-fluid'>
<h2 class='page-header'>Bootstrap 選項卡</h2>

<div class='tabbable tabs-left'>

<!--
選項卡：通過BS的類來控制選項卡的樣式
-->
<ul class='nav nav-tabs'>
<li class='active'><a href='#tab1' data-toggle='tab'>選項一</a></li>
<li><a
 
 href='#tab2' data-toggle='tab'>選項二</a></li>
<li><a href='#tab3' data-toggle='tab'>選項三</a></li>
<li><a href='#tab4' data-toggle='tab'>選項四</a></li>
<li><a href='#tab5' data-toggle='tab'>選項五</a></li>
</ul>

<!--
選項卡的內容定義
 
-->
<div class='tab-content'>
<div class='tab-pane active' id='tab1'>我是選項卡一的內容</div>
<div class='tab-pane' id='tab2'>我是選項卡二的內容</div>
<div class='tab-pane' id='tab3'>我是選項卡三的內容</div>
<div class='tab-pane' id='tab4'>我是選項卡四的內容</div>
<div class='tab-pane'
 
 id='tab5'>我是選項卡五的內容</div>
</div> 
</div>
  
</div>

選項卡居左：

新增一個div且 class='tabbable tabs-left' ，如圖1：

選項卡居右：

新增一個div且 class='tabbable tabs-right'，如圖2：

選項卡居下：

新增一個div且 class='tabbable tabs-below',且 .tab-content 與 .nav nav-tabs 互換位置

原文地址 ：http://www.tuicool.com/articles/a2e63q