Bootstrap 4 Nav
Navigační nabídky
Pokud chcete vytvořit jednoduchou horizontální nabídku, přidejte
.navtřídu do <ul>prvku, poté .nav-item
pro každý <li>a přidejte .nav-linktřídu do jejich odkazů:
Příklad
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Zarovnané Nav
Přidejte .justify-content-centertřídu k vystředění navigace a .justify-content-endtřídu k zarovnání navigace doprava.
Příklad
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Vertikální navigace
Přidejte .flex-columntřídu a vytvořte vertikální navigaci:
Příklad
<ul class="nav
flex-column">
Karty
Pomocí třídy přeměňte navigační nabídku na navigační karty .nav-tabs. Přidejte .activetřídu do aktivního/aktuálního odkazu. Pokud chcete, aby bylo možné karty přepínat, podívejte se na poslední příklad na této stránce.
Příklad
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Pilulky
Proměňte navigační nabídku na navigační pilulky s .nav-pillstřídou. Pokud chcete, aby pilulky byly přepínatelné, podívejte se na poslední příklad na této stránce.
Příklad
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Odůvodněné tablety/pilulky
Zarovnejte tablety/pilulky .nav-justifiedtřídou (stejná šířka):
Příklad
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Pilulky s rozevíracím seznamem
Příklad
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Karty s rozbalovací nabídkou
Příklad
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</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
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Přepínatelné / dynamické pilulky
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.
Stejný kód platí pro pilulky; změňte pouze atribut data-toggle na data-toggle="pill":
Příklad
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Kompletní referenční příručka Bootstrap 4 Nav
Ú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 4 JS .