Bootstrap 4- Navigationsleiste
Navigationsleisten
Eine Navigationsleiste ist eine Navigationskopfzeile, die oben auf der Seite platziert wird:
Einfache Navigationsleiste
Mit Bootstrap kann eine Navigationsleiste je nach Bildschirmgröße erweitert oder reduziert werden.
Mit der Klasse wird eine Standard-Navigationsleiste erstellt .navbar
, gefolgt von einer ansprechenden zusammenklappbaren Klasse: .navbar-expand-xl|lg|md|sm
(stapelt die Navigationsleiste vertikal auf extra großen, großen, mittleren oder kleinen Bildschirmen).
Um Links innerhalb der Navigationsleiste hinzuzufügen, verwenden Sie ein <ul>Element mit class="navbar-nav". Fügen Sie dann <li>Elemente mit einer .nav-itemKlasse hinzu, gefolgt von einem <a>Element mit einer .nav-linkKlasse:
Beispiel
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Vertikale Navigationsleiste
Entfernen Sie die .navbar-expand-xl|lg|md|smKlasse, um eine vertikale Navigationsleiste zu erstellen:
Beispiel
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Zentrierte Navigationsleiste
Fügen Sie die .justify-content-centerKlasse hinzu, um die Navigationsleiste zu zentrieren.
Das folgende Beispiel zentriert die Navigationsleiste auf mittleren, großen und extra großen Bildschirmen. Auf kleinen Bildschirmen wird es vertikal und linksbündig angezeigt (wegen der Klasse .navbar-expand-sm):
Beispiel
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
Farbige Navigationsleiste
Verwenden Sie eine der .bg-colorKlassen, um die Hintergrundfarbe der Navigationsleiste zu ändern ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkund .bg-light)
Tipp: Fügen Sie allen Links in der Navigationsleiste mit der Klasse eine weiße Textfarbe hinzu .navbar-dark, oder verwenden Sie die .navbar-lightKlasse, um eine
schwarze Textfarbe hinzuzufügen .
Beispiel
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
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>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
Aktiver/deaktivierter Zustand : Fügen Sie die .activeKlasse einem
<a>Element hinzu, um den aktuellen Link hervorzuheben, oder die .disabledKlasse, um anzuzeigen, dass der Link nicht angeklickt werden kann.
Markenlogo
Die .navbar-brandKlasse wird verwendet, um die Marke/das Logo/den Projektnamen Ihrer Seite hervorzuheben:
Beispiel
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
Wenn Sie die .navbar-brandKlasse für Bilder verwenden, formatiert Bootstrap 4 das Bild automatisch so, dass es vertikal in die Navigationsleiste passt.
Beispiel
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
Reduzieren der Navigationsleiste
Sehr oft, besonders auf kleinen Bildschirmen, möchte man die Navigationslinks ausblenden und durch eine Schaltfläche ersetzen, die sie beim Anklicken sichtbar machen soll.
Um eine reduzierbare Navigationsleiste zu erstellen, verwenden Sie eine Schaltfläche mit . Dann packen Sie den Inhalt der Navigationsleiste (Links usw.) in ein div-Element mit , gefolgt von einer ID, die mit der der Schaltfläche übereinstimmt: " thetarget ".class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
Beispiel
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
<ul class="navbar-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>
</ul>
</div>
</nav>
Tipp: Sie können auch die Klasse .navbar-expand-md entfernen, um die Navigationsleisten-Links IMMER auszublenden und die Umschaltfläche anzuzeigen.
Navigationsleiste mit Dropdown
Navigationsleisten können auch Dropdown-Menüs enthalten:
Beispiel
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</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>
</ul>
</nav>
Navbar-Formulare und -Schaltflächen
Fügen Sie ein <form>Element mit class="form-inline"hinzu, um Eingänge und Schaltflächen nebeneinander zu gruppieren:
Beispiel
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
Sie können auch andere Eingabeklassen verwenden, z. B. .input-group-prependoder .input-group-appendum ein Symbol oder einen Hilfetext neben dem Eingabefeld anzuhängen. Mehr über diese Klassen erfahren Sie im Kapitel Bootstrap-Eingaben.
Beispiel
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
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-expand-sm bg-dark navbar-dark">
<!--
Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</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 .fixed-topKlasse macht die Navigationsleiste oben fest :
Beispiel
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Verwenden Sie die Klasse, damit die Navigationsleiste unten auf der Seite .fixed-bottombleibt :
Beispiel
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>