Liste du style de groupe dans Bootstrap 5

Les groupes de liste sur un site Web assemblent le contenu interdépendant afin qu'il devienne plus facile pour l'utilisateur de naviguer dans le contenu Web. L'ajout de groupes de listes simples peut être un peu ennuyeux, mais les styler de diverses manières améliorera la beauté de la conception Web. De la création d'un groupe de liste de base à son style de plusieurs manières a été discutée dans ce blog. Tenez-vous à la fin pour en savoir plus sur le style de groupe de liste dans Bootstrap 5.

Comment créer un groupe de liste

Afin de créer une liste, faites une liste non ordonnée et affectez le

élément le .groupe de liste classe et affecter chaque élément de liste le .lister-group-item classe.

Html



• Objet 1


• Article 2


• Article 3



Le code ci-dessus générera un groupe de liste qui se compose de trois éléments de liste.

Sortir

La sortie ci-dessus montre un groupe de liste de base.

Comment attribuer des états actifs et handicapés à un groupe de liste

Si vous souhaitez définir l'état actif pour un élément de liste actuel et un état désactivé pour un élément inclicable, affectez simplement l'élément de liste respectif les états actifs et désactivés.

Html



• Objet 1


• Article 2


• Article 3



Ici, nous avons attribué un état actif au premier élément et un état handicapé au troisième élément. L'état handicapé ne rend pas un élément lié inclicable mais élimine également l'effet de survol.

Sortir

C'est ainsi que vous affectez les états actifs et handicapés pour répertorier les éléments dans un groupe de liste.

Comment attribuer des liens pour répertorier les éléments dans un groupe de liste

Si vous souhaitez rediriger votre utilisateur vers une autre page Web ou source à l'aide d'éléments dans un groupe de liste, au lieu de créer une liste non ordonnée, faites un div et attribuez-le .groupe de liste classe et nid tous les liens présents dans les balises d'ancrage à l'intérieur de cette div. De plus, attribuez le .lister-group-items, et .List-group-item-action Classes aux étiquettes d'ancrage présentes à l'intérieur du div.

Html


Objet 1
Article 2
Article 3


Le groupe de liste créé lorsque le code ci-dessus est exécuté sera survol et chaque élément du groupe sera lié à une autre source.

Sortir

Les éléments de la liste ont été liés avec succès.

Comment créer un groupe de liste sans bordure

Si vous souhaitez supprimer les frontières d'un groupe de liste, affectez simplement le .lister-group-flush classe au

élément avec le .groupe de liste classe.

Html



• Objet 1


• Article 2


• Article 3



Le code ci-dessus générera un groupe de liste sans frontières.

Sortir

C'est ainsi que vous créez un groupe de liste sans bordure.

Comment numéroter les éléments dans un groupe de liste

Aux fins de la numérotation des éléments d'un groupe de liste, utilisez le .liste de listes classe.

Html



• Objet 1


• Article 2


• Article 3



L'extrait de code indiqué ci-dessus donnera des nombres à chacun des éléments présents à l'intérieur du div.

Sortir

Les éléments de liste étaient numérotés.

Comment aligner un groupe de liste horizontalement

Un groupe de liste par défaut est aligné verticalement, mais si vous préférez l'aligner horizontalement, utilisez le .Liste-groupe horizontal classe.

Html



• Objet 1


• Article 2


• Article 3



Le .Liste-Groupe-Horizontal La classe a été attribuée au

élément avec le .Classe de groupe de liste, par conséquent, le groupe de liste généré en conséquence sera aligné horizontalement.

Sortir

La sortie affiche un groupe de liste horizontale.

Comment colorer les éléments de liste dans un groupe de liste

Une chose amusante que vous faites pour rendre votre groupe de liste élégant est d'utiliser les classes d'utilité des couleurs pour fournir des couleurs pour la liste des éléments du groupe de liste.

Html



• Objet 1


• Article 2


• Article 3


• Article 4


• Article 5



Il y a un total de 5 éléments de liste générés dans le code ci-dessus et chacun de ces éléments a été attribué une couleur différente en utilisant le .lister-group-item-primary, .List-group-item-warning, .lister-group-item-info, .Liste-groupe-émission, et .lister-group-item-danger classes respectivement.

Sortir

La sortie affiche les éléments de la liste colorée.

Si vous souhaitez créer des éléments de liste liés et leur fournir également des couleurs, suivez l'extrait de code ci-dessous.

Html


Objet 1
Article 2
Article 3
Article 4
Article 5


Pour lier les éléments de la liste, nous faisons simplement un conteneur div et nichent diverses balises d'ancrage à l'intérieur de ce conteneur qui liera les éléments de la liste. De plus, chaque lien a reçu une couleur différente.

Sortir

Le groupe de liste indiqué ci-dessus a coloré et lié les éléments de liste.

Conclusion

Un groupe de liste peut être conçu à l'aide de diverses classes bootstrap 5 par exemple .lister-group-flush Crée un groupe de liste sans bordure, .liste de listes donne un nombre aux éléments du groupe de liste, et .Liste-groupe horizontal aligne un groupe de liste horizontalement. De plus, pour fournir des couleurs aux éléments d'un groupe de liste, utilisez les classes de couleurs associées à des groupes de liste tels que .lister-group-item-primary, .lister-group-item-info, .lister-group-item-danger, etc. Ceci et bien plus encore sur la création et le style de groupes de liste ont été discutés dans ce blog.