Bootstrap 4 -Paginierung
Grundlegende Paginierung
Wenn Sie eine Website mit vielen Seiten haben, möchten Sie vielleicht jeder Seite eine Art Paginierung hinzufügen.
Um eine grundlegende Paginierung zu erstellen, fügen Sie die .paginationKlasse einem <ul>Element hinzu. Fügen Sie .page-itemdann jedem <li>Element und .page-linkjedem Link eine Klasse hinzu <li>:
Beispiel
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</a></li>
</ul>
Aktiver Zustand
Die .activeKlasse wird verwendet, um die aktuelle Seite "hervorzuheben":
Beispiel
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</a></li>
</ul>
Deaktivierter Zustand
Die .disabledKlasse wird für nicht anklickbare Links verwendet:
Beispiel
<ul class="pagination">
<li class="page-item
disabled"><a class="page-link" href="#">Previous</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="#">Next</a></li>
</ul>
Paginierungsgröße
Paginierungsblöcke können auch größer oder kleiner skaliert werden:
Klasse .pagination-lgfür größere Blöcke oder .pagination-smfür kleinere Blöcke hinzufügen:
Beispiel
<ul class="pagination
pagination-lg">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</a></li>
</ul>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</a></li>
</ul>
Paginierungsausrichtung
Verwenden Sie Hilfsklassen, um die Ausrichtung der Paginierung zu ändern:
Beispiel
<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px
0">
<li class="page-item">...</li>
</ul>
<!--
Center-aligned -->
<ul class="pagination justify-content-center"
style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!-- Right-aligned -->
<ul
class="pagination justify-content-end" style="margin:20px 0">
<li
class="page-item">...</li>
</ul>
Tipp: Lesen Sie mehr über Bootstrap 4 Utility/Helper-Klassen in unserem BS4-Utilities-Kapitel .
Semmelbrösel
Eine andere Form der Paginierung sind Breadcrumbs:
Die Klassen .breadcrumbund .breadcrumb-item
geben die Position der aktuellen Seite innerhalb einer Navigationshierarchie an:
Beispiel
<ul class="breadcrumb">
<li class="breadcrumb-item"><a
href="#">Photos</a></li>
<li
class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li
class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item
active">Rome</li>
</ul>