Bootstrap - Paginierung: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, angehende Web-Entwickler! Heute tauchen wir in die Welt der Bootstrap-Paginierung ein. Als dein freundlicher Nachbarschafts-Computerlehrer freue ich mich, dich auf dieser Reise zu begleiten. Mach dir keine Sorgen, wenn du neu im Programmieren bist – wir beginnen bei den Grundlagen und arbeiten uns hoch. Bis zum Ende dieses Tutorials wirst du ein Paginierungsprofi sein!

Was ist Paginierung?

Bevor wir zu Bootstrap übergehen, lassen wir uns erstmal anschauen, was Paginierung ist. Stell dir vor, du liest ein langes Buch. Anstatt alle Inhalte auf einer Seite zu quetschen, wird es in handhabbare Stücke aufgeteilt – das ist Paginierung in der digitalen Welt. Sie hilft, große Mengen an Inhalten über mehrere Seiten zu organisieren und macht es den Benutzern einfacher zu navigieren.

Bootstrap Paginierung: Die Grundlagen

Bootstrap, unser zuverlässiges Frontend-Toolkit, bietet eine einfache und stilvolle Möglichkeit, Paginierung zu erstellen. Lassen wir mit den Grundlagen beginnen.

Einfache Paginierung

Um eine grundlegende Paginierung in Bootstrap zu erstellen, verwenden wir die Elemente <nav> und <ul> mit spezifischen Klassen. Hier ist ein einfaches Beispiel:

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Vorherige</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</a></li>
</ul>
</nav>

Lassen wir das auseinandernehmen:

• Das <nav>-Element umgibt unsere Paginierung aus semantischen Gründen.
• Das <ul> hat die Klasse pagination, die die Paginierungsstile von Bootstrap anwendet.
• Jedes <li> repräsentiert eine Seite und hat die Klasse page-item.
• Die <a>-Tags in jedem <li> haben die Klasse page-link, die den anklickbaren Teil stylen.

Arbeit mit Symbolen

Möchtest du deine Paginierung noch cooler aussehen lassen? Lassen wir einige Symbole hinzufügen! Bootstrap funktioniert großartig mit Symbolbibliotheken wie Font Awesome. Hier ist, wie du Symbole in deiner Paginierung verwenden kannst:

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</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="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

In diesem Beispiel haben wir « und » verwendet, um linke und rechte Pfeilsymbole zu erstellen. Diese sind HTML-Entities, die als « und » dargestellt werden.

Paginierungsstatus: Deaktiviert und Aktiv

Manchmal möchtest du die aktuelle Seite hervorheben oder bestimmte Navigationsoptionen deaktivieren. Bootstrap macht das einfach mit den Klassen active und disabled.

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Vorherige</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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</a>
</li>
</ul>
</nav>

Hier ist der "Vorherige"-Link deaktiviert (du kannst ihn nicht anklicken), und Seite 2 ist als aktiv markiert (derzeit ausgewählt).

Größenanpassung

Wie Goldlöckchen manchmal brauchst du deine Paginierung in der richtigen Größe. Bootstrap bietet verschiedene Größenoptionen:

<!-- Große Paginierung -->
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>

<!-- Kleine Paginierung -->
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>

Füge pagination-lg hinzu, um eine größere Paginierung zu erstellen, oder pagination-sm, um eine kleinere Paginierung zu erstellen. Es ist wie die Wahl zwischen einem Grande oder Tall in deinem Lieblings-Café!

Ausrichtung

Standardmäßig ist die Paginierung linksbündig ausgerichtet. Aber was, wenn du sie zentrieren oder nach rechts schieben möchtest? Bootstrap hat dich abgedeckt:

<!-- Zentrierte Ausrichtung -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Vorherige</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</a>
</li>
</ul>
</nav>

<!-- Rechte Ausrichtung -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Vorherige</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</a>
</li>
</ul>
</nav>

Verwende justify-content-center, um deine Paginierung zu zentrieren, oder justify-content-end, um sie nach rechts auszurichten.

Ausrichtung mit einer Flex Utility

Für eine noch größere Kontrolle über die Ausrichtung deiner Paginierung kannst du Bootstrap's Flex-Utilities verwenden:

<nav aria-label="Page navigation">
<div class="d-flex justify-content-center">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Vorherige</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</a>
</li>
</ul>
</div>
</nav>

Hier haben wir unsere Paginierung in ein <div> mit den Klassen d-flex und justify-content-center eingeschlossen. Das gibt dir mehr Flexibilität bei der Positionierung deiner Paginierung.

Fazit

Und da hast du es, Leute! Du hast eine großartige Tour durch die Bootstrap-Paginierung gemacht. Von grundlegenden Strukturen bis hin zu schicken Ausrichtungen, du hast jetzt die Werkzeuge, um schöne, funktionale Paginierungen für deine Webprojekte zu erstellen. Denke daran, Übung macht den Meister, also habe keine Angst, diese Beispiele auszuprobieren.

Hier ist eine schnelle Referenztabelle der Klassen, die wir behandelt haben:

Klasse	Zweck
pagination	Erzeugt die grundlegende Paginierungsstruktur
page-item	Stylt jedes Element in der Paginierung
page-link	Stylt den anklickbaren Teil jedes Elements
active	Hebt die aktuelle Seite hervor
disabled	Deaktiviert ein Paginierungselement
pagination-lg	Erzeugt größere Paginierung
pagination-sm	Erzeugt kleinere Paginierung
justify-content-center	Zentriert die Paginierung
justify-content-end	Richtet die Paginierung nach rechts aus
d-flex	Erzeugt einen Flex-Container

Frohes Coden und möge deine Seiten immer perfekt paginiert sein!

Credits: Image by storyset