Bootstrap Pagination
Ce chapitre expliquera les fonctionnalités de pagination prises en charge par Bootstrap. La pagination est une liste non ordonnée, et Bootstrap gère la pagination de la même manière que les autres éléments d'interface.
Pagination
Le tableau suivant répertorie les classes fournies par Bootstrap pour gérer la pagination.
| Classe | Description | Exemple de code |
|---|---|---|
| .pagination | Ajoutez cette classe pour afficher la pagination sur la page. |
<ul class="pagination"> <li><a href="../index.html">«</a></li> <li><a href="../index.html">1</a></li> ....... </ul> |
| .disabled, .active | Vous pouvez personnaliser les liens en utilisant.disabledpour définir des liens non cliquables, et en utilisant.activepour indiquer la page actuelle. |
<ul class="pagination"> <li class="disabled"><a href="../index.html">«</a></li> <li class="active"><a href="../index.html">1<span class="sr-only">(current)</span></a></li> ....... </ul> |
| .pagination-lg, .pagination-sm | Utilisez ces classes pour obtenir des éléments de tailles différentes. |
<ul class="pagination pagination-lg">...</ul> <ul class="pagination">...</ul> <ul class="pagination pagination-sm">...</ul> |
Pagination par défaut
L'exemple suivant montre les classes présentées dans le tableau ci-dessus.paginationutilisation :
Exemple
Essayez-le »
Le résultat est affiché ci-dessous :
États de pagination
L'exemple suivant montre les classes présentées dans le tableau ci-dessus.disabled、.activeutilisation :
Exemple
Essayez-le »
Le résultat est affiché ci-dessous :
Dimensionnement de la pagination
L'exemple suivant montre les classes présentées dans le tableau ci-dessus.pagination-*utilisation :
Exemple
Essayez-le »
Le résultat est affiché ci-dessous :
Paginateur
Si vous souhaitez créer un lien de pagination simple pour fournir une navigation aux utilisateurs, vous pouvez utiliser un pager. Comme les liens de pagination, un pager est également une liste non ordonnée. Par défaut, les liens sont centrés. Le tableau suivant répertorie les classes que Bootstrap fournit pour gérer le pager.
| Classe | Description | Exemple de code |
|---|---|---|
| .pager | Ajoutez cette classe pour obtenir des liens de pager. |
<ul class="pager"> <li><a href="../index.html">Previous</a></li> <li><a href="../index.html">Next</a></li> </ul> |
| .previous, .next | Utilisez la classe.previouspour aligner les liens à gauche, utilisez.nextpour aligner les liens à droite. |
<ul class="pager"> <li class="previous"><a href="../index.html">← Older</a></li> <li class="next"><a href="../index.html">Newer →</a></li> </ul> |
| .disabled | Ajoutez cette classe pour désactiver le bouton correspondant. |
<ul class="pager"> <li class="previous disabled"><a href="../index.html">← Older</a></li> <li class="next"><a href="../index.html">Newer →</a></li> </ul> |
Pager par défaut
L'exemple suivant illustre les classes abordées dans le tableau ci-dessus.pagerutilisation:
Exemple
Essayez-le »
Le résultat est affiché ci-dessous :
Liens alignés
L'exemple suivant démontre les classes abordées dans le tableau ci-dessus.previous、.nextutilisation :
Exemple
Essayez-le »
Le résultat est affiché ci-dessous :
États du Pager
L'exemple suivant démontre les classes abordées dans le tableau ci-dessus.disabledutilisation :
Exemple
Essayez-le »
Le résultat est affiché ci-dessous :
Plus d'exemples de pagination
| Classe | Description | Exemple |
|---|---|---|
| .pager | Un lien de pagination simple, les liens sont centrés. | Essayez-le |
| .previous | Le style de bouton « Précédent » dans .pager, aligné à gauche | Essayez-le |
| .next | Le style du bouton « Suivant » dans .pager, aligné à droite | Essayez-le |
| .disabled | Désactiver les liens | Essayez-le |
| .pagination | Liens de pagination | Essayez-le |
| .pagination-lg | Liens de pagination plus grands | Essayez-le |
| .pagination-sm | Liens de pagination plus petits | Essayez-le |
| .disabled | Désactiver les liens | Essayez-le |
| .active | Style du lien de la page active | Essayez-le |