La pagination de Bootstrap

La pagination est l'organisation du contenu en le divisant en plusieurs pages. Dans ce tutoriel, vous apprendrez comment créer une pagination avec bootstrap.

Tutoriel Bootstrap 3

Création de Pagination avec Bootstrap

La pagination est assez souvent utilisée dans certaines ou autre forme dans presque toutes les applications web.

Par exemple, il est utilisé par les moteurs de recherche pour afficher un nombre limité de résultats sur les pages de résultats de recherche, ou dans un blog ou un forum pour montrer un nombre limité de postes ou de commentaires pour chaque page.

Pour créer une pagination avec Bootstrap on utilise la classe "pagination" dans un élément HTML de liste comme suit:

Sélectionner le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple de Bootstrap3 La pagination</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
 <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="#">&raquo;</a></li>
 </ul>
</body>
</html>

 

Ou si on veut tout simplement sans les  &laquo ; et &raquo; comme suit :

Sélectionner le code

 <ul class="pagination">
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 </ul>

 

Pagination pour les personnes handicapées et les États de l'actif

Les liens à l'intérieur de la pagination de Bootstrap peuvent être davantage personnalisées pour différentes circonstances, comme lorsque l'utilisateur approche à une fin ou début de page en  indiquant le numéro de page actuel à l'utilisateur.

Utilisez la classe .disabled pour réaliser les liens non cliquables et la classe .active pour indiquer la page en cours comme le montre le code suivant :

Sélectionner le code


<ul class="pagination">
 <li class="disabled"><a href="#">&laquo;</a></li>
 <li class="active"><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>

 

Remarque : La classe .disabled ne suprime pas la fonction cliquer elle montre seulement qu’il ne faut pas cliquer.

Changer la taille de Pagination

Vous pouvez également modifier la taille de pagination pour augmenter ou diminuer la zone cliquable.

Ajouter les classes  .pagination-lg, ou .pagination-sm à la classe de base .pagination pour la création de pagination de taille plus ou moins grande.

Voici le code :

Sélectionner le code

<div>< !—pagination large-->
 <ul class="pagination pagination-lg">
 <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>
 </div>
 <div>< !—pagination par defaut moyen-->
 <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>
 </div>
 <div>< !—pagination petite taille-->
 <ul class="pagination pagination-sm">
 <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>
 </div>

 

Pager de  Bootstrap

Parfois, vous pouvez simplement exiger les liens précédent et suivant sur votre site Web pour fournir une navigation simple et rapide à l'utilisateur plutôt que la pagination complexe tel que nous venons de voir  ci-dessus.

Cela peut être fait à l'aide de la classe de  Bootstrap .pager comme suit.

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

 

Alignement du Pager

Par défaut les élément du pager sont alignés horizontalement au centre mais vous pouvez aligner le lien précédent à gauche et le lin suivant à droite en utilisant respectivement la classe .previous .next .

Voici le code :

<ul class="pager">

 <li class="previous"><a href="#">&larr; Précédent</a></li>

 <li class="next"><a href="#">Suivant &rarr;</a></li>

</ul>

Pagination avec la classe breadcrumb

Une autre forme pour la pagination avec  la classe breadcrumb :

La classe .breadcrumb indique la localisation de la page en cours au sein d'une hiérarchie de navigation en voici le code:

Sélectionner le code

<ul class="breadcrumb">
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Videos</a></li>
	<li><a href="#">Images</a></li>
	<li class="active">Contact</li> 
</ul>

 

chapitre précédent chapitre suivant

Par carabde 25 decembre 2015