W3.CSS paginations
Si vous avez un site web avec beaucoup de pages, vous pouvez ajouter une sorte de pagination à chaque page:
Basic Pagination
Pour créer une pagination de base, ajouter la classe w3 pagination à un élément <ul>:
Exemple
<ul class="w3-pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> Try It Yourself » Arrows Pagination
Utilisez les entités HTML ou des icônes à partir d'une bibliothèque d'icône pour ajouter des flèches de pagination:
Exemple
<ul class="w3-pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul> Try It Yourself » Actif / Lien actuel
Utilisez l' une des classes de couleurs w3- pour indiquer quelle page l'utilisateur est sur:
Exemple
<ul class="w3-pagination">
<li><a href="#">«</a></li>
<li><a
class="w3-green" href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul> Try It Yourself » Hover Couleur
Par défaut, lorsque vous déplacez la souris sur les liens de pagination, ils obtiennent une couleur de fond gris. Utilisez l' une des classes de couleurs w3 vol stationnaire pour changer la couleur de vol stationnaire:
Exemple
<ul class="w3-pagination">
<li><a href="#"
class="w3-hover-purple">«</a></li>
<li><a href="#"
class="w3-hover-green">1</a></li>
<li><a href="#"
class="w3-hover-red">2</a></li>
<li><a href="#"
class="w3-hover-blue">3</a></li>
<li><a href="#"
class="w3-hover-black">4</a></li>
<li><a href="#"
class="w3-hover-orange">»</a></li>
</ul> Try It Yourself » Pagination Sizing
Utilisez w3-tiny, w3-xlarge w3-petit, w3-large, w3-XXLarge ou w3-XXXLarge à la taille de la pagination:
Bordée Pagination
Ajouter la classe w3-frontière pour créer une pagination avec des frontières:
arrondi Borders
Ajoutez la classe w3-ronde à côté de w3-frontière pour les bordures arrondies:
Pagination Centré
Pour centrer la pagination, envelopper un élément <div> class = "w3-center" autour <ul>:
Exemple
<div class="w3-center">
<ul class="w3-pagination
w3-xlarge">
...
</ul>
</div> Try It Yourself » Autres exemples de Pagination
Exemple suivant / précédent
<ul class="w3-pagination w3-border w3-round">
<li><a href="#">❮
Previous</a></li>
<li><a href="#">Next
❯</a></li>
</ul> Try It Yourself » Exemple de menu
<ul class="w3-pagination w3-border">
<li><a href="#"
class="w3-light-grey">Home</a></li>
<li><a href="#">Link
1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link
3</a></li>
</ul> Try It Yourself »