Découvez les bases du plus célébre des frameworks CSS.
Le composant pagination fournit comme son nom l'indique un système de pagination. Très utile lorsque vous voulez afficher un nombre d'enregistrement limité.
La classe ".active" permet de sélectionner un des éléments.
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="#" aria-label="Précédent"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#" title="1">1</a></li>
<li><a href="#" title="2">2</a></li>
<li><a href="#" title="3">3</a></li>
<li><a href="#" title="4">4</a></li>
<li><a href="#" title="5">5</a></li>
<li><a href="#" aria-label="Suivant"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>Exemple
.disabled sur la balise li pour désactiver un élément<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="#" aria-label="Précédent"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#" title="1">1</a></li>
<li><a href="#" title="2">2</a></li>
<li><a href="#" title="3">3</a></li>
<li class="disabled"><a href="#" title="4">4</a></li>
<li><a href="#" title="5">5</a></li>
<li><a href="#" aria-label="Suivant"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>Exemple avec le lien 4 désactivé
".pagination-lg" et ".pagination-sm" que nous appliquons sur la balise ul.<ul class="pagination pagination-lg"><ul class="pagination pagination-sm">Exemple avec pagination-lg
Exemple avec pagination-sm