Bootstrap - Pagination

 

Ce chapitre traite de la fonctionnalité de pagination prise en charge par Bootstrap. Pagination, une liste non ordonnée est gérée par Bootstrap comme beaucoup d'autres éléments d'interface.

Pagination

Le tableau suivant répertorie les classes que Bootstrap fournit pour gérer la pagination.

.pagination     Ajoutez cette classe pour obtenir la pagination sur votre page.         

<ul class = "pagination">

   <li><a href = "#">&laquo;</a></li>

   <li><a href = "#">1</a></li>

   .......

</ul>

.disabled, .active :  Vous pouvez personnaliser les liens en utilisant .disabled pour les liens non cliquables et .active pour indiquer la page en cours.

<ul class = "pagination">

   <li class = "disabled"><a href = "#">&laquo;</a></li>

   <li class = "active"><a href = "#">1

   <span class = "sr-only">(current)</span></a>

    </li>

   .......

</ul>

.pagination-lg, .pagination-sm : Utilisez ces classes pour obtenir des éléments de taille différente.

<ul class = "pagination pagination-lg">...</ul>

<ul class = "pagination">...</ul>

<ul class = "pagination pagination-sm">...</ul>

Pagination par défaut

L'exemple suivant illustre l'utilisation de la classe .pagination discutée dans le tableau ci-dessus –

<ul class = "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

Classe Pager

Si vous avez besoin de créer des liens de pagination simples qui vont au-delà du texte, le pager peut très bien fonctionner. Comme les liens de pagination, le pager est une liste non ordonnée. Par défaut, les liens sont centrés. Le tableau suivant répertorie les classes que Bootstrap fournit pour le pager.

.pager : Ajoutez cette classe pour obtenir les liens pager.

<ul class = "pager">

   <li><a href = "#">Previous</a></li>

   <li><a href = "#">Next</a></li>

</ul>

.previous, .next : Utilisez la classe .previous pour aligner à gauche et .next pour aligner à droite les liens.

<ul class = "pager">

   <li class = "previous"><a href = "#">&larr; Older</a></li>

   <li class = "next"><a href = "#">Newer &rarr;</a></li>

</ul>

.disabled  :  Ajoutez cette classe pour obtenir un look silencieux.

<ul class = "pager">

   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>

   <li class = "next"><a href = "#">Newer &rarr;</a></li>

</ul>

Pager par défaut

L'exemple suivant illustre l'utilisation de la classe .pager discutée dans le tableau ci-dessus –

<ul class = "pager">

   <li><a href = "#">Previous</a></li>

   <li><a href = "#">Next</a></li>

</ul>

<<<Précédent                             Début                         Suivant>>>