Paginierung in Bootstrap 5
So erstellen Sie eine Pagination mit Bootstrap 5
Um eine Pagination zu machen, weisen Sie die zu .Seitennummerierung Klasse zu einer ungeordneten Liste, .Page-Item Klasse zu den Listenelementen und .Seitenverbindung Klasse zum Link in jedem Listenelement vorhanden.
Html
Der obige Code generiert eine Pagination, die die Nummerierung von 1 bis 4 zeigt, während & Laquo und & Raquo Entitätsnamen für den linkszeigenen und rechtszeigten Doppelwinkel-Anführungszeichen sind. Diese Entitäten helfen dem Benutzer, die Paginationsnummerierung rückwärts und vorwärts zu bewegen.
Ausgang
Der Ausgang zeigt eine einfache Pagination an.
Wie Sie einer Pagination aktive und behinderte Zustände zuweisen
Der aktive Status einer Pagination zeigt die Seite, auf der der Benutzer derzeit befindet, während der behinderte Zustand einen Link nicht unklettig macht und den Benutzer darauf aufmerksam macht, dass es keine weiteren Seiten zum Navigieren gibt.
Html
Der Code -Snippet erstellt eine Paginierung mit dem mit dem Bezeichnung „zurück“ bezeichneten Listenelement, der dem deaktivierten Status zugewiesen wird. In der Zwischenzeit wurde der aktive Status dem Listenelement mit der Bezeichnung „4“ zugewiesen, wodurch sich der Benutzer derzeit auf der vierten Seite befindet.
Ausgang
Die aktiven und behinderten Zustände wurden der Pagination erfolgreich zugeordnet.
Wie man eine Pagination skaliert
Wenn Sie Ihre Pagination skalieren möchten, dann verwenden Sie .Pagination-sm Klasse, um kleine Paginationen zu erstellen, während die Verwendung der Verwendung der .Pagination-lg große Paginationen erzeugen.
Html
Der obige Code generiert sowohl kleine als auch große Paginationen, um den Vergleich zwischen Größen beider Paginationen zu demonstrieren.
Ausgang
So können Sie Ihre Pagination skalieren.
Wie man die Ausrichtung einer Pagination festlegt
Eine standardmäßige Pagination befindet sich in der linken Ecke einer Seite. Wenn Sie sie jedoch in der Mitte platzieren möchten, dann verwenden Sie die .Rechtfertigungs-in-Center Klasse, während ich die benutze .Justify-Content-End Um es an der rechten Ecke der Seite zu platzieren.
Html
Der obige Code verwendet die .Justify-Content-Center-Klasse. Daher wird die als Ergebnis erstellte Pagination in der Mitte der Seite platziert.
Ausgang
Dies ist eine zentrale positionierte Pagination.
Lassen Sie uns nun die Pagination an der rechten Ecke der Seite positionieren.
Html
Der obige Code verwendet die .Justify-Content-End-Klasse, daher wird die Pagination am Ende der Seite platziert.
Ausgang
Dies ist eine rechts positionierte Pagination.
Abschluss
Eine Pagination kann erstellt werden, indem die Zuordnung der .Seitennummerierung Klasse zu einer ungeordneten Liste, .Page-Item Klasse zu den Listenelementen und .Seitenverbindung Klasse zum Link in jedem Listenelement vorhanden. Wenn Sie eine Pagination skalieren möchten, verwenden Sie die .Pagination-sm, Und .Pagination-lg Klassen. Darüber hinaus verwenden Sie eine Pagination in der Mitte oder am Ende einer Seite, um die .Rechtfertigungs-in-Center, Und .Justify-Content-End Klassen jeweils. Zuletzt können Sie den Paginierungsgegenständen auch aktive und ungeballte Zustände zuweisen.