W3.CSS- Paginierung
Grundlegende Paginierung
Wenn Sie eine Website mit vielen Seiten haben, möchten Sie vielleicht eine Art Paginierung verwenden.
Um eine grundlegende Paginierung zu erstellen, verwenden Sie Schaltflächen ( w3-button ) in einer Leiste ( w3-bar ).
Beispiel
<div class="w3-bar">
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#"
class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
</div>
Um den Abstand zwischen den Schaltflächen zu entfernen, fügen Sie eine w3-bar-item- Klasse hinzu:
Beispiel
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
Paginierungspfeile
Verwenden Sie HTML-Elemente oder Symbole aus einer Symbolbibliothek, um Paginierungspfeile hinzuzufügen:
Beispiel
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
Aktiver/Aktueller Link
Verwenden Sie eine der w3 -Farbklassen , um anzuzeigen, auf welcher Seite sich der Benutzer befindet:
Beispiel
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button w3-green">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
Hover-Farbe
Wenn Sie die Maus über die Paginierungslinks bewegen, erhalten sie standardmäßig eine graue Hintergrundfarbe. Verwenden Sie eine der w3-hover- color - Klassen, um die Hover-Farbe zu ändern:
Beispiel
<div class="w3-bar">
<a href="#"
class="w3-button w3-hover-purple">«</a>
<a
href="#" class="w3-button w3-hover-green">1</a>
<a href="#"
class="w3-button w3-hover-red">2</a>
<a href="#" class="w3-button
w3-hover-blue">3</a>
<a href="#"
class="w3-button w3-hover-black">4</a>
<a href="#"
class="w3-button w3-hover-orange">»</a>
</div>
Paginierungsgröße
Verwenden Sie w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge oder w3-xxxlarge , um die Größe der Seitennummerierung festzulegen:
Beispiel
<div class="w3-bar
w3-xlarge">
Zentrierte Paginierung
Um die Paginierung zu zentrieren, fügen Sie das „w3-bar“-Element in ein „w3-center“-Element ein:
Beispiel
<div class="w3-center">
<div class="w3-bar">
<a href="#"
class="w3-bar-item w3-button">«</a>
<a href="#"
class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#"
class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
</div>
Umrandete Paginierung
Fügen Sie die w3-border- Klasse hinzu, um eine Paginierung mit Rahmen zu erstellen:
Beispiel
<div class="w3-bar
w3-border">
Abgerundete Ränder
Fügen Sie die w3-round- Klasse neben w3-border für abgerundete Ränder hinzu:
Beispiel
<div class="w3-bar
w3-border w3-round">
Andere Paginierungsbeispiele
Die w3-bar-Klasse kann auch verwendet werden, um Next/Previous-Buttons zu erstellen:
Nächstes/vorheriges Beispiel
<div class="w3-bar w3-border w3-round">
<a href="#"
class="w3-button">❮ Previous</a>
<a href="#" class="w3-button
w3-right">Next ❯</a>
</div>
Beispiel für ein Inline-Menü
<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
</div>