Sommaire

Les listes d’éléments COMPOSANTS D’INTERFACE D’ADMINISTRATION:Listes d’éléments

1. L’objectif

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...

Cet exemple est repris dans le fichier Bootstrap-07-COMP-Admin/03-list-group.html.

2. Une liste simple

Effectuons un 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/C13-017.png

Voilà les sélecteurs CSS utilisés pour cette mise en forme :

.list-group { 
   border-radius: 4px; 
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.075); 
   box-shadow: 0 1px 2px rgba(0,0,0,0.075); 
} 
.list-group { 
   padding-left: 0; 
   (margin-bottom: 20px;) 
} 
ul, ol { 
   margin-top: 0; 
   margin-bottom: 10px; 
} 
.list-group-item:first-child ...