Le style par défaut de l’élément liste du HTML dans certains projets web n’est parfois pas attrayant , et même dès fois c’est nuisible pour l’expérience utilisateur.
Bootstrap nous permet de proposer cet élément dans nos réalisations de manière à captiver l’attention du visiteur. Comme vous pouvez le constater sur cette réalisation, elle nous offre la possibilité de styliser proprement une liste et de la rendre flexible.
Styliser une liste à l’aide Bootstrap est facile à réaliser, découvrons ensemble comment s’y prendre.
LA SUITE APRÈS CETTE PUBLICITÉ
Réalisons une simple liste avec Bootstrap
Nous avons à notre disposition deux classes pour appliquer le style Bootstrap à l’élément liste :
- La première classe est la classe .list-group, elle doit être intégrée dans la balise ul. Cette classe rend le composant liste flexible et lui retire les marges qu’elle a par défaut.
- La seconde classe est la classe .list-group-item, cette classe doit être appliquée à tous les éléments de la liste. Elle définit un fond blanc pour ces éléments, leur applique une bordure et aussi des marges.
Exemple :
<ul class="list-group"> <li class="list-group-item">Bootstrap Top Design</li> <li class="list-group-item">Codename One Tuto</li> <li class="list-group-item">Codename One Store</li> <li class="list-group-item">Penoel KOUKOU</li> <li class="list-group-item">Eric Gbofu</li> </ul>
Si vous désirez activer l’un des éléments de la liste, il vous faut ajouter la classe .active à cet élément.
Exemple :
<ul class="list-group"> <li class="list-group-item active">Bootstrap Top Design</li> <li class="list-group-item">Codename One Tuto</li> <li class="list-group-item">Codename One Store</li> <li class="list-group-item">Penoel KOUKOU</li> <li class="list-group-item">Eric Gbofu</li> </ul>
Intégrons des liens dans une liste stylisée avec Bootstrap :
Bootstrap nous offre aussi la possibilité de grouper des liens dans une liste avec un style séduisant.
Pour s’y prendre, il faut en plus de la classe .list-group-item, ajouter la classe .list-group-item-action aux liens.
Exemple :
<ul class="list-group"> <a href="#" class="list-group-item list-group-item-action active">Bootstrap Top Design</a> <a href="#" class="list-group-item list-group-item-action">Codename One Tuto</a> <a href="#" class="list-group-item list-group-item-action">Codename One Store</a> <a href="#" class="list-group-item list-group-item-action">Penoel KOUKOU</a> <a href="#" class="list-group-item list-group-item-action">Eric Gbofu</a> </ul>
Découvrez la démo de nos listes stylisées à l’aide de Bootstrap via le bouton ci-dessous et pour plus d’amples informations sur le composant liste de Bootstrap, cliquer ici.
Autres tutoriels disponibles sur le blog
- Créer facilement un carousel bootstrap
- Réaliser un accordéon avec bootstrap
- Réaliser une barre de navigation bootstrap
