Bootstrap Pagination
Introduction
Dans ce tutoriel, nous verrons comment utiliser Bootstrap pour créer une pagination.
Pagination multipage
Si vous souhaitez créer une pagination pour les résultats de recherche de votre application en ligne, site web ou application, vous pouvez utiliser ce type de pagination.
La classe CSS "pagination" dans bootstrap.css, située aux numéros de ligne 2756 à 1814, contient les styles permettant de créer ce type de pagination.
Deux autres classes CSS, "disabled" et "active", peuvent être utilisées pour personnaliser si les liens de la pagination sont cliquables ou non. Les numéros de ligne 2793 à 2797 contiennent les styles de la classe "disabled" et de quelques autres classes utilisées pour la pagination. Les numéros de ligne 2786 à 2792 contiennent les styles de la classe "active" utilisée pour la pagination.
Pour définir l’alignement des liens de pagination, utilisez les classes CSS "pagination-centered" et "pagination-right". Ces deux classes se trouvent aux lignes 2809 à 2814 dans bootstrap.css (version 2.0.1).
Exemple de pagination multipage
Exemple
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple de pagination multipage Bootstrap</title>
<meta name="description" content="Exemple de pagination multipage Twitter Bootstrap">
<link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css.html" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<div class="pagination">
<ul>
<li><a href="../index.html">Précédent</a></li>
<li class="active">
<a href="../index.html">1</a>
</li>
<li><a href="../index.html">2</a></li>
<li><a href="../index.html">3</a></li>
<li><a href="../index.html">4</a></li>
<li><a href="../index.html">Suivant</a></li>
</ul>
</div>
</body>
</html>
Voir l'exemple en ligne
Veuillez noter que le style supplémentaire consistant à ajouter une marge à l’élément body ne sert qu’à des fins de démonstration de l’exemple.
Paginateur
Parfois, vous pouvez avoir besoin du premier type de pagination mentionné dans la première partie de ce tutoriel. Cependant, à d'autres moments, vous pouvez avoir uniquement besoin de liens simples comme suivant/précédent ou ancien/nouveau pour permettre la navigation des utilisateurs. Cela peut être réalisé avec le pager.
La classe CSS "pager" se trouve aux numéros de ligne 2815 à 2850 dans bootstrap.css (version 2.0.1). Ici, vous pouvez appliquer la classe CSS "disabled" pour rendre les liens non cliquables.
Exemple de pager avec suivant et précédent
Exemple
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple de pager Bootstrap avec suivant et précédent</title>
<meta name="description" content="Exemple de pagination Twitter Bootstrap avec suivant et précédent">
<link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css.html" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<ul class="pager">
<li>
<a href="../index.html">Précédent</a>
</li>
<li>
<a href="../index.html">Suivant</a>
</li>
</ul>
</body>
</html>
Voir l'exemple en ligne
Exemple de pager avec ancien et nouveau
Exemple
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple de pager Bootstrap avec ancien et nouveau</title>
<meta name="description" content="Exemple de pager Twitter Bootstrap avec plus ancien et plus récent">
<link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css.html" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
<ul class="pager">
<li class="previous">
<a href="../index.html">← Plus ancien</a>
</li>
<li class="next">
<a href="../index.html">Plus récent →</a>
</li>
</ul>
</body>
</html>
Voir l'exemple en ligne
Cliquez ici pour télécharger tous les fichiers HTML, CSS, JS et images utilisés dans ce tutoriel.
Autres extensions