Auteur Auteur

Pagination Bootstrap

  1. Objectifs

    • Connaitre la pagination Bootstrap Bootstrap
    • Etre capable de créer de la pagination avec Bootstrap

  2. Présentation

    • Ce tutoriel traite la fonctionnalité de pagination prise en charge par Bootstrap.
    • La pagination est une liste non ordonnée HTML qui est gérée par Bootstrap comme beaucoup d’autres éléments d’interface
    • La pagination bootstrap est un composant utilisé pour indiquer l’existence d’une série de contenus liés sur plusieurs pages et permet la navigation entre elles.

  3. Création

    • Pour créer une pagination de base, ajouter la classe .pagination à un élément <ul>.
    • Ajouter ensuite le .page-item à chaque élément <li> et une classe .page-link à chaque lien à l’intérieur.
      • <nav aria-label="Example Pagination ">
   <ul class="pagination">
      <li class="page-item"><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="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">Suivant</a></li>
    </ul>
</nav>
    • Ce qui nous donne:

  4. Dimension

    • Les blocs de pagination par défaut peuvent également être dimensionnés à une taille plus grande ou plus petite comme le montre ce schémas

  5. Alignement

    • Les blocs de pagination par défaut peuvent également être alignés ou justifié à droite ou au centre comme le montre ce schémas suivant

  6. Travailler avec des icônes

    • 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“.
    • Pour utiliser une icône ou un symbole à la place du texte pour certains liens de pagination? Assurez-vous de fournir un support de lecteur d’écran approprié avec les attributs aria-hidden et .sr-only.
      • <nav aria-label="Example Pagination " >
          <ul class="pagination pg-blue">
            <li class="page-item">
              <a class="page-link" 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">1</a></li>
            <li class="page-item"><a class="page-link">2</a></li>
            <li class="page-item"><a class="page-link">3</a></li>
            <li class="page-item"><a class="page-link">4</a></li>
            <li class="page-item">
              <a class="page-link" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
              </a>
            </li>
          </ul>
</nav>
Précédent
Suivant