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 :

images/C08-015.png

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"> ...
Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les barres de progression
Suivant
Les cartes