.pagination
à un élément <ul>..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>
Next
” ou “Previous
” vous pouvez les remplacer par des icônes mais vous devriez donner des suggestions pour Screen Reader en utilisant “.sr-only
“.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">«</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">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>