Le Tutoriel de Bootstrap Pagination

Pagination
.disable & .active
Taille (Sizing)
Justify (Modifier)

1. Pagination

Si vous avez une page qui a trop des donnés (ou des choses similaires), ne peut pas afficher sur une seule page, vous ne devez pas la diviser en plusieurs parties: chaque partie est une page, elle n'affiche que quelques données et vous devez rassembler des liens (Link) pour que l'utilisateur saute à la page suivante (Ou la page précédante). La collection les liens là est nommée un composant de Pagination (Pagination Component).

Lorsque vous faites des recherches sur Google vous pouvez voir un composant Pagination :

Dans cette leçon, nous apprenons comment créer un composant Pagination avec Bootstrap.

pagination-example

<h4 class="mb-5">Pagination example:</h4>

<nav aria-label="Search results pages">
   <ul class="pagination">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a>
      </li>
   </ul>
</nav>

Ceci est la structure de Bootstrap Pagination :

En fait, vous pouvez créer un composant Bootstrap Pagination sans avoir besoin de l'élément <nav>, mais il faut mieux si vous en avez. L'élément <nav> est similaire à une suggestion que ceci est une zone de navigation et est utile aux appareils tels que Screen Reader. Vous pouvez remplacer l'élément <nav> par <div role="nav"> afin d'obtenir la même signification.

<nav aria-label="Search results pages">
   ...
</nav>


<div role="nav" aria-label="Search results pages">
  ...
</div>

Icon

Pour les éléments "Next" ou "Previous" vous pouvez les remplacer par des icônes mais vous devriez donner des suggestions pour Screen Reader en utilisant ".sr-only". Cette élément est complètêmnt caché avec tous des appareils sauf Screen Reader.

pagination-icon-example

<h4 class="mb-5">Pagination example:</h4>

<nav aria-label="Page navigation example">
   <ul class="pagination">
      <li class="page-item">
         <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
         </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="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
         <span class="sr-only">Next</span>
         </a>
      </li>
   </ul>
</nav>

2. .disable & .active

L'utilisation de la classe .active pour Pagination-item est de souligner cet item et accentuer que ceci est la page que l'utilisateur est en train de voir (la page actuelle. Et utilisez la classe .disabled pour des liens (Link) si vous voulez les désactiver, des utilisateurs ne peuvent pas cliquer sur ce lien.

pagination-status-example

<h4 class="mb-5">Pagination (.active & .disabled):</h4>

<nav aria-label="Something..">
   <ul class="pagination">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</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 <span class="sr-only">(current)</span></a>
      </li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
         <a class="page-link" href="#">Next</a>
      </li>
   </ul>
</nav>

3. Taille (Sizing)

Si vous voulez que le composant Pagination est un peu plus grand, veuillez utiliser la classe .pagination-lg :

.pagination .pagination-lg

<h5 class="mb-2">Pagination (.pagination .pagination-lg):</h5>

<nav aria-label="Something">
   <ul class="pagination pagination-lg">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">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>
   </ul>
</nav>

Ou vous voulez avoir un composant Pagination plus petit, veuillez utiliser la classe .pagination-sm :

.pagination .pagination-sm

<h5 class="mb-2">Pagination (.pagination .pagination-sm):</h5>

<nav aria-label="Something">
   <ul class="pagination pagination-sm">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">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>
   </ul>
</nav>

4. Justify (Modifier)

Bootstrap Pagination est essentiellement un Flex Container, parcequ'il a été concu Css property {display: flex}. Donc, certaines classes utilitaires du Bootstrap Flex peuvent appliquer à la Pagination :

justify-content-start
justify-content-center
justify-content-end
justify-content-between
justify-content-around

.pagination .justify-content-center

<h6 class="mb-3">.pagination .justify-content-center</h6>

<nav aria-label="Something">
   <ul class="pagination justify-content-center bg-light">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a>
      </li>
   </ul>
</nav>

.pagination .justify-content-end

<h6 class="mb-3">.pagination .justify-content-end</h6>

<nav aria-label="Something">
   <ul class="pagination justify-content-end bg-light">
      <li class="page-item disabled">
         <a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a>
      </li>
   </ul>
</nav>

Le Tutoriel de Bootstrap Flex Utility