Derniers tutoriels de développement web
 

W3.CSS Pagination


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="#">&laquo;</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="#">&raquo;</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="#">&laquo;</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="#">&raquo;</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">&laquo;</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">&raquo;</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:

Exemple

<ul class="w3-pagination w3-xlarge">
Try It Yourself »

Bordée Pagination

Ajouter la classe w3-frontière pour créer une pagination avec des frontières:

Exemple

<ul class="w3-pagination w3-border">
Try It Yourself »

arrondi Borders

Ajoutez la classe w3-ronde à côté de w3-frontière pour les bordures arrondies:

Exemple

<ul class="w3-pagination w3-border w3-round">
Try It Yourself »

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="#">&#10094; Previous</a></li>
  <li><a href="#">Next &#10095;</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 »