Bootstrap- Navigationsleiste
Navigationsleisten
Eine Navigationsleiste ist eine Navigationskopfzeile, die oben auf der Seite platziert wird:
Mit Bootstrap kann eine Navigationsleiste je nach Bildschirmgröße erweitert oder reduziert werden.
Eine Standard-Navigationsleiste wird mit erstellt <nav class="navbar navbar-default">.
Das folgende Beispiel zeigt, wie Sie oben auf der Seite eine Navigationsleiste hinzufügen:
Beispiel
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
Hinweis: Alle Beispiele auf dieser Seite zeigen eine Navigationsleiste, die auf kleinen Bildschirmen zu viel Platz einnimmt (auf großen Bildschirmen befindet sich die Navigationsleiste jedoch in einer einzigen Zeile, da Bootstrap responsive ist). Dieses Problem (mit den kleinen Bildschirmen) wird im letzten Beispiel auf dieser Seite gelöst.
Umgekehrte Navigationsleiste
Wenn Ihnen der Stil der Standard-Navigationsleiste nicht gefällt, bietet Bootstrap eine alternative, schwarze Navigationsleiste:
Ändern Sie einfach die .navbar-defaultKlasse in .navbar-inverse:
Beispiel
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Navigationsleiste mit Dropdown
Navigationsleisten können auch Dropdown-Menüs enthalten.
Das folgende Beispiel fügt ein Dropdown-Menü für die Schaltfläche „Seite 1“ hinzu:
Beispiel
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Rechtsbündige Navigationsleiste
Die .navbar-rightKlasse wird verwendet, um die Schaltflächen der Navigationsleiste rechts auszurichten.
Im folgenden Beispiel fügen wir rechts in der Navigationsleiste einen „Anmelden“-Button und einen „Anmelden“-Button ein. Außerdem fügen wir jedem der beiden neuen Buttons ein Glyphicon hinzu:
Beispiel
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
Navigationsleisten-Schaltflächen
Um Schaltflächen in der Navigationsleiste hinzuzufügen, fügen Sie die .navbar-btnKlasse auf einer Bootstrap-Schaltfläche hinzu:
Beispiel
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
Navbar-Formulare
Um Formularelemente innerhalb der Navigationsleiste hinzuzufügen, fügen Sie die .navbar-formKlasse zu einem Formularelement hinzu und fügen Sie eine oder mehrere Eingaben hinzu. Beachten Sie, dass wir .form-groupdem div-Container, der die Eingabe enthält, eine Klasse hinzugefügt haben. Dadurch wird die richtige Polsterung hinzugefügt, wenn Sie mehr als eine Eingabe haben (mehr darüber erfahren Sie im Kapitel Formulare).
Beispiel
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left"
action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
Sie können auch die Klassen .input-groupund .input-group-addonverwenden, um ein Symbol oder einen Hilfetext neben dem Eingabefeld anzuhängen. Mehr über diese Klassen erfahren Sie im Kapitel Bootstrap-Eingaben.
Beispiel
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
Navbar-Text
Verwenden Sie die .navbar-textKlasse, um alle Elemente innerhalb der Navigationsleiste, die keine Links sind, vertikal auszurichten (stellt die richtige Auffüllung und Textfarbe sicher).
Beispiel
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
Feste Navigationsleiste
Die Navigationsleiste kann auch oben oder unten auf der Seite fixiert werden.
Eine feste Navigationsleiste bleibt unabhängig vom Scrollen der Seite an einer festen Position (oben oder unten) sichtbar.
Die .navbar-fixed-topKlasse macht die Navigationsleiste oben fest:
Beispiel
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Die .navbar-fixed-bottomKlasse sorgt dafür, dass die Navigationsleiste unten bleibt:
Beispiel
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Reduzieren der Navigationsleiste
Die Navigationsleiste nimmt auf einem kleinen Bildschirm oft zu viel Platz ein.
Wir sollten die Navigationsleiste ausblenden; und zeigen Sie es nur, wenn es benötigt wird.
Im folgenden Beispiel wird die Navigationsleiste durch eine Schaltfläche in der oberen rechten Ecke ersetzt. Erst wenn auf die Schaltfläche geklickt wird, wird die Navigationsleiste angezeigt:
Beispiel
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>