Eine Navbar ist ein elementares Seitenelement, welches zur Navigation auf deiner Seite meist ganz oben eingebunden wird. Bootstrap bietet hier viele Funktionen, um eine Navigation zu verwenden, die sich auf Smartphones minimiert und somit immer gut bedienbar bleibt.
Eine Standard-Navbar
Unterstützte Elemente
Farbige Navbar
Positionierung
Eine Standard-Navbar
Jede Webseite braucht eine Navigation. Mit Bootstrap kannst du das recht einfach umsetzen und erhälst eine Navigationsleiste, die sogar responsive ist.
Beispiel Standard-Navigation
Eine Navigationsleiste setzt sich zumeist aus folgenden Bestandteilen zusammen:
- Seitentitel oder Logo
- Hauptmenü
- Suchfunktion
- weitere Links zu Impressum etc.
Jede Bootstrap-Navbar hat den gleichen Grundaufbau, der nachfolgend dargestellt ist.
<div class="container-fluid">
<div class="navbar-header">
...
</div>
<div class="collapse navbar-collapse" id="navbar">
...
</div>
</div>
</nav>
Die Klassen navbar navbar-default sind obligatorisch. Die Klasse container-fluid spannt die Navigation über die gesamte Breite des Bildschirms auf (alternativ kann container verwendet werden).
Innerhalb der Bootstrap-Navigation gibt es zwei Bereiche: Seitentitel / Logo (navbar-header) und die Navigationselemente (collapse navbar-collapse).
Seitentitel / Logo
Es ist üblich in einer Webseite in der Navigation oben links den Titel der Seite bzw. ein Logo einzubinden, welches mit der Startseite verlinkt ist. Dies ist benutzerfreundlich, weil Besucher deiner Seite dieses Verhalten gewöhnt sind und auch so erwarten.
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Seitentitel</a>
Der HTML-Code für den Seitentitel sieht ziemlich komplex aus, ist aber recht einfach erklärt. Das komplett button-Element ist für die korrekte Darstellung der "Hamburger-Navigation" (Vor- und Nachteile diese Technik hier nachlesen) auf Smarthpones. Dafür muss auf das div-Element der Navigationselemente verwiesen werden, damit beim Klick auf das Hamburger-Icon die Navigation auf bzw. zu klappt. Das passiert über das Attribut data-target="#navbar".
Der eigentliche Seitentitel ist lediglich ein normaler Link mit der Klasse navbar-brand. Anstelle des Seitentitels kannst du auch einfach ein Bild img-Element einfügen, um dein Logo anzuzeigen.
Navigationselemente
Der wichtigeste Bereich einer Navigation sind natürlich die Links zu Unterseiten / Such-Formulare etc. Alle Elemente müssen innerhalb das div-Elements (<div class="collapse navbar-collapse" id="navbar">) eingefügt werden.
Menupunkte werden als Liste (ul-Element) mit der Klasse nav navbar-nav eingefügt und erhalten unterschiedliche Klassen, je nachdem ob es sich um einfache Menüpunkte oder Dropdown-Menüs handelt.
<li><a href="#">Menüpunkt</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Unterpunkt 1</a></li>
<li><a href="#">Unterpunkt 2</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Unterpunkt 3</a></li>
</ul>
</li>
</ul>
Beispiel Navigation mit Dropdown
Normaler Menüpunkt
Die Einbindung erfolgt als Link eines normalen Listenelementes (li).
<li><a href="#">Menüpunkt</a></li>
Einen hervorgehobenen Menüpunkt wird durch die Klasse <li class="active">...</li> dargestellt.
Dropdown-Menüpunkt
Dropdowns eignen sich um viele Unterpunkte eines Menüs darzustellen, z. B. wenn nicht alle Menüpunkte in die Haupt-Navigation passen, weil es zu viel sind.
Die Klasse <li class="dropdown">..</li> erzeugt ein Dropdown-Menü in Bootstrap, der Link muss das Attribut data-toggle="dropdown" besitzen, damit beim Klick das Dropdown auf- bzw. zugeklappt wird. Alle anderen Angaben sind optional bzw. für Screenreader notwendig.
Die eigentlichen Unterpunkte liegen dann wiederum in einer Liste mit der Klasse <ul class="dropdown-menu">.
Um ein Trennzeichen (waagerechte Linie) einzufügen, genügt es ein leeres li-Element mit der Klasse divider einzufügen.
Unterstützte Elemente
Folgende Elemente kannst du problemlos in deine Navigation verwenden, es müssen lediglich die passenden CSS-Klassen gesetzt werden.
| Element | CSS-Klasse Bootstrap 3 |
CSS-Klasse Bootstrap 4 |
Bemerkung | Beispiel Bootstrap 4 |
|---|---|---|---|---|
| Markenname | .navbar-brand.navbar-brand | Funktioniert am besten bei einem Link, aber auch bei Bildern. |
<nav class="navbar navbar-light bg-faded"> |
|
| Navigation | .nav .navbar-nav | Kann bei einer Liste (<ul>) oder normalen Links (nur ab Bootstrap 4!) verwendet werden. |
<nav class="navbar navbar-light bg-faded"> |
|
| Formulare | .navbar-form .navbar-left/right |
.form-linline .float-xs-left/right |
Alle Formularelemente können einfach genutzt werden, ebenso wie Input Groups und Buttons in verschiedenen Größen. |
<nav class="navbar navbar-light bg-faded"> |
| Text | .navbar-text .navbar-left/right |
.navbar-text .float-xs-left/right |
Texte können ebenfalls einfach links oder rechts in der Navbar positioniert werden. |
<nav class="navbar navbar-light bg-faded"> |
Beispiel Navigation Elemente
Farbige Navbar
In Bootstrap 3 gibt es leider nur zwei Varianten:
- die Standard-Navbar (in weiß)
- oder die schwarze Navbar(Klasse
.navbar-inverseanhängen) um eine dunkle Navbar zu erhalten.
Bootstrap 4 bietet mehr Möglichkeiten neben hell/dunkel (.navbar-light und .navbar-dark) kann man auch eine Hintergrundfarbe angeben oder einfach die Primärfarbe (.bg-primary).
Bitte schaue dir einfach die Beispiele an.
Beispiel Farbige Navbar
Positionierung
Bootstrap bringt einige Klassen mit, die zur Positionierung der Navbar innerhalb der Webseite nützlich sind.
| Position | CSS-Klasse Bootstrap 3 | CSS-Klasse Bootstrap 4 | Bemerkung | Beispiel Bootstrap 4 |
|---|---|---|---|---|
| Oben fest | .navbar-fixed-top | Navbar oben anheften. Aufpassen: Es muss ein Padding angegeben werden, damit kein Content überdeckt wird. |
<nav class="navbar navbar-fixed-top navbar-light bg-faded"> |
|
| Unten fest | .navbar-fixed-bottom | Navbar unten anheften. Aufpassen: Es muss ein Padding angegeben werden, damit kein Content überdeckt wird. |
<nav class="navbar navbar-fixed-bottom navbar-light bg-faded"> |
|
| Ganze Breite | .navbar-static-top | .navbar-full | Navbar über die gesamte Seitenbreite |
<nav class="navbar navbar-full navbar-light bg-faded"> |
Beispiel Positionierung der Navbar
Dimitrios fragt
wieso funktionieren die codes nicht richtig ? ich schaffe es, dass die Navbar fixiert ist, aber wenn ich runterscrolle wird sie durchsichtig und sie behält ihre Farbe nicht.
Antwort von BootstrapWorld.de
Hallo,
welcher Code funktioniert denn nicht? Hast du eventuell einen Link zu einem Beispiel?
Viele Grüße
Andreas
York fragt
Mein Bootstrapmenu (im Smartphone Modus) scrollt bei klick runter. Schliesst sich jedoch nicht wieder nachdem ich einen Punkt angewählt habe. Das ist denkbar schlecht, da so nur ein kleiner Zwischenraum mit Inhalten auf dem Handy zu sehen ist und fast das ganze Display von Menuepunkten verdeckt ist.
Was kann ich tun , um das zu korrigieren?
Am Besten wäre es schliesst sich , wenn man einen Menüpunkt anwählt oder wenn man oben auf die Menuerasterung klickt...
Danke für eure Hilfe
Antwort von BootstrapWorld.de
Hallo,
probiere mal bitte folgendes. Ändere die Links in deinem Menü und füge die Attribute "data-toggle" und "data-target" mit ein. Wichtigt ist, dass dein Menü die Klasse "nav-collapse" besitzt
<li>
<a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>Viele Grüße
Andreas
Gefunden auf:
https://stackoverflow.com/questions/16680543/hide-twitter-bootstrap-nav-collapse-on-click#answer-24685804
Andreas Günther fragt
Ich habe bootstrap-3.5.5 und möchte die Hintergrundfarbe der Dropdown-Menues und das Highlighting vom Grau in andere Farben ändern. An welcher Stelle in der bootstrap-theme.css wird das gemacht? Ich vermute mal ab Zeile 317 ".dropdown-menu" mit dem Attribut "background-image". Leider stelle ich nach Änderung der Farbwerte im Linear-Gradienten keine Farbänderung auf der Webseite fest.
Gäbe es auch Online einen Generator für linear-gradient()?
Besten Dank
Andreas
Antwort von BootstrapWorld.de
Hallo Andreas,
schau mal, was ich hier gefunden habe: https://stackoverflow.com/a/39535443.
Ansonsten kannst du dir auch direkt bei getbootstrap.com eine benutzerdefinierte CSS-Datei erstellen lassen.
Nutze dafür einfach folgenden Generator: http://getbootstrap.com/customize/#less-variables.
Einen CSS Gradient Generator findest du z. B. hier: http://www.colorzilla.com/gradient-editor/.
Ich hoffe das hilft dir weiter.
Viele Grüße
Andreas
Ulli Stiller fragt
Ich bin vielleicht bescheuert, aber ich suche schon die ganze Zeit im Netz nach der Lösung.
Ich kann problemlos die navbar erstellen, aber wie schaffe ich es, dass der Benutzer beim Klicken auf den Link an die richtige Stelle auf meiner Seite kommt, wenn alle Elemente in Reihen untereinander und nicht wie früher in einzelnen html Seiten angelegt sind. Irgendwie müsste man einen Anker an der Stelle setzen, aber wie?
Antwort von BootstrapWorld.de
Hallo Ulli,
mit den Ankern liegst du schon mal gar nicht so schlecht ;-).
Früher wurde das Ziel eines Ankers mittels <a name="anker"></a> festgelegt.
Inzwischen kannst du als Anker die ID eines beliebigen Elements nutzen.
Ein Beispiel für die Navigation habe ich dir hier erstellt:
https://www.bootstrapworld.de/snippet/navbar-onepage
Viele Grüße
Andreas