css - 如何构建 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

试试这个

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>