Bootstrap 4 Paginierung

In der Webentwicklung wird bei zu vielen Inhalten in der Regel eine Paginierung verwendet.

Bootstrap 4 macht die Implementierung der Paginierung sehr einfach.

Um eine einfache Paginierung zu erstellen, fügen Sie dem<ul>-Element die.pagination-Klasse hinzu. Dann beim<li>-Element, fügen Sie die.page-item-Klasse hinzu, und beim<li><a>-Tag des Elements fügen Sie die.page-linkclass:

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>

Selbst ausprobieren »

Status der aktuellen Seite

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>

Selbst ausprobieren »

Deaktivierte Paginierungslinks

.disabledDie Klasse kann Paginierungslinks nicht anklickbar machen:

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>

Selbst ausprobieren »

Paginierungs-Größen

Paginierungselemente können auf verschiedene Größen eingestellt werden.

.pagination-lgDie Klasse setzt Paginationselemente auf eine größere Größe,.pagination-smdie Klasse setzt Paginationselemente auf eine kleinere Größe:

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>

Selbst 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>

Selbst ausprobieren »

Ausrichtung der Paginierung

Utility-Klassen können verwendet werden, 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>

Selbst ausprobieren »
Andere Erweiterungen