Pagination en bootstrap 5

Une pagination devient une nécessité s'il existe plusieurs pages Web sur votre site Web car elle aide un utilisateur à naviguer facilement dans ces pages et fait également conscience de l'utilisateur de la page sur laquelle il / elle est actuellement. Si vous concevez votre site Web à l'aide de bootstrap 5 et que vous souhaitez apprendre à créer et à coiffer une pagination à l'aide de Bootstrap 5, lisez l'article jusqu'à la fin.

Comment créer une pagination à l'aide de bootstrap 5

Pour faire une pagination, affectez le .pagination classe vers une liste non ordonnée, .page-article classe des éléments de liste et .lien de page classe du lien présent à l'intérieur de chaque élément de liste.

Html

• «


• 1


• 2


• 3


• 4


• "

Le code ci-dessus génère une pagination montrant la numérotation de 1 à 4 tandis que et Laquo et & Raquo sont des noms d'entités pour les guillemets à double angle de pointe et de pointe à droite respectivement. Ces entités aident l'utilisateur à déplacer la pagination numérotant vers l'arrière et vers l'avant.

Sortir

La sortie affiche une pagination de base.

Comment attribuer des états actifs et handicapés à une pagination

L'état actif d'une pagination montre la page sur laquelle l'utilisateur est actuellement, tandis que l'état désactivé rend un lien inclicable et fait conscience de l'utilisateur qu'il n'y a plus de pages pour naviguer.

Html

• Dos


• 1


• 2


• 3


• 4


• Suivant

L'extrait de code créera une pagination avec l'élément de liste intitulé «Retour» attribué l'état désactivé, en attendant, l'état actif a été affecté à l'élément de liste intitulé «4», ce qui indique que l'utilisateur est actuellement sur la quatrième page.

Sortir

Les états actifs et handicapés ont été affectés avec succès à la pagination.

Comment évoluer une pagination

Si vous souhaitez mettre à l'échelle votre pagination, utilisez .pagination-sm classe pour créer des paginations de petite taille, alors que vous utilisez le .pagination-lg pour générer des paginations de grande taille.

Html

Le code ci-dessus générera des paginations de petite et grande taille pour démontrer la comparaison entre les tailles des deux paginations.

Sortir

C'est ainsi que vous pouvez évoluer votre pagination.

Comment définir l'alignement d'une pagination

Une pagination par défaut est positionnée dans le coin gauche d'une page, cependant, si vous souhaitez le placer au centre, utilisez le .justifier-contenu-centre classe, alors que vous utilisez le .justifier pour le placer dans le coin droit de la page.

Html

Le code ci-dessus utilise le .Classe de centaine de centres de justifier, par conséquent, la pagination créée en conséquence sera placée au centre de la page.

Sortir

Ceci est une pagination au centre positionnée.

Maintenant, positionnons la pagination dans le coin droit de la page.

Html

Le code ci-dessus utilise le .La classe de la fin de justifier, donc la pagination sera placée à la fin de la page.

Sortir

C'est une bonne pagination positionnée.

Conclusion

Une pagination peut être créée en attribuant le .pagination classe vers une liste non ordonnée, .page-article classe des éléments de liste et .lien de page classe du lien présent à l'intérieur de chaque élément de liste. Si vous souhaitez mettre à l'échelle une pagination, utilisez le .pagination-sm, et .pagination-lg Des classes. De plus, pour aligner une pagination au centre ou à la fin d'une page, utilisez le .justifier-contenu-centre, et .justifier classes respectivement. Enfin, vous pouvez également attribuer des états actifs et disquins aux éléments de pagination.