Bootstrap 4 Navs
Nav-menu's
Als u een eenvoudig horizontaal menu wilt maken, voegt u de
.navklasse toe aan een <ul>element, gevolgd door .nav-item
voor elk <li>en voegt u de .nav-linkklasse toe aan hun links:
Voorbeeld
<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>
uitgelijnde navigatie
Voeg de .justify-content-centerklasse toe om de navigatie te centreren en de .justify-content-endklasse om de navigatie rechts uit te lijnen.
Voorbeeld
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Verticale navigatie
Voeg de .flex-columnklasse toe om een verticale navigatie te maken:
Voorbeeld
<ul class="nav
flex-column">
Tabbladen
Verander het navigatiemenu in navigatietabbladen met de .nav-tabsklas. Voeg de .activeklas toe aan de actieve/huidige link. Als u wilt dat de tabbladen kunnen worden omgeschakeld, zie het laatste voorbeeld op deze pagina.
Voorbeeld
<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>
Pillen
Verander het navigatiemenu in navigatiepillen met de .nav-pillsklas. Als u wilt dat de pillen verwisselbaar zijn, zie dan het laatste voorbeeld op deze pagina.
Voorbeeld
<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>
Uitgevulde tabbladen/pillen
Rechtvaardig de tabs/pillen met de .nav-justifiedklasse (gelijke breedte):
Voorbeeld
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Pillen met dropdown
Voorbeeld
<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>
Tabbladen met dropdown
Voorbeeld
<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>
Schakelbare / dynamische tabbladen
HUIS
De pijn zelf is belangrijk, maar de pijn wordt versterkt door het proces van adipiscing, maar ik geef het de tijd om het te verminderen, zodat ik geweldig werk en pijn kan doen.
Voeg het data-toggle="tab"attribuut aan elke link toe om de tabbladen schakelbaar te maken. Voeg vervolgens een .tab-paneklasse toe met een unieke ID voor elk tabblad en wikkel ze in een
<div>element met class .tab-content.
Als u wilt dat de tabbladen in- en uitfaden wanneer u erop klikt, voegt u de
.fadeklasse toe aan .tab-pane:
Voorbeeld
<!-- 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>
Schakelbare / dynamische pillen
HUIS
De pijn zelf is belangrijk, maar de pijn wordt versterkt door het proces van adipiscing, maar ik geef het de tijd om het te verminderen, zodat ik geweldig werk en pijn kan doen.
Dezelfde code is van toepassing op pillen; verander alleen het attribuut data-toggle in data-toggle="pill":
Voorbeeld
<!-- 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>
Volledige Bootstrap 4 Nav-referentie
Ga voor een volledige referentie van alle tabopties, methoden en gebeurtenissen naar onze Bootstrap 4 JS Tab Reference .