Maison >interface Web >tutoriel CSS >Comment aligner la pagination dans Bootstrap 4 ?
Comment aligner la pagination dans Bootstrap 4 ?
- 王林avant
- 2023-09-16 10:05:021342parcourir
Bootstrap 4 est un framework de programmation front-end populaire pour créer des sites Web réactifs et axés sur les mobiles. Il fournit divers éléments CSS et JavaScript tels que des barres de navigation, des formulaires, des boutons, des modaux, etc. qui peuvent être utilisés pour créer rapidement un site Web avec une apparence moderne et esthétique.
L'alignement de la pagination dans Bootstrap 4 fait référence à la façon dont les composants de pagination d'une page Web sont positionnés. Cependant, la pagination est généralement centrée. Les classes justifier-content-* permettent un alignement à gauche ou à droite.
Méthode
Il existe de nombreuses façons possibles d'aligner la pagination dans Bootstrap 4 -
Utilisez les classes .justify-content-*
Utilisez des cours de texte-*
Comprenons maintenant chaque méthode en détail avec des exemples.
Méthode 1 : utilisez les « classes .justify-content-* »
La première façon d'aligner la pagination dans Bootstrap 4 est « d'utiliser les classes .justify-content-* ».
Exemple
Ici, nous allons mettre en œuvre cette méthode avec un exemple étape par étape -
Étape 1 - Assurez-vous que les fichiers JavaScript et CSS Bootstrap 4 sont inclus dans l'en-tête du document HTML.
Étape 2 - Pour créer le composant de pagination, créez l'élément ff6d136ddc5fdfeffaf53ff6ee95f185 Pour chaque page, ajoutez un élément 3499910bf9dac5ae3c52d5ede7383485 avec un lien de type page et un élément 25edfb22a4f469ecb59f1190150159c6 avec un élément de type page à l'intérieur de l'élément ff6d136ddc5fdfeffaf53ff6ee95f185
Étape 3 - Vous devez ajouter l'une des classes suivantes à l'élément ff6d136ddc5fdfeffaf53ff6ee95f185 afin d'aligner le composant de pagination à gauche, au centre ou à droite -
Le composant de pagination utilise le style .justify-content-start pour aligner à gauche.
Le composant de pagination est centré lors de l'utilisation du style justifier-content-center.
align-pagination-end : Déplacez l'élément de pagination vers la droite
Étape 4 - Ceci est un exemple de ce à quoi ressemble le code HTML lorsque la pagination est alignée à gauche -
<ul class="pagination justify-content-start">
<li class="page-item">
<a class="page-link" href="#">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
Étape 5 - Après avoir ajouté les classes requises, le composant de pagination devrait s'aligner comme prévu.
Étape 6 - Le code final ressemble à ceci -
<!DOCTYPE html>
<html>
<head>
<link rel= "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
Méthode 2 : Utiliser des classes texte-*
Pour aligner le composant de pagination respectivement à gauche, au centre ou à droite, utilisez . Texte à gauche, Centre de texte et. Textez la bonne classe.
Exemple
Nous allons maintenant examiner un exemple étape par étape de mise en œuvre de cette méthode -
Étape 1 - Créez un élément div conteneur et attribuez-lui la classe justifier-content-center. En conséquence, la pagination sera centrée dans le conteneur.
<div class="justify-content-center">
Étape 2 - Créez un élément ff6d136ddc5fdfeffaf53ff6ee95f185 à l'intérieur du div du conteneur et attribuez-lui la pagination de classe et alignez les liens de pagination sur le côté souhaité (par exemple, centre de texte, texte à gauche, texte à droite) )
<ul class="pagination text-center">
Étape 3 - Créez des éléments 25edfb22a4f469ecb59f1190150159c6 pour chaque numéro de page ou boutons précédent et suivant à l'intérieur d'un élément ff6d136ddc5fdfeffaf53ff6ee95f185 Spécifiez la classe "page-item" pour chaque élément li.
<li class="page-item">
Étape 4 - Créez des éléments 3499910bf9dac5ae3c52d5ede7383485 pour les boutons ou les numéros de page dans chaque élément 25edfb22a4f469ecb59f1190150159c6 Attribuez la classe "page-link" à l'élément 3499910bf9dac5ae3c52d5ede7383485
<a class="page-link" href="#">1</a>
Étape 5 - Le code final ressemble à ceci -
<div class="justify-content-center">
<ul class="pagination text-center">
<li class="page-item">
Previous
<li class="page-item">
<a class="page-link" href="#">1</a>
<li class="page-item">
2
<li class="page-item">
3
<li class="page-item">
Next
Conclusion
Tirer parti des classes intégrées fournies par le framework facilitera l'alignement de la pagination dans Bootstrap 4. En utilisant le processus étape par étape ci-dessus, vous pouvez créer un composant de pagination entièrement fonctionnel et visuellement axé sur la page. Incluez les fichiers CSS et JavaScript Bootstrap dans le projet, créez un élément de navigation avec l'attribut aria-label et fournissez un élément de liste non ordonné contenant des liens de pagination. La classe textcenter fera cela. Cette stratégie permet de changer facilement la couleur et la direction de la pagination sans avoir à créer beaucoup de CSS uniques.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!