如何构建bootstrap导航选项卡的底部？

Question

要通过Bootstrap构建导航标签，这很简单，我只需添加代码：

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">Tab1</a></li>
  <li><a href="#">Tab2</a></li>
</ul>

http://jsfiddle.net/M4YZ6/

但它只是选项卡的顶部，谁知道如何使用bootstrap构建底部，如下图所示：

非常感谢！

Answer 1

我相信Tabbable导航是您正在寻找的，

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

从导航组件documentation

中获取标记

===编辑===

Js fiddle

Answer 2

试试这个

http://jsfiddle.net/M4YZ6/5/

HTML

<div class="tabbable">
  <ul class="nav nav-tabs" id="myTab">
    <li class="active">
      <a data-original-title="" rel="tooltip" href="#tab1" data-toggle="tab">Home</a>
    </li>
    <li><a data-original-title="" rel="tooltip" href="#tab2" data-toggle="tab">Profile</a></li>
    <li><a data-original-title="" rel="tooltip" href="#tab3" data-toggle="tab">Message</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane" id="tab1">
      Home
    </div>
    <div class="tab-pane" id="tab2">
      Profile
    </div>
    <div class="tab-pane" id="tab3">
      Message
    </div>
  </div>
</div>