Bootstrap 4 Navis
Navigationsmenüs
Wenn Sie ein einfaches horizontales Menü erstellen möchten, fügen Sie die
.navKlasse zu einem <ul>Element hinzu, gefolgt von .nav-item
for each <li>und fügen Sie die .nav-linkKlasse zu ihren Links hinzu:
Beispiel
<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>
Ausgerichtetes Navi
Fügen Sie die .justify-content-centerKlasse hinzu, um die Navigation zu zentrieren, und die .justify-content-endKlasse, um die Navigation rechts auszurichten.
Beispiel
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Vertikale Navigation
Fügen Sie die .flex-columnKlasse hinzu, um ein vertikales Navigationssystem zu erstellen:
Beispiel
<ul class="nav
flex-column">
Registerkarten
Verwandeln Sie das Navigationsmenü mit der .nav-tabsKlasse in Navigationsregisterkarten. Fügen Sie die .activeKlasse dem aktiven/aktuellen Link hinzu. Wenn Sie möchten, dass die Registerkarten umschaltbar sind, sehen Sie sich das letzte Beispiel auf dieser Seite an.
Beispiel
<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
Verwandeln Sie das Navigationsmenü mit der .nav-pillsKlasse in Navigationspillen. Wenn Sie möchten, dass die Pillen umschaltbar sind, sehen Sie sich das letzte Beispiel auf dieser Seite an.
Beispiel
<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>
Gerechtfertigte Tabs/Pillen
Begründen Sie die Tabs/Pillen mit der .nav-justifiedKlasse (gleiche Breite):
Beispiel
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Pillen mit Dropdown
Beispiel
<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>
Registerkarten mit Dropdown
Beispiel
<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>
Umschaltbare / dynamische Registerkarten
HEIMAT
Der Schmerz selbst ist wichtig, aber der Schmerz wird durch den Adipiskationsprozess verstärkt, aber ich gebe ihm Zeit, ihn zu reduzieren, damit ich großartige Arbeit und Schmerzen leisten kann.
Um die Registerkarten umschaltbar zu machen, fügen Sie das data-toggle="tab"Attribut zu jedem Link hinzu. Fügen Sie dann für jede Registerkarte eine .tab-paneKlasse mit einer eindeutigen ID hinzu und packen Sie sie in ein
<div>Element mit class ein .tab-content.
Wenn Sie möchten, dass die Registerkarten beim Anklicken ein- und ausgeblendet werden, fügen Sie die
.fadeKlasse hinzu zu .tab-pane:
Beispiel
<!-- 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>
Umschaltbare / dynamische Pillen
HEIMAT
Der Schmerz selbst ist wichtig, aber der Schmerz wird durch den Adipiskationsprozess verstärkt, aber ich gebe ihm Zeit, ihn zu reduzieren, damit ich großartige Arbeit und Schmerzen leisten kann.
Derselbe Code gilt für Pillen; Ändern Sie nur das data-toggle-Attribut in data-toggle="pill":
Beispiel
<!-- 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>
Vollständige Bootstrap 4 Nav-Referenz
Eine vollständige Referenz aller Tab-Optionen, Methoden und Ereignisse finden Sie in unserer Bootstrap 4 JS-Tab-Referenz .