Bootstrap 5-Seitennummerierung

Grundlegende Paginierung

Wenn Ihre Website viele Seiten hat, möchten Sie möglicherweise eine Art von Paginierung für jede Seite hinzufügen.

Um grundlegende Paginierung zu erstellen, fügen Sie .pagination Klasse hinzufügen zu <ul> Element. Fügen Sie dann .page-item jeder <li> Element und fügen Sie .page-link Klasse hinzufügen zu <li> jeder Link in

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="#">Nächste Seite</a></li>
</ul>

Probieren Sie es selbst aus

Aktiv

.active Klasse für "hervorgehoben" aktuelle Seite:

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="#">Nächste Seite</a></li>
</ul>

Probieren Sie es selbst aus

Deaktiviert

.disabled Klasse für nicht klickbare Links:

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="#">Nächste Seite</a></li>
</ul>

Probieren Sie es selbst aus

Paginierungsgröße

Die Größen der Paginierung können auch angepasst werden, um größer oder kleiner zu werden:

Fügen Sie für größere Blöcke die Klasse hinzu .pagination-lg oder fügen Sie für kleinere Blöcke hinzu .pagination-sm Kategorie:

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="#">Nächste Seite</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="#">Nächste Seite</a></li>
</ul>

Probieren Sie es selbst aus

Paginierungsausrichtung

Verwenden Sie die Utility-Klasse, um die Ausrichtung der Paginierung zu ändern:

Beispiel

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

Probieren Sie es selbst aus

Breadcrumbs (Brotkrumen)

Eine andere Form der Paginierung ist die Breadcrumb-Navigation:

.breadcrumb und .breadcrumb-item Die Klasse legt die Position der aktuellen Seite in der Navigationshierarchie fest:

Beispiel

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Fotos</a></li>
  <li class="breadcrumb-item"><a href="#">Herbst 2019</a></li>
  <li class="breadcrumb-item"><a href="#">China</a></li>
  <li class="breadcrumb-item active">Peking</li>
</ul>

Probieren Sie es selbst aus