Navigationsleisten
Eine Navigationsleiste ist ein Navigations-Header, der am oberen Rand der Seite platziert wird:
Mit Bootstrap kann eine Navigationsleiste erweitern oder reduzieren, je nach Bildschirmgröße.
Ein Standard - Navigationsleiste wird mit erstellt <nav class="navbar navbar-default"> .
Das folgende Beispiel zeigt, wie eine Navigationsleiste oben auf der Seite hinzuzufügen:
Beispiel
<body>
<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>
...
Versuch es selber " Alle Beispiele auf dieser Seite wird eine Navigationsleiste zeigen , dass zu viel Platz auf kleinen Bildschirmen in Anspruch nimmt (jedoch in der Navigationsleiste auf einer einzigen Linie auf großen Bildschirmen sein wird - weil Bootstrap reagiert). Dieses Problem (mit den kleinen Bildschirmen) wird im letzten Beispiel auf dieser Seite gelöst werden.
Inverted Navigationsleiste
Wenn Sie nicht über den Stil der Standardnavigationsleiste mögen, Bootstrap bietet eine Alternative, schwarz navbar:
Ändern Sie einfach die .navbar-default 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>
Versuch es selber " Feste Navigationsleiste
Die Navigationsleiste kann auch am oberen oder am unteren Rand der Seite befestigt werden.
Eine feste Navigationsleiste bleibt in einer festen Position (oben oder unten), unabhängig von der Seite blättern sichtbar.
Die .navbar-fixed-top - Klasse macht die Navigationsleiste am oberen Rand festgelegt:
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> Versuch es selber " Die .navbar-fixed-bottom Klasse macht die Navigationsleiste Aufenthalt am Boden:
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> Versuch es selber " Navigationsleiste mit Dropdown
Navigationsleisten können auch Dropdown-Menüs halten.
Im folgenden Beispiel wird ein Dropdown-Menü für die "Seite 1" Button:
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> Versuch es selber " Rechtsbündigen Navigationsleiste
Die .navbar-right - Klasse wird nach rechts ausrichten Navigationsleisten - Schaltflächen verwendet.
Im folgenden Beispiel fügen wir ein "Registrieren" klicken und eine Schaltfläche "Login" auf der rechten Seite in der Navigationsleiste. Wir fügen auch eine glyphicon auf jeder der beiden neuen Schaltflächen:
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>
<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> Versuch es selber " Einstürzen der Navigationsleiste
Die Navigationsleiste nimmt zu viel Platz auf einem kleinen Bildschirm.
Wir sollten die Navigationsleiste verbergen; und zeigen Sie es nur, wenn es gebraucht wird.
Im folgenden Beispiel wird die Navigationsleiste durch eine Schaltfläche in der rechten oberen Ecke ersetzt. Nur wenn 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> Versuch es selber " Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4»