Как построить нижнюю часть вкладки navstoot 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/

, но это только верхняя часть вкладки, кто знает, как построить нижнюю часть с помощью начальной загрузки, как на картинке ниже:

Большое спасибо!

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> 

Markup взяты из компонента нав 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>