Bootstrap Tabs and Pills
Menu
Většina webových stránek má nějaké menu.
V HTML je nabídka často definována v neuspořádaném seznamu <ul>(a následně upravena takto):
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Pokud chcete vytvořit horizontální nabídku výše uvedeného seznamu, přidejte
.list-inlinetřídu do <ul>:
<ul class="list-inline">
Nebo můžete zobrazit nabídku výše pomocí Tabs and Pills Bootstraps (viz níže).
Poznámka: Podívejte se na poslední příklad na této stránce, abyste zjistili, jak lze karty a pilulky přepínat/dynamicky.
Karty
Karty se vytvářejí pomocí <ul class="nav nav-tabs">:
Tip: Označte také aktuální stránku pomocí <li class="active">.
Následující příklad vytváří navigační karty:
Příklad
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Záložky s rozevírací nabídkou
Karty mohou obsahovat také rozevírací nabídky.
Následující příklad přidá rozbalovací nabídku do „Menu 1“:
Příklad
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Pilulky
Pilulky jsou vytvořeny s <ul class="nav nav-pills">. Označte také aktuální stránku pomocí
<li class="active">:
Příklad
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Vertikální pilulky
Pilulky mohou být také zobrazeny svisle. Stačí přidat .nav-stackedtřídu:
Příklad
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Vertikální pilulky v řadě
Text...
Text...
Text...
Následující příklad umístí vertikální nabídku pilulek do posledního sloupce. Na velké obrazovce se tedy nabídka zobrazí vpravo. Ale na malé obrazovce se obsah automaticky upraví do rozložení s jedním sloupcem:
Příklad
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
Pilulky S Rozbalovací Menu
Pilulky mohou také obsahovat rozbalovací nabídky.
Následující příklad přidá rozbalovací nabídku do „Menu 1“:
Příklad
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Vycentrované tablety a pilulky
Chcete-li vycentrovat/zarovnat záložky a pilulky, použijte .nav-justifiedtřídu.
Všimněte si, že na obrazovkách, které jsou menší než 768 pixelů, jsou položky seznamu naskládané (obsah zůstane uprostřed):
Příklad
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Přepínatelné / dynamické karty
DOMOV
Samotná bolest je důležitá, ale bolest je zesílena procesem adipiscingu, ale dávám tomu čas, abych ji utlumil, abych odvedl skvělou práci a bolest.
Aby bylo možné karty přepínat, přidejte data-toggle="tab"atribut ke každému odkazu. Poté přidejte .tab-panetřídu s jedinečným ID pro každou kartu a zabalte je do
<div>prvku s třídou .tab-content.
Chcete-li, aby se karty při kliknutí na ně rozplynuly a ztmavily, přidejte
.fadetřídu do .tab-pane:
Příklad
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Přepínatelné / dynamické pilulky
Stejný kód platí pro pilulky; změňte pouze atribut data-toggle na data-toggle="pill":
Příklad
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Kompletní referenční navigace Bootstrap
Úplnou referenci o všech třídách navigace naleznete v naší kompletní příručce navigace Bootstrap .
Úplnou referenci o všech možnostech, metodách a událostech na kartě naleznete v naší Referenční příručce pro kartu Bootstrap JS .