bootstrap 左侧横向选项卡

<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 互换位置

bootstrap 左侧横向选项卡

原文：http://www.cnblogs.com/qianjilou/p/6371382.html