Pagination Bootstrap 4

En développement web, s'il y a trop de contenu, la pagination est généralement appliquée.

Bootstrap 4 rend très simple la mise en œuvre de la pagination.

Pour créer une pagination de base, sur l'<ul>élément, ajoutez la.paginationclasse. Ensuite, sur l'<li>élément, ajoutez la.page-itemclasse, et sur la balise<li><a> de l'élément, ajoutez la.page-linkclasse :

Exemple

<ul class="pagination"> <li classe="page-item"><a classe="page-link" href="#">Précédent</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Suivant</a></li> </ul>

Essayez-le vous-même »

État de la page actuelle

La page actuelle peut utiliser la classe.activepour la mettre en surbrillance :

Exemple

<ul class="pagination"> <li classe="page-item"><a classe="page-link" href="#">Précédent</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Suivant</a></li> </ul>

Essayez-le vous-même »

Liens de pagination désactivés

.disabledLa classe peut rendre les liens de pagination non cliquables :

Exemple

<ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">Précédent</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Suivant</a></li> </ul>

Essayez-le vous-même »

Dimensionnement de la pagination

Les éléments de pagination peuvent être configurés avec différentes tailles.

.pagination-lgLa classe définit les éléments de pagination à une taille plus grande,.pagination-smla classe définit les éléments de pagination à une taille plus petite :

Exemple

<ul class="pagination pagination-lg"> <li classe="page-item"><a classe="page-link" href="#">Précédent</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Suivant</a></li> </ul> <ul class="pagination pagination-sm"> <li classe="page-item"><a classe="page-link" href="#">Précédent</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Suivant</a></li> </ul>

Essayez-le vous-même »

Navigation par fil d'Ariane

.breadcrumbet.breadcrumb-itemLa classe est utilisée pour définir la navigation par fil d'Ariane :

Exemple

<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Photos</a></li> <li class="breadcrumb-item"><a href="#">Été 2017</a></li> <li class="breadcrumb-item"><a href="#">Italie</a></li> <li class="breadcrumb-item active">Rome</li> </ul>

Essayez-le vous-même »

Alignement de la pagination

Les classes utilitaires peuvent être utilisées pour définir l'alignement de la pagination :

Exemple

<!--Par défaut (aligné à gauche)--> <ul class="pagination" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!--Centré--> <ul class="pagination justify-content-center" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!--Aligné à droite--> <ul class="pagination justify-content-end" style="margin:20px 0"> <li class="page-item">...</li> </ul>

Essayez-le vous-même »
Autres extensions