Paginierung in Bootstrap 5

Eine Pagination wird zu einer Notwendigkeit, wenn auf Ihrer Website mehrere Webseiten vorhanden sind, da es einem Benutzer hilft. Wenn Sie Ihre Website mit Bootstrap 5 entwerfen und lernen möchten, wie Sie eine Pagination mit Bootstrap 5 erstellen und stylen, lesen Sie den Artikel bis zum Ende.

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

• «


• 1


• 2


• 3


• 4


• »

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

• Zurück


• 1


• 2


• 3


• 4


• Nächste

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.