Soll der Benutzer durch eine Reihe von Pages, Screens oder Bildern geführt werden hilft die .pagination
weiter. Die Klasse .active
auf einem Listenelement zeigt an, auf welcher Seite sich der Benutzer gerade befindet. Sind Seiten inaktiv kann dem Listenelement die Klasse .disabled
zugeordnet werden:
**Anmerkung:**
Das Beispliel verwendet die Zentrierhelfer Komponente für die horizontale Ausrichtung
<div class="h-center"> <ul class="pagination"> <li><a href="#"><span class="sr-only">Seite 1</span></a></li> <li><a href="#"><span class="sr-only">Seite 2</span></a></li> <li><a href="#"><span class="sr-only">Seite 3</span></a></li> <li class="active"><a href="#"><span class="sr-only">Seite 4 aktiv</span></a></li> <li><a href="#"><span class="sr-only">Seite 5</span></a></li> <li><a href="#"><span class="sr-only">Seite 6</span></a></li> <li><a href="#"><span class="sr-only">Seite 7</span></a></li> <li class="disabled" role="presentation"><a href="#"><span class="sr-only">Seite 8 inaktiv</span></a></li> <li class="disabled" role="presentation"><a href="#"><span class="sr-only">Seite 9 inaktiv</span></a></li> </ul> </div>