Les listes groupées proposent une mise en forme des listes non ordonnées. Voici un premier exemple avec la visualisation d’une liste sans et avec formatage pour comparer : 1 <div class=" container ">
2 <div class="col -lg -2"> 3 <ul> 4 <li>Item 1</li> 5 <li>Item 2</li> 6 <li>Item 3</li> 7 <li>Item 4</li> 8 </ul> 9 </div>
10 <div class="col -lg -2"> 11 <ul class="list - group ">
12 <li class="list -group - item ">Item 1</li> 13 <li class="list -group - item ">Item 2</li> 14 <li class="list -group - item ">Item 3</li> 15 <li class="list -group - item ">Item 4</li> 16 </ul>
17 </div> 18 </div>
Ce qui donne la figure 5.34.
Figure 5.34 – Liste simple et liste groupée
Liste avec badges
Il est possible d’ajouter des badges tout simplement en intégrant un <span>, par défaut affiché à droite :
1 <ul class="list - group ">
2 <li class="list -group - item "> 3 <span class=" badge ">22 </span> 4 Item 1
5 </li>
6 <li class="list -group - item "> 7 <span class=" badge ">12 </span> 8 Item 2
9 </li>
10 <li class="list -group - item "> 11 <span class=" badge ">33 </span> 12 Item 3
13 </li>
14 <li class="list -group - item "> 15 <span class=" badge ">87 </span> 16 Item 4
17 </li> 18 </ul>
Figure 5.35 – Liste avec des badges
Listes avec liens
Les éléments de la liste peuvent aussi être des liens. Il suffit de prévoir des balises <a>, l’item actif est repéré avec la classe active :
1 <ul class="list - group ">
2 <a href="#" class="list -group - item active ">
3 <span class=" glyphicon glyphicon - chevron - right pull - right ">
</span>
4 Item 1 5 </a>
6 <a href="#" class="list -group - item ">
7 <span class=" glyphicon glyphicon - chevron - right pull - right ">
</span>
8
9 Item 2 10 </a>
11 <a href="#" class="list -group - item ">
12 <span class=" glyphicon glyphicon - chevron - right pull - right ">
</span>
13 Item 3 14 </a>
15 <a href="#" class="list -group - item ">
16 <span class=" glyphicon glyphicon - chevron - right pull - right ">
</span>
17 Item 4 18 </a>
19 </ul>
Ce qui donne la figure 5.36.
J’ai prévu des chevrons pour appuyer la sémantique des liens, ils sont poussés sur la droite avec la classe pull-right.
Un peu de couleur
De nouvelles classes sont apparues avec la version 3.1 de Bootstrap qui permettent d’avoir un peu de couleur dans les listes groupées.
Figure 5.36 – Liste avec des liens
1 <div class="col -lg -3"> 2 <ul class="list - group ">
3 <li class="list -group - item list -group -item - success ">On a
gagn é !</li>
4 <li class="list -group - item list -group -item - info ">Une petite
info </li>
5 <li class="list -group - item list -group -item - warning ">
Attention c' est chaud !</li>
6 <li class="list -group - item list -group -item - danger ">Par là c
' est dangereux ... </li>
7 </ul> 8 </div>
Vous trouverez le résultat visuel à la figure 5.37.
Figure 5.37 – Un peu de couleur dans les listes
Contenus divers
La liste est suffisamment versatile pour contenir des éléments variés. On peut avoir une
en-tête avec la classe list-group-item-heading, et du texte avec la classe list-group-item-text, mais on peut intégrer par exemple une image comme je le fais ici :
1 <ul class="list - group ">
2 <a href="#" class="list -group - item active ">
3 <h4 class="list -group -item - heading ">Tigre 1</h4>
4 <p class="list -group -item - text pull - right ">Mon joli tigre 1
</p>
10 <img src=" images /t2. jpg "> 11 </a>
12 </ul>
Ce qui donne la figure 5.38.
Figure 5.38 – Liste avec des images
Utilisation de liste sur la page d’exemple
J’ai utilisé une liste groupée sur la page d’exemple pour les sous-espèces de tigres (avec badges, le tout intégré dans un panneau dont nous allons bientôt parler) :
1 <div class="list - group ">
2 <a href="#" class="list -group - item "> 3 Tigre de Sib é rie
4 <span class=" badge ">120 </span> 5 </a>
6 <a href="#" class="list -group - item "> 7 Tigre de Chine mé ridionale
8 <span class=" badge ">540 </span> 9 </a>
10 <a href="#" class="list -group - item "> 11 Tigre de Bali
12 <span class=" badge ">230 </span> 13 </a>
14 <a href="#" class="list -group - item "> 15 Tigre de d' Indochine
16 <span class=" badge ">240 </span> 17 </a>
18 <a href="#" class="list -group - item "> 19 Tigre de Malaisie
20 <span class=" badge ">1200 </span> 21 </a>
22 <a href="#" class="list -group - item "> 23 Tigre de Java
24 <span class=" badge ">710 </span> 25 </a>
26 <a href="#" class="list -group - item "> 27 Tigre de Sumatra
28 <span class=" badge ">20 </span> 29 </a>
30 <a href="#" class="list -group - item "> 31 Tigre du Bengale
32 <span class=" badge ">40 </span> 33 </a>
34 <a href="#" class="list -group - item "> 35 Tigre de la Caspienne
36 <span class=" badge ">200 </span> 37 </a>
38 </div> 39 </div>
Ce qui donne la figure 5.42.
1 <div class=" panel panel - default "> 2 <div class="panel - heading ">
3 <h3 class="panel - title ">Titre </h3> 4 </div>
5 <div class="panel - body ">Contenu </div>
6 <div class="panel - footer ">Pied de panneau </div> 7 </div>
Ce qui donne la figure 5.40.
Figure 5.40 – Un simple panneau
Il y a aussi des classes pour créer un sens visuel pour ces panneaux : 1 <div class=" panel panel - primary ">
2 <div class="panel - heading ">
3 <h3 class="panel - title ">Titre </h3> 4 </div>
5 <div class="panel - body ">Contenu </div> 6 </div>
7 <div class=" panel panel - success "> 8 <div class="panel - heading ">
9 <h3 class="panel - title ">Titre </h3> 10 </div>
11 <div class="panel - body ">Contenu </div> 12 </div>
13 <div class=" panel panel - warning "> 14 <div class="panel - heading ">
15 <h3 class="panel - title ">Titre </h3> 16 </div>
17 <div class="panel - body ">Contenu </div> 18 </div>
19 <div class=" panel panel - danger "> 20 <div class="panel - heading ">
21 <h3 class="panel - title ">Titre </h3> 22 </div>
23 <div class="panel - body ">Contenu </div> 24 </div>
25 <div class=" panel panel - info "> 26 <div class="panel - heading ">
27 <h3 class="panel - title ">Titre </h3> 28 </div>
29 <div class="panel - body ">Contenu </div> 30 </div>
Ce qui donne la figure 5.41.
Figure 5.41 – Des panneaux stylisés
Utilisation avec une liste groupée
J’ai intégré une liste groupée dans un panneau au niveau de la page d’exemple : 1 <div class=" panel panel - info ">
2 <div class="panel - heading ">
3 <h3 class="panel - title ">Les sous - esp è ces des tigres :</h3> 4 </div>
5 <div class="list - group ">
6 <a href="#" class="list -group - item ">
13 ... 14
15 </div> 16 </div>
Ce qui donne la figure 5.42.
Figure 5.42 – Liste groupée dans un panneau
Utilisation avec un tableau
J’ai intégré un tableau (sans bordure) dans un panneau au niveau de la page d’exemple : 1 <div class=" panel panel - primary ">
2 <table class=" table table - striped table - condensed "> 3 <div class="panel - heading ">
4 <h3 class="panel - title ">Les menaces pour les tigres </h3> 5 </div> 6 <thead> 7 <tr> 8 <th>Lieu </th> 9 <th>Menace </th> 10 </tr> 11 </thead>
12 <tbody> 13 <tr>
14 <td>Grand Mekong </td>
15 <td>Demande croissante de certaines parties de l' animal
pour la mé decine chinoise traditionnelle et
fragmentation des habitats du fait du dé veloppement non durable d' infrastructures </td>
16 </tr> 17 <tr>
18 <td>Île de Sumatra </td>
19 <td>Production d' huile de palme et de pâ tes à papiers </
td>
20 </tr> 21 <tr>
22 <td>Indon é sie et Malaisie </td>
23 <td>Pâte à papier , l' huile de palme et le caoutchouc </
td>
24 </tr> 25 <tr>
26 <td>États - Unis </td>
27 <td>Les tigres captifs repr é sentent un danger pour les
tigres sauvages </td>
28 </tr> 29 <tr>
30 <td>Europe </td>
31 <td>Gros app é tit pour l' huile de palme </td> 32 </tr>
33 <tr>
34 <td>Né pal </td>
35 <td>Commerce ill é gal de produits dé riv és de tigres </td> 36 </tr>
37 </tbody> 38 </table> 39 </div>
Ce qui donne la figure 5.43.
d’un texte. C’est ce que j’ai prévu dans la page d’exemple avec une vidéo de tigre : 1 <div class=" media col -lg -12">
2 <div class="pull - right ">
3 <iframe width=" 420 " height=" 320 " src=" http :// www . youtube .
com / embed / VmnIeLmjuHA " frameborder="0" allowfullscreen >< /iframe>
4 </div>
5 <div class="media - body pull - right ">
6 <h4 class="media - heading ">Un tigre domesique dans son canap
é</h4>
7 Admirez ce noble animal ... 8 </div>
9 </div>
Ce qui donne la figure 5.44.
Figure 5.44 – Utilisation de la classe media
La classe media englobe l’ensemble. On utilise ensuite au choix pull-right ou pull-left pour le média. Le corps de composant est défini par la classe media-body et on peut mettre un titre avec media-heading.
Liste de médias
Une autre possibilité fort intéressante consiste à créer une liste de médias avec la classe media-list. Prenons par exemple le cas d’un forum, on peut imaginer ce type de scénario :
1 <div class=" container ">
2 <ul class="media - list col -lg -7"> 3 <li class=" media thumbnail "> 4 <a class="pull - left " href="#">
5 <img class="media - object " src=" images / ico01 . png "> 6 </a>
7 <div class="media - body ">
8 <h4 class="media - heading ">Suggestion </h4>
9 <p>Je pense souhaitable d' interdire la chasse au tigre
pour pré server l' esp èce !</p>
10 <div class=" media thumbnail "> 11 <a class="pull - left " href="#">
12 <img class="media - object " src=" images / ico02 . png "> 13 </a>
14 <div class="media - body ">
15 <h4 class="media - heading ">Animaux dangereux </h4> 16 <p>Tu dé lires compl è tement , ce sont des animaux
trop dangereux pour les laisser vivre .</p>
17 <div class=" media thumbnail "> 18 <a class="pull - left " href="#">
19 <img class="media - object " src=" images / ico01 . png
">
20 </a>
21 <div class="media - body ">
22 <h4 class="media - heading ">Quel dé lire !</h4> 23 <p>C' est toi qui dé lires ! Il faut pré server la
bio - diversit é. Les tigres ne sont pas vraiment dangereux , c' est l' homme qui l' est !</p>
24 </div> 25 </div> 26 </div>
27 <div class=" media ">
28 <a class="pull - left " href="#">
29 <img class="media - object " src=" images / ico02 . png "> 30 </a>
31 <div class="media - body ">
32 <h4 class="media - heading ">Quel courage !</h4> 33 <p>J' aimerais te voir face à un tigre toi !</p> 34 </div>
35 </div> 36 </div>
37 <div class=" media thumbnail "> 38 <a class="pull - left " href="#">
39 <img class="media - object " src=" images / ico03 . png "> 40 </a>
41 <div class="media - body ">
42 <h4 class="media - heading ">Un peu de calme </h4> 43 <p>Je suis favorable à la pré servation de l' esp èce
48 <div class="media - body ">
49 <h4 class="media - heading ">Tu as vu ta tête !</
h4>
50 <p>Avec la tête que tu as tu ferais même peur à
un tigre toi !</p> 51 </div> 52 </div> 53 </div> 54 </div> 55 </div> 56 </li> 57 </ul> 58 </div>
Ce qui donne la figure 5.45.
Figure 5.45 – Une liste de médias Testez ! http://bootstrap.twit.free.fr/tutov3/media01.html
Remarquez l’utilisation de la classe thumbnail pour bien isoler les commentaires et rendre le tout lisible.