Pagination Bootstrap

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>
    • Ce qui nous donne:



Abonnez vous à notre chaîne YouTube gratuitement