Bootstrap 5-Navigationsleiste
- Vorherige Seite BS5-Navigation
- Nächste Seite BS5-Slider
Navigationsleiste
Die Navigationsleiste ist ein Navigationskopf am oberen Ende der Seite:
Basis-Navigationsleiste
Durch die Verwendung von Bootstrap können Navigationsleisten anpassungsfähig oder zusammengeklappt werden, je nach Bildschirmgröße.
Verwenden Sie .navbar Klasse, um Standardnavigationsleisten zu erstellen, gefolgt von den responsiven Falteigenschaften:.navbar-expand-xxl|xl|lg|md|sm（Horizontal angeordnet auf großen, sehr großen, großen, mittleren und kleinen Geräten oder vertikal gestapelt auf kleinen Bildschirmen）。
Um Verknüpfungen in der Navigationsleiste hinzuzufügen, verwenden Sie class="navbar-nav" der <ul> Element (oder <div>). Fügt dann mit .nav-item Klasse der <li> Element, gefolgt von einem mit .nav-link Klasse der <a> Element:
Beispiel
<!-- Graue horizontale Navigationsleiste wird auf kleinen Bildschirmen vertikal -->
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<!-- Verknüpfung -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Verknüpfung 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Verknüpfung 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Verknüpfung 3</a>
</li>
</ul>
</div>
</nav>
vertikale Navigationsleiste
Entfernt .navbar-expand-* Klasse, um eine immer vertikale Navigationsleiste zu erstellen:
Beispiel
<!-- Graue vertikale Navigationsleiste --> <nav class="navbar bg-light"> ... </nav>
zentrierte Navigationsleiste hinzu
Fügt .justify-content-center Klasse, um die Navigationsleiste zentral auszurichten:
Beispiel
<nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... </nav>
farbige Navigationsleiste
Verwenden Sie jede .bg-color Klasse, um die Hintergrundfarbe der Navigationsleiste zu ändern:
.bg-primary.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark.bg-light
Hinweis:Verwenden Sie .navbar-dark Fügt allen Links in der Navigationsleiste weiße Textfarbe hinzu oder verwendet .navbar-light Fügt schwarzen Textfarbe hinzu.
Beispiel
<!-- Grauer Hintergrund, weißer Text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
活动
</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 active" href="#">Aktiv</a>
</li>
</ul>
</div>
</nav>
<a class="nav-link disabled" href="#">Deaktiviert</a>
<!-- Schwarzer Hintergrund, weißer Text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blaue Hintergrund, weißer Text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>Aktiv-/Deaktivstatus: .active Klasse zu <a> Element hervorheben, oder .disabled Klasse, um anzuzeigen, dass der Link nicht klickbar ist.
Marke / Marke
.navbar-brand Klasse verwenden, um die Marken-/Marken-/Projektbezeichnung der Seite hervorzuheben:
Beispiel
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>
Wenn Sie .navbar-brand Wenn die Klasse zusammen mit einem Bild verwendet wird, setzt Bootstrap 5 automatisch das Bildstyle fest, um es in der vertikalen Richtung der Navigationsleiste anzuzeigen.
Beispiel
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
</a>
</div>
</nav>
Navigationsleisten-Text
Verwenden Sie .navbar-text Klasse, um jeden nicht verlinkten Element in der vertikalen Ausrichtung der Navigationsleiste auszurichten (stellt sicher, dass der richtige Innenabstand und die Textfarbe eingestellt sind).
Beispiel
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navbar-text">Navigationsleisten-Text</span>
</div>
</nav>
Oftmals, insbesondere auf kleinen Bildschirmen, möchten Sie die Navigationslinks verstecken und durch einen Button ersetzen, der bei Klick die Links anzeigt.
Um ein klappbares Navigationsmenü zu erstellen, verwenden Sie bereits festgelegte class="navbar-toggler"、data-bs-toggle="collapse" und data-bs-target="#thetarget" um den Inhalt der Navigationsleiste (Links usw.) zu umschließen, class="collapse navbar-collapse" im <div>-Element, gefolgt von der Klasse des Buttons, data-bs-target passende id："thetarget"。
Beispiel
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<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>
</div>
</nav>
Hinweis:Sie können auch löschen .navbar-expand-md Klassen, um immer die Navigationsleistenlinks zu verbergen und den Schaltknopf anzuzeigen.
Dropdown-Menü-Navigationsleiste
Die Navigationsleiste kann Dropdown-Menüs enthalten:
Beispiel
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown-Menü</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">weiterer Link</a></li>
<li><a class="dropdown-item" href="#">Dritter Link</a></li>
</ul>
</li>
Navigationsleistenmenü und -knöpfe
Sie können auch ein Formular in der Navigationsleiste enthalten:
Beispiel
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Verknüpfung</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Verknüpfung</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Verknüpfung</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Suchen">
<button class="btn btn-primary" type="button">Suchen</button>
</form>
</div>
</div>
</nav>
Fest positionierte Navigationsleiste
Die Navigationsleiste kann auch oben oder unten am Dokument fixiert werden.
Eine fixierte Navigationsleiste bleibt an einer festen Position (obere oder untere Kante) des Dokuments sichtbar, unabhängig vom Scrollen der Seite.
.fixed-top Diese Klasse hält die Navigationsleiste fest an der Seite fixiert.Oben:
Beispiel
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>
Verwenden Sie die Klasse .fixed-bottom, um die Navigationsleiste am unteren Ende der Seite zu fixieren:
Beispiel
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>
Verwenden Sie .sticky-top Diese Klasse hält die Navigationsleiste fixiert/stayiert, wenn sie durch den Scrollvorgang passiert.Oben.
Anmerkung:Dieser Stil funktioniert in IE11 und frühere Versionen nicht (siehe position:relative)
Beispiel
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> ... </nav>
- Vorherige Seite BS5-Navigation
- Nächste Seite BS5-Slider
