CSS Exemples de Pagination
Pagination CSS
Apprenez à créer une pagination réactive en utilisant CSS.
Si vous avez un site web avec de nombreuses pages, vous souhaiterez peut-être ajouter une forme de pagination sur chaque page.
La pagination est généralement une série de liens, enveloppés dans une liste non ordonnée ( <ul> ). Chaque lien représente un numéro de page individuel. De plus, il y a des contrôles "précédent" et "suivant" :
Exemple
Une pagination simple :
.pagination {
display: flex;
justify-content: center;
list-style: none; /* supprimer les puces de liste */
padding: 0px;
}
.pagination li a {
display: block; /* laisser les liens remplir l'élément de liste */
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color: black;
margin: 0 4px;
border-radius: 5px; /* ajouter des bordures arrondies */
} Exemple Expliqué
Stylisez le conteneur de pagination avec :
-
display: flex;pour disposer les numéros de page horizontalement -
justify-content: center;pour les centrer -
list-style: none;pour supprimer les puces de liste
Appliquez le style aux éléments <a> à l'intérieur des éléments <li> pour l'apparence des numéros de page, avec des propriétés comme display , padding , text-decoration , border , background-color , color , font-size , et border-radius .
Pagination Avec une Classe Active
Mettez en surbrillance la page actuellement active avec une classe .active pour indiquer sur quelle page se trouve l'utilisateur :
Exemple
Pagination avec une classe .active :
.pagination li a.active {
background-color: #4CAF50;
color: white;
} Pagination Avec une Classe Désactivée
Si l'utilisateur est actuellement sur la dernière page, le bouton "Suivant" doit être désactivé.
Ici, nous ajoutons une classe .disabled et définissons les propriétés color , cursor et pointer-events pour rendre le bouton "Suivant" désactivé :
Exemple
Pagination avec une classe .disabled :
.pagination li a.disabled {
color: #dddddd;
cursor: not-allowed;
pointer-events: none;
} Pagination avec Effet de Survol
Utilisez le sélecteur :hover pour changer la couleur de fond de chaque lien de page lorsque l'utilisateur passe la souris dessus :
Exemple
Pagination avec effet de survol :
.pagination li a:hover:not(.active) {
background-color: lightgray;
} Effet de Transition au Survol
Ajoutez la propriété transition aux liens de page pour créer un effet de transition au survol :
Exemple
Ajoutez un effet de transition au survol :
.pagination li a {
display: block;
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color: black;
margin: 0 4px;
border-radius: 5px;
transition: background-color 1s;
} Pagination de Fil d'Ariane
Une autre variation de la pagination est ce qu'on appelle un "fil d'Ariane" :
Exemple
Créez un fil d'Ariane :
ul.breadcrumb {
padding: 8px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li a {color: green;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}