Bootstrap 4 Navs
Nav Spyskaarte
As jy 'n eenvoudige horisontale spyskaart wil skep, voeg die
.navklas by 'n <ul>element, gevolg deur .nav-item
vir elkeen <li>en voeg die .nav-linkklas by hul skakels:
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>
Belynde Nav
Voeg die .justify-content-centerklas by om die navigasie te sentreer, en die .justify-content-endklas om die navigasie regs te belyn.
Voorbeeld
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Vertikale Nav
Voeg die .flex-columnklas by om 'n vertikale navigasie te skep:
Voorbeeld
<ul class="nav
flex-column">
Oortjies
Verander die navigasie-kieslys in navigasie-oortjies saam met die .nav-tabsklas. Voeg die .activeklas by die aktiewe/huidige skakel. As jy wil hê dat die oortjies wisselbaar moet wees, sien die laaste voorbeeld op hierdie bladsy.
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>
Pille
Verander die navigasie-kieslys in navigasiepille saam met die .nav-pillsklas. As jy wil hê die pille moet wisselbaar wees, sien die laaste voorbeeld op hierdie bladsy.
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>
Geregverdigde Tabs/pille
Regverdig die oortjies/pille met die .nav-justifiedklas (gelyke breedte):
Voorbeeld
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Pille 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>
Oortjies met aftreklys
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>
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
<!-- 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>
Wisselbare / Dinamiese Pille
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.
Dieselfde kode geld vir pille; verander net die data-wissel-kenmerk na 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>
Voltooi Bootstrap 4 Nav-verwysing
Vir 'n volledige verwysing van alle oortjie-opsies, metodes en gebeure, gaan na ons Bootstrap 4 JS-oortjieverwysing .