Webseite Schnellstart – Bootstrap Navigation

Navigation

Das wichtigste auf einer Webseite ist eine saubere Navigation. Egal ob Menü oder verschiedene Sichten, die Auswahl muss sich gut anfühlen und intuitiv sein.

Bootstrap bringt dafür die drei Klassen nav, nav-item und nav-link mit. So kannst du aus jedem Element eine Navigation zaubern z.B.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Seite A</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Seite B</a>
  </li>
</ul>

Um das Verhalten dahinter muss man sich allerdings, ähnlich wie bei den Dialogen, selbst kümmern.

Ausrichtung / Füllung

Die Ausrichtung und das Aussehen der Navigation können über verschieden Klassen beeinflusst werden. Möchte man die Navigation zentrieren, setzt man die Klasse justify-content-center an das Element mit der Klasse nav.

<ul class="nav justify-content-center">

Rechtsbündig funktioniert das über die Klasse justify-content-end.

Aber auch eine vertikale Navigation ist möglich. Dies kann mit der flex-column Klasse erreicht werden. Soll die Navigation NUR auf kleinen Bildschirmen vertikal gezeigt werden, verwendest du die flex-sm-column Klasse.

Die Navigation kann den verfügbaren Platz auch ausfüllen. Dies kann mit der Klasse nav-fill erreicht werden.

Tabs / Pills

Bootstrap bringt zwei weitere Designs für die Navigation mit. Zum einen die Tabs und die Pills.

Tabs erhältst du mit der Klasse nav-tabs und die Pills über die Klasse nav-pills.

Ich wünsche dir viel Spaß bei der Übung: