Bootstrap -Tabs und Pillen
Menüs
Die meisten Webseiten haben eine Art Menü.
In HTML wird ein Menü oft in einer ungeordneten Liste definiert <ul>(und danach formatiert), wie folgt:
<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>
Wenn Sie ein horizontales Menü der obigen Liste erstellen möchten, fügen Sie die
.list-inlineKlasse hinzu zu <ul>:
<ul class="list-inline">
Oder Sie können das obige Menü mit Bootstraps' Tabs und Pills anzeigen (siehe unten).
Hinweis: Sehen Sie sich das letzte Beispiel auf dieser Seite an, um herauszufinden, wie Sie Registerkarten und Pillen umschaltbar/dynamisch machen können.
Registerkarten
Registerkarten werden erstellt mit <ul class="nav nav-tabs">:
Tipp: Markieren Sie die aktuelle Seite zusätzlich mit <li class="active">.
Das folgende Beispiel erstellt Navigationsregisterkarten:
Beispiel
<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>
Registerkarten mit Dropdown-Menü
Registerkarten können auch Dropdown-Menüs enthalten.
Das folgende Beispiel fügt "Menü 1" ein Dropdown-Menü hinzu:
Beispiel
<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 werden mit erstellt <ul class="nav nav-pills">. Markieren Sie außerdem die aktuelle Seite mit
<li class="active">:
Beispiel
<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 Pillen
Pillen können auch vertikal angezeigt werden. Fügen Sie einfach die .nav-stackedKlasse hinzu:
Beispiel
<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 Pillen in Folge
Text...
Text...
Text...
Das folgende Beispiel platziert das vertikale Pillenmenü in der letzten Spalte. Auf einem großen Bildschirm wird das Menü also rechts angezeigt. Auf einem kleinen Bildschirm passt sich der Inhalt jedoch automatisch an ein einspaltiges Layout an:
Beispiel
<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 mit Dropdown-Menü
Pillen können auch Dropdown-Menüs enthalten.
Das folgende Beispiel fügt "Menü 1" ein Dropdown-Menü hinzu:
Beispiel
<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>
Zentrierte Tabs und Pillen
Um die Tabulatoren und Pillen zu zentrieren/ausrichten, verwenden Sie die .nav-justifiedKlasse.
Beachten Sie, dass auf Bildschirmen, die kleiner als 768 Pixel sind, die Listenelemente gestapelt sind (der Inhalt bleibt zentriert):
Beispiel
<!-- 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>
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
<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>
Umschaltbare / dynamische Pillen
Derselbe Code gilt für Pillen; Ändern Sie nur das data-toggle-Attribut in data-toggle="pill":
Beispiel
<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>
Vollständige Bootstrap-Navigationsreferenz
Eine vollständige Referenz aller Navigationsklassen finden Sie in unserer vollständigen Bootstrap-Navigationsreferenz .
Eine vollständige Referenz aller Tab-Optionen, Methoden und Ereignisse finden Sie in unserer Bootstrap JS-Tab-Referenz .