Met un nombre au format mon taire
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.
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="#">«</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="#">»</a></li> </ul> </body> </html>
Ou si on veut tout simplement sans les « ; et » 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>
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="#">«</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="#">»</a></li> </ul>
Remarque : La classe .disabled ne suprime pas la fonction cliquer elle montre seulement qu’il ne faut pas cliquer.
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="#">«</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="#">»</a></li> </ul> </div> <div>< !—pagination par defaut moyen--> <ul class="pagination"> <li><a href="#">«</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="#">»</a></li> </ul> </div> <div>< !—pagination petite taille--> <ul class="pagination pagination-sm"> <li><a href="#">«</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="#">»</a></li> </ul> </div>
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>
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="#">← Précédent</a></li>
<li class="next"><a href="#">Suivant →</a></li>
</ul>
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:
<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