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.
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.
La première façon d'aligner la pagination dans Bootstrap 4 est « d'utiliser les classes .justify-content-* ».
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
Étape 3 - Vous devez ajouter l'une des classes suivantes à l'élément
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>
Pour aligner le composant de pagination respectivement à gauche, au centre ou à droite, utilisez . Texte à gauche, Centre de texte et. Textez la bonne classe.
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
<ul class="pagination text-center">
Étape 3 - Créez des éléments
<li class="page-item">
Étape 4 - Créez des éléments pour les boutons ou les numéros de page dans chaque élément
<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
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!
Quelle devise est l'USDT ?
Comment résoudre le code d'erreur 5 de suppression de fichier
Comment lire les données dans un fichier Excel en python
Historique des opérations de la table de vue Oracle
mysql créer une base de données
Quel logiciel est cdr
Une liste complète des touches de raccourci d'idées
Que faire si Linux demande Aucun fichier ou répertoire de ce type lors de l'exécution d'un fichier
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
