Bootstrap 4 Schnellstart – Navigation
Navigation
Das Wichtigste auf einer Webseite ist eine saubere Navigation. Die Auswahl muss sich gut anfühlen und intuitiv sein.
Bootstrap bringt dafür die drei Klassen nav, nav-itemund 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 der Navigation 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">
Die rechtsbündige Ausrichtung 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.
<ul class="nav flex-column">Die Navigation kann den verfügbaren Platz auch ausfüllen. Dies kann mit der Klasse nav-fill erreicht werden.
<ul class="nav nav-fill">Tabs / Pills
Bootstrap bringt zwei weitere Designs für die Navigation mit. Zum einen Tabs und Pills.
Tabs erhältst du mit der Klasse nav-tabs und Pills über die Klasse nav-pills.
<ul class="nav nav-pills">Ich wünsche dir viel Spaß bei der Übung: