Menüs
Die meisten Web-Seiten haben eine Art von einem Menü.
In HTML wird ein Menü oft in einer ungeordneten Liste definiert <ul> (und danach gestylt), wie folgt aus :
<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 eine horizontale Menü der obigen Liste erstellen möchten, fügen Sie die .list-inline - Klasse <ul> :
<ul class="list-inline"> Versuch es selber " Oder Sie können oben mit das Menü anzeigen Bootstraps' Tabs and Pills (siehe unten).
Hinweis: Lesen Sie das letzte Beispiel auf dieser Seite, um herauszufinden , wie Registerkarten zu machen und Pillen togglebar / dynamisch.
Tabs
Tabs sind mit erstellt <ul class="nav nav-tabs"> :
Tipp: Markieren Sie außerdem die aktuelle Seite mit <li class="active"> .
Im folgenden Beispiel wird die Navigation Registerkarten:
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>
Versuch es selber " Tabs mit Dropdown-Menü
Tabs können auch Dropdown-Menüs halten.
Im folgenden Beispiel wird ein Dropdown-Menü auf "Menü 1":
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>
Versuch es selber " Pills
Pillen sind mit erstellt <ul class="nav nav-pills"> . Markieren Sie auch 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> Versuch es selber " Vertikale Pills
Pills können auch vertikal angezeigt werden. Fügen Sie einfach den .nav-stacked Klasse:
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>
Versuch es selber " Vertikale Pills in einer Reihe
Text...
Text...
Text...
Im folgenden Beispiel wird die vertikale Pille Menü innerhalb der letzten Spalte. Also, auf einem großen Bildschirm wird das Menü auf der rechten Seite angezeigt werden. Aber auf einem kleinen Bildschirm, wird der Inhalt automatisch anpassen, sich in eine Ein-Spalten-Layout:
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> Versuch es selber " Pills mit Dropdown - Menü
Pills können auch Dropdown - Menüs halten.
Im folgenden Beispiel wird ein Dropdown-Menü auf "Menü 1":
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>
Versuch es selber " Zentriert Tabs and Pills
Bis Mitte / rechtfertigen die Registerkarten und pills , die Verwendung .nav-justified Klasse.
Beachten Sie, dass auf den Bildschirmen, die kleiner als 768px sind, werden die Listenelemente gestapelt (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>
Versuch es selber " Togglebar / Dynamische Tabs
ZUHAUSE
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do TEMPOR eiusmod incididunt ut labore et dolore magna aliqua.
Um die Registerkarten togglebar machen, fügen Sie die data-toggle="tab" Attribut auf jeden Link. Dann fügen Sie eine .tab-pane - Klasse mit einer eindeutigen ID für jede Registerkarte und wickeln Sie sie in einem <div> Element mit Klasse .tab-content .
Wenn Sie die Laschen wollen und auszublenden , wenn Sie darauf klicken, fügen Sie die .fade Klasse .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>
Versuch es selber " Togglebar / Dynamische Pills
Der gleiche Code gilt für pills ; ändern nur die Daten-Toggle - Attribut auf 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>
Versuch es selber " Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 » Übung 6»
Füllen Sie Bootstrap Navigation Referenz
Eine vollständige Referenz aller Navigationsklassen gehen , um unsere komplette Bootstrap Navigation Referenz .
Eine vollständige Referenz aller Optionen der Registerkarte, Methoden und Ereignisse finden Sie auf unserer Bootstrap JS Tab Referenz .