Pagination W3.CSS
Pagination de base
Si vous avez un site Web avec de nombreuses pages, vous voudrez peut-être utiliser une sorte de pagination.
Pour créer une pagination de base, utilisez les boutons ( w3-button ) dans une barre ( w3-bar ).
Exemple
<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>
Pour supprimer l'espace entre les boutons, ajoutez une classe w3-bar-item :
Exemple
<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>
Flèches de pagination
Utilisez des entités HTML ou des icônes d'une bibliothèque d'icônes pour ajouter des flèches de pagination :
Exemple
<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>
Lien actif/actuel
Utilisez l'une des classes de couleurs w3- pour indiquer sur quelle page se trouve l'utilisateur :
Exemple
<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>
Couleur de survol
Par défaut, lorsque vous déplacez la souris sur les liens de pagination, ils obtiennent une couleur de fond grise. Utilisez l'une des classes w3-hover- color pour changer la couleur de survol :
Exemple
<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>
Dimensionnement de la pagination
Utilisez w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge ou w3-xxxlarge pour dimensionner la pagination :
Exemple
<div class="w3-bar
w3-xlarge">
Pagination centrée
Pour centrer la pagination, placez l'élément "w3-bar" dans un élément "w3-center":
Exemple
<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>
Pagination bordée
Ajoutez la classe w3-border pour créer une pagination avec des bordures :
Exemple
<div class="w3-bar
w3-border">
Bordures arrondies
Ajoutez la classe w3-round à côté de w3-border pour les bordures arrondies :
Exemple
<div class="w3-bar
w3-border w3-round">
Autres exemples de pagination
La classe w3-bar peut également être utilisée pour créer des boutons suivant/précédent :
Exemple suivant/précédent
<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>
Exemple de menu en ligne
<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>