twitter-bootstrap
Onglets
Recherche…
HTML de base
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#id-of-content-1" role="tab" data-toggle="tab">Tab 1</a>
</li>
<li role="presentation">
<a href="#id-of-content-2" role="tab" data-toggle="tab">Tab 2</a>
</li>
<li role="presentation">
<a href="#id-of-content-3" role="tab" data-toggle="tab">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" id="id-of-content-1" class="tab-pane">Tab content 1</div>
<div role="tabpanel" id="id-of-content-2" class="tab-pane">Tab content 2</div>
<div role="tabpanel" id="id-of-content-3" class="tab-pane">Tab content 3</div>
</div>
Cela créera un jeu d'onglets avec 3 onglets et 3 divs de contenu associés.
Onglets animés
Pour faire apparaître les onglets, ajoutez .fade
à chaque .tab-pane
. Le volet d'onglet actif doit également avoir la classe .in
pour rendre le contenu initial visible.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#id-of-content-1" role="tab" data-toggle="tab">
Tab 1
</a>
</li>
<li role="presentation" class="active">
<a href="#id-of-content-2" role="tab" data-toggle="tab">
Tab 2
</a>
</li>
<li role="presentation">
<a href="#id-of-content-3" role="tab" data-toggle="tab">
Tab 3
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" id="id-of-content-1" class="tab-pane fade">
Tab content 1
</div>
<div role="tabpanel" id="id-of-content-2" class="tab-pane fade active in">
Tab content 2
</div>
<div role="tabpanel" id="id-of-content-3" class="tab-pane fade">
Tab content 3
</div>
</div>
Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow