Les listes d’éléments COMPOSANTS D’INTERFACE:Liste d’éléments

1. L’objectif LISTES:Insérer une liste d’éléments

Bootstrap nous propose une élégante liste d’éléments <ul>, avec la classe .list-group. Vous pouvez afficher ce que vous voulez dans cette liste : texte, liens...

Le dossier à télécharger pour ces exemples est nommé 08-Interface-04.

2. Une liste simple LISTES:Simples

Premier exemple simple : une liste de texte. Tous les items <li> sont affichés les uns sous les autres.

Le code utilisé :

<ul class="list-group"> 
    <li class="list-group-item">Cras justo odio</li> 
    <li class="list-group-item">Dapibus ac facilisis in</li> 
    <li class="list-group-item">Morbi leo risus</li> 
    <li class="list-group-item">Porta ac consectetur ac</li> 
    <li class="list-group-item">Vestibulum at eros</li> 
</ul> 

L’affichage de cette liste simple :

3. L’élément actif LISTES:Élément actif

Vous pouvez mettre en évidence un élément <li> comme étant "actif" dans la liste des items, avec la classe .active.

Voici un exemple pour le premier item :

<ul class="list-group"> ...