Bootstrap 4 Navs
Menu nawigacyjne
Jeśli chcesz stworzyć proste poziome menu, dodaj
.navklasę do <ul>elementu, a następnie .nav-item
dla każdego <li>i dodaj .nav-linkklasę do ich linków:
Przykład
<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>
Wyrównana nawigacja
Dodaj .justify-content-centerklasę, aby wyśrodkować nawigację, i .justify-content-endklasę, aby wyrównać nawigację do prawej.
Przykład
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Nawigacja pionowa
Dodaj .flex-columnklasę, aby utworzyć pionową nawigację:
Przykład
<ul class="nav
flex-column">
Karty
Zmień menu nawigacyjne w karty nawigacyjne z .nav-tabsklasą. Dodaj .activeklasę do aktywnego/bieżącego linku. Jeśli chcesz, aby karty można było przełączać, zobacz ostatni przykład na tej stronie.
Przykład
<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>
Pigułki
Zmień menu nawigacyjne w pigułki nawigacyjne z .nav-pillsklasą. Jeśli chcesz, aby pigułki można było przełączać, zobacz ostatni przykład na tej stronie.
Przykład
<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>
Uzasadnione tabletki/tabletki
Wyrównaj zakładki/pigułki .nav-justifiedklasą (równej szerokości):
Przykład
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Pigułki z rozwijanym
Przykład
<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 z menu rozwijanym
Przykład
<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>
Przełączalne/dynamiczne karty
DOM
Ból sam w sobie jest ważny, ale ból jest wzmacniany przez proces adipisacyjny, ale daję mu czas na jego zmniejszenie, aby wykonać świetną pracę i ból.
Aby umożliwić przełączanie kart, dodaj data-toggle="tab"atrybut do każdego łącza. Następnie dodaj .tab-paneklasę z unikalnym identyfikatorem dla każdej zakładki i zapakuj ją w
<div>element z klasą .tab-content.
Jeśli chcesz, aby karty pojawiały się i znikały po ich kliknięciu, dodaj
.fadeklasę do .tab-pane:
Przykład
<!-- 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>
Przełączalne/dynamiczne pigułki
DOM
Ból sam w sobie jest ważny, ale ból jest wzmacniany przez proces adipisacyjny, ale daję mu czas na jego zmniejszenie, aby wykonać świetną pracę i ból.
Ten sam kod dotyczy pigułek; zmień tylko atrybut data-toggle na data-toggle="pill":
Przykład
<!-- 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>
Kompletna dokumentacja nawigacyjna Bootstrap 4
Aby uzyskać pełne informacje na temat wszystkich opcji zakładek, metod i zdarzeń, przejdź do naszego podręcznika Bootstrap 4 JS Tab Reference .