切换卡

<div class="tabbable">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active">
            <a data-toggle="tab" href="#home">
                <i class="green icon-home bigger-110"></i>
                Home
            </a>
        </li>
        <li class="">
            <a data-toggle="tab" href="#profile">
                Messages
                <span class="badge badge-danger">4</span>
            </a>
        </li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                Dropdown
                <i class="icon-caret-down bigger-110 width-auto"></i>
            </a>
            <ul class="dropdown-menu dropdown-info">
                <li>
                    <a data-toggle="tab" href="#dropdown1">@fat</a>
                </li>
                <li>
                    <a data-toggle="tab" href="#dropdown2">@mdo</a>
                </li>
            </ul>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="home">
            <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
        </div>
        <div class="tab-pane" id="profile">
            <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
        </div>
        <div class="tab-pane" id="dropdown1">
            <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
        </div>
        <div class="tab-pane" id="dropdown2">
            <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin.</p>
        </div>
    </div>
</div>

说明：切换选项写在 li 标签中即可，对应的显示内容写在下方的div中，a 标签 href="#dropdown2"对应的 div 的 id 值。

切换选项组所在位置：给最外层的 div 即 <div class="tabbable"> 添加额外的class即可

tabs-below    //底部
tabs-left     //左侧
tabs-right    //右侧

如：

<div class="tabbable tabs-left">
  ...
</div>