Bootstrap- tabbladen en -pillen
Menu's
De meeste webpagina's hebben een soort menu.
In HTML wordt een menu vaak gedefinieerd in een ongeordende lijst <ul>(en daarna opgemaakt), als volgt:
<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>
Als u een horizontaal menu van de bovenstaande lijst wilt maken, voegt u de
.list-inlineklasse toe aan <ul>:
<ul class="list-inline">
Of u kunt het menu hierboven weergeven met de tabbladen en pillen van Bootstraps (zie hieronder).
Opmerking: zie het laatste voorbeeld op deze pagina om te zien hoe u tabbladen en pillen omschakelbaar/dynamisch kunt maken.
Tabbladen
Tabbladen worden gemaakt met <ul class="nav nav-tabs">:
Tip: Markeer de huidige pagina ook met <li class="active">.
In het volgende voorbeeld worden navigatietabbladen gemaakt:
Voorbeeld
<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>
Tabbladen met vervolgkeuzemenu
Tabbladen kunnen ook vervolgkeuzemenu's bevatten.
In het volgende voorbeeld wordt een vervolgkeuzemenu toegevoegd aan "Menu 1":
Voorbeeld
<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>
Pillen
Pillen worden gemaakt met <ul class="nav nav-pills">. Markeer ook de huidige pagina met
<li class="active">:
Voorbeeld
<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>
Verticale pillen
Pillen kunnen ook verticaal worden weergegeven. Voeg gewoon de .nav-stackedklasse toe:
Voorbeeld
<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>
Verticale pillen op een rij
Tekst...
Tekst...
Tekst...
In het volgende voorbeeld wordt het verticale pilmenu in de laatste kolom geplaatst. Op een groot scherm verschijnt het menu dus aan de rechterkant. Maar op een klein scherm past de inhoud zich automatisch aan in een lay-out met één kolom:
Voorbeeld
<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>
Pillen met vervolgkeuzemenu
Pillen kunnen ook vervolgkeuzemenu's bevatten.
In het volgende voorbeeld wordt een vervolgkeuzemenu toegevoegd aan "Menu 1":
Voorbeeld
<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>
Gecentreerde tabbladen en pillen
Gebruik de .nav-justifiedklasse om de tabbladen en pillen te centreren/rechtvaardigen.
Merk op dat op schermen die kleiner zijn dan 768px, de lijstitems worden gestapeld (inhoud blijft gecentreerd):
Voorbeeld
<!-- 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>
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
<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>
Schakelbare / dynamische pillen
Dezelfde code is van toepassing op pillen; verander alleen het attribuut data-toggle in data-toggle="pill":
Voorbeeld
<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>
Volledige Bootstrap-navigatiereferentie
Ga voor een volledige referentie van alle navigatieklassen naar onze volledige Bootstrap-navigatiereferentie .
Ga voor een volledige referentie van alle tabopties, methoden en gebeurtenissen naar onze Bootstrap JS Tab Reference .