Le Tutoriel de Bootstrap Pagination

View more Tutorials:

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>

View more Tutorials: