oujood.com

La pagination de Bootstrap :les pages 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
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.

chercher |

Création de Pagination avec Bootstrap(pages bootstrap)

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

Pour plus de détail sur la pagination regarder notre tutoriel Afficher page par page

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 de liste HTML ce qui va créer des pages bootstrap comme suit:

Exemple :       Copier 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 :

Exemple :       Copier 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 :

Exemple :       Copier 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 :

Exemple :       Copier 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.

Exemple :       Copier 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:

  Copier 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



Voir aussi nos tutoriel :

cours sur js

Introduction au Javascript : Le Javascript est le language scripteur du Web. Quelques millions de pages Web utilisent le js pour ajouter des fonctionnalités, valider des données, détecte des navigateurs, et beaucoup plus

Balise big

Non pris en charge HTML5. Définit grand texte

PHP simpleXML

PHP5 simpleXML