Bootstrap5 Paginierung

Im Webentwicklungsprozess wird bei zu vielen Inhalten in der Regel eine Paginierung verwendet.

Mit Bootstrap 5 lassen sich Paginierungseffekte einfach umsetzen.

Um eine einfache Paginierung zu erstellen, können Sie<ul>dem Element die.paginationKlasse hinzufügen. Dann<li>dem Element die.page-itemKlasse hinzufügen,<li>beim <a>-Tag des Elements.page-link hinzufügenclass:

Beispiel

<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Zurück</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Weiter</a></li> </ul>

Ausprobieren »

Aktueller Seitenzustand

Die aktuelle Seite kann die.activeKlasse verwenden, um sie hervorzuheben:

Beispiel

<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Zurück</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Weiter</a></li> </ul>

Ausprobieren »

Deaktivierte Paginierungslinks

.disabledMit der Klasse können Paginierungslinks nicht anklickbar gemacht werden:

Beispiel

<ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">Zurück</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Weiter</a></li> </ul>

Ausprobieren »

Größe der Paginierung

Sie können Paginierungselemente auf unterschiedliche Größen festlegen.

.pagination-lgDie Klasse legt Paginierungselemente mit großer Schrift fest,.pagination-smDie Klasse legt Paginierungselemente mit kleiner Schrift fest:

Beispiel

<ul class="pagination pagination-lg"> <li class="page-item"><a class="page-link" href="#">Zurück</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Weiter</a></li> </ul> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">Zurück</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Weiter</a></li> </ul>

Ausprobieren »

Ausrichtung der Paginierung

Sie können Utility-Klassen verwenden, um die Ausrichtung der Paginierung festzulegen:

Beispiel

<!--Standard (linksbündig)--> <ul class="pagination" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!--Zentriert--> <ul class="pagination justify-content-center" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!--Rechtsbündig--> <ul class="pagination justify-content-end" style="margin:20px 0"> <li class="page-item">...</li> </ul>

Ausprobieren »

Breadcrumb-Navigation

.breadcrumbund.breadcrumb-itemDie Klasse wird verwendet, um die Breadcrumb-Navigation festzulegen:

Beispiel

<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Fotos</a></li> <li class="breadcrumb-item"><a href="#">Sommer 2017</a></li> <li class="breadcrumb-item"><a href="#">Italien</a></li> <li class="breadcrumb-item active">Rom</li> </ul>

Ausprobieren »
Weitere Erweiterungen