Sommaire

Les pages précédente et suivante COMPOSANTS DE NAVIGATION ET DE PAGINATION:Pages précédente et suivante

1. L’objectif

Vous trouverez sur de très nombreux sites, dans de très nombreux blogs, des systèmes de pagination qui permettent d’accéder rapidement à la page précédente et suivante, ou à l’article précédent et suivant.

Retrouvez cet exemple dans le fichier Bootstrap-06-COMP-Nav-Pag/07-Pager.html.

2. Les pages précédente et suivante standard COMPOSANTS DE NAVIGATION ET DE PAGINATION:Pages précédente et suivante standard

Bootstrap met en place ce système avec une liste <ul> ayant la classe .pager. Voici le code HTML utilisé :

<ul class="pager"> 
   <li><a href="#">Précédent</a></li> 
   <li><a href="#">Suivant</a></li> 
</ul>

Voici l’affichage standard :

images/C12-025.png

Voici les sélecteurs CSS utilisés pour cette mise en forme :

.pager { 
   padding-left: 0; 
   margin: 20px 0; 
   text-align: center; 
   list-style: none; 
} 
.pager::before, .pager::after { 
   display: table; 
   content: " "; 
} 
.pager::after { 
   clear: both; 
} 
.pager li { 
   display: inline; 
} 
.pager li > a, .pager li > span { 
display: inline-block; 
   padding: ...