twitter-bootstrap
flikar
Sök…
Grundläggande HTML
<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>
Detta skapar en flikuppsättning med 3 flikar och 3 tillhörande innehållsavdelningar.
Animerade flikar
För att få flikar att bleka, lägg till .fade
till varje .tab-pane
. Det aktiva flikfönstret måste också ha .in
klass för att synliggöra det initiala innehållet.
<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
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow