Bootstrap Tabs en Pille
Spyskaarte
Die meeste webblaaie het 'n soort spyskaart.
In HTML word 'n spyskaart dikwels in 'n ongeordende lys gedefinieer <ul>(en daarna gestileer), soos volg:
<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>
As jy 'n horisontale spyskaart van die lys hierbo wil skep, voeg die
.list-inlineklas by <ul>:
<ul class="list-inline">
Of jy kan die spyskaart hierbo vertoon met Bootstraps se Tabs en Pille (sien hieronder).
Let wel: Sien die laaste voorbeeld op hierdie bladsy om uit te vind hoe om oortjies en pille wissel/dinamies te maak.
Oortjies
Oortjies word geskep met <ul class="nav nav-tabs">:
Wenk: Merk ook die huidige bladsy met <li class="active">.
Die volgende voorbeeld skep navigasie-oortjies:
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>
Oortjies met aftreklys
Oortjies kan ook aftrekkieslys hou.
Die volgende voorbeeld voeg 'n aftreklys by "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>
Pille
Pille word geskep met <ul class="nav nav-pills">. Merk ook die huidige bladsy 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>
Vertikale pille
Pille kan ook vertikaal vertoon word. Voeg net die .nav-stackedklas by:
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>
Vertikale pille in 'n ry
SMS...
SMS...
SMS...
Die volgende voorbeeld plaas die vertikale pilkieslys binne die laaste kolom. Dus, op 'n groot skerm sal die spyskaart aan die regterkant vertoon word. Maar op 'n klein skerm sal die inhoud outomaties in 'n enkelkolom-uitleg aanpas:
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>
Pille met aftreklys
Pille kan ook aftrekkieslys hou.
Die volgende voorbeeld voeg 'n aftreklys by "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>
Gesentreerde oortjies en pille
Om die oortjies en pille te sentreer/regverdig, gebruik die .nav-justifiedklas.
Let daarop dat op skerms wat kleiner as 768 px is, die lysitems gestapel is (inhoud sal gesentreer bly):
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>
Wisselbare / dinamiese oortjies
TUIS
Die pyn self is belangrik, maar die pyn word versterk deur die adipiscerende proses, maar ek gee dit tyd om dit af te sny sodat ek goeie werk en pyn kan doen.
Om die oortjies wisselbaar te maak, voeg die data-toggle="tab"kenmerk by elke skakel. Voeg dan 'n .tab-paneklas by met 'n unieke ID vir elke oortjie en draai dit in 'n
<div>element met klas .tab-content.
As jy wil hê die oortjies moet in- en uitvervaag wanneer jy daarop klik, voeg die
.fadeklas by .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>
Wisselbare / Dinamiese Pille
Dieselfde kode geld vir pille; verander net die data-wissel-kenmerk na 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>
Voltooi Bootstrap-navigasieverwysing
Vir 'n volledige verwysing van alle navigasieklasse, gaan na ons volledige Bootstrap Navigation Reference .
Vir 'n volledige verwysing van alle oortjie-opsies, metodes en gebeure, gaan na ons Bootstrap JS-oortjieverwysing .