Sommaire

La pagination COMPOSANTS DE NAVIGATION ET DE PAGINATION:Pagination

1. L’objectif

Dans notre site de type blog, lorsqu’il y a de nombreux articles sur la page d’accueil, il est très courant de trouver un système de pagination. Cette pagination permet aux visiteurs d’aller rapidement à la page suivante et aux autres pages, de façon à visualiser les autres articles placés en page d’accueil.

Vous retrouverez cet exemple dans le fichier Bootstrap-06-COMP-Nav-Pag/06-Pagination.html.

2. La pagination par défaut COMPOSANTS DE NAVIGATION ET DE PAGINATION:Pagination par défaut

Bootstrap nous propose un système de pagination simple à mettre en place. Voici le code HTML à utiliser :

<ul class="pagination"> 
   <li><a href="#">&laquo;</a></li> 
   <li><a href="#">1</a></li> 
   <li><a href="#">2</a></li> 
   <li><a href="#">3</a></li> 
   <li><a href="#">4</a></li> 
   <li><a href="#">5</a></li> 
   <li><a href="#">&raquo;</a></li> 
</ul>

Voici l’affichage obtenu :

images/C12-022.png

Nous avons une liste <ul> avec la classe .pagination. Tous les boutons qui permettent d’accéder à une autre page, sont dans les éléments <li> ...