Les badges sont un peu comme les libellés, mais pour des informations plus courtes, idéalement des nombres :
1 <a href="#">Messages reçus <span class=" badge ">42 </span></a> Ce qui donne la figure 5.24.
Figure 5.23 – Un libellé dans un formulaire
Figure 5.24 – Un badge simple
Comme le badge se trouve dans une balise <span>, il est facile de l’intégrer par exemple à un bouton et de le colorer :
1 <button class=" btn btn - danger ">Envoi <span class=" badge text -
success ">42 </span></button>
Ce qui donne la figure 5.25.
Figure 5.25 – Stylisation du badge
J’ai ajouté des badges sur la page d’exemple pour représenter le nombre de tigres : 1 <ul>
2 <li>Tigre de Sib é rie <span class=" badge ">230 </span></li> 3 <li>Tigre de Chine mé ridionale <span class=" badge ">120 </span>
</li>
4 <li>Tigre de Bali <span class=" badge ">540 </span></li>
5 <li>Tigre de d' Indochine <span class=" badge ">230 </span></li> 6 <li>Tigre de Malaisie <span class=" badge ">240 </span></li> 7 <li>Tigre de Java <span class=" badge ">1200 </span></li> 8 <li>Tigre de Sumatra <span class=" badge ">710 </span></li> 9 <li>Tigre du Bengale <span class=" badge ">20 </span></li> 10 <li>Tigre de la Caspienne <span class=" badge ">40 </span></li> 11 </ul>
Figure 5.26 – Badges dans une liste
Thumbnails
Si vous avez des images, des vidéos ou tous autres éléments à afficher dans une grille, Bootstrap propose le composant Thumbnails très facile à mettre en œuvre. Je reviens sur ma page d’exemple qui comporte de petites images de tigres. Jusque-là, j’ai posi- tionné les images en utilisant tout simplement la grille :
1 <section class=" row ">
2 <div class="col -xs -4 col -sm -3 col -md -2"><img src=" images /t1.
jpg " alt=" Tigre " class="img - rounded "></div>
3 <div class="col -xs -4 col -sm -3 col -md -2"><img src=" images /t2.
jpg " alt=" Tigre " class="img - rounded "></div>
4 <div class="col -xs -4 col -sm -3 col -md -2"><img src=" images /t3.
jpg " alt=" Tigre " class="img - rounded "></div>
5 <div class="col -xs -4 col -sm -3 col -md -2"><img src=" images /t4.
jpg " alt=" Tigre " class="img - rounded "></div>
6 <div class="col -xs -4 col -sm -3 col -md -2"><img src=" images /t5.
jpg " alt=" Tigre " class="img - rounded "></div>
7 <div class="col -xs -4 col -sm -3 col -md -2"><img src=" images /t6.
jpg " alt=" Tigre " class="img - rounded "></div>
8 <div class="col -xs -4 col -sm -3 col -md -2"><img src=" images /t7.
jpg " alt=" Tigre " class="img - rounded "></div>
9 <div class="col -xs -4 col -sm -3 col -md -2"><img src=" images /t8.
jpg " alt=" Tigre " class="img - rounded "></div>
10 <div class="col -xs -4 col -sm -3 col -md -2"><img src=" images /t9.
jpg " alt=" Tigre " class="img - rounded "></div>
11 <div class="col -xs -4 col -sm -3 col -md -2"><img src=" images / t10 .
jpg " alt=" Tigre " class="img - rounded "></div>
12 <div class="col -xs -4 col -sm -3 col -md -2"><img src=" images / t11 .
jpg " alt=" Tigre " class="img - rounded "></div>
13 <div class="col -xs -4 col -sm -3 col -md -2"><img src=" images / t12 .
jpg " alt=" Tigre " class="img - rounded "></div>
14 </ section >
Figure 5.27 – Disposition des images avec la grille
Voyons ce que ça donne avec le composant Thumbnails. Le principe est simple, il faut utiliser la classe thumbnail, par exemple dans une balise <a>. Voilà ce que ça donne pour la page d’exemple en supposant que les vignettes servent de liens :
1 <section class=" row ">
2 <div class="col -xs -4 col -sm -3 col -md -2 "> 3 <a href="#" class=" thumbnail ">
4 <img src=" images /t1. jpg " alt=" Tigre " class="img - rounded "> 5 </a>
6 </div>
7 <div class="col -xs -4 col -sm -3 col -md -2 "> 8 <a href="#" class=" thumbnail ">
9 <img src=" images /t2. jpg " alt=" Tigre " class="img - rounded "> 10 </a>
11 </div>
12 <div class="col -xs -4 col -sm -3 col -md -2 "> 13 <a href="#" class=" thumbnail ">
14 <img src=" images /t3. jpg " alt=" Tigre " class="img - rounded "> 15 </a>
16 </div>
17 <div class="col -xs -4 col -sm -3 col -md -2 "> 18 <a href="#" class=" thumbnail ">
19 <img src=" images /t4. jpg " alt=" Tigre " class="img - rounded "> 20 </a>
21 </div>
22 <div class="col -xs -4 col -sm -3 col -md -2 "> 23 <a href="#" class=" thumbnail ">
24 <img src=" images /t5. jpg " alt=" Tigre " class="img - rounded "> 25 </a>
26 </div>
27 <div class="col -xs -4 col -sm -3 col -md -2 "> 28 <a href="#" class=" thumbnail ">
29 <img src=" images /t6. jpg " alt=" Tigre " class="img - rounded "> 30 </a>
31 </div>
32 <div class="col -xs -4 col -sm -3 col -md -2 "> 33 <a href="#" class=" thumbnail ">
34 <img src=" images /t7. jpg " alt=" Tigre " class="img - rounded "> 35 </a>
36 </div>
37 <div class="col -xs -4 col -sm -3 col -md -2 "> 38 <a href="#" class=" thumbnail ">
39 <img src=" images /t8. jpg " alt=" Tigre " class="img - rounded "> 40 </a>
41 </div>
42 <div class="col -xs -4 col -sm -3 col -md -2 "> 43 <a href="#" class=" thumbnail ">
44 <img src=" images /t9. jpg " alt=" Tigre " class="img - rounded "> 45 </a>
46 </div>
47 <div class="col -xs -4 col -sm -3 col -md -2 "> 48 <a href="#" class=" thumbnail ">
49 <img src=" images / t10 . jpg " alt=" Tigre " class="img - rounded "
>
50 </a> 51 </div>
52 <div class="col -xs -4 col -sm -3 col -md -2 "> 53 <a href="#" class=" thumbnail ">
54 <img src=" images / t11 . jpg " alt=" Tigre " class="img - rounded "
>
55 </a> 56 </div>
57 <div class="col -xs -4 col -sm -3 col -md -2 "> 58 <a href="#" class=" thumbnail ">
59 <img src=" images / t12 . jpg " alt=" Tigre " class="img - rounded "
>
60 </a> 61 </div> 62 </ section >
On obtient ainsi le même résultat qu’à la figure 5.28.
Figure 5.28 – Effet de la classe thumbnail
Remarquez à la figure 5.29 la stylisation quand on passe le curseur de la souris. Pour des raisons d’homogénéité de la présentation, je prévois aussi de traiter la photo plus grande située au-dessous :
1 <div class=" thumbnail ">
2 <img src=" images /photo - tigre . jpg " alt=" Tigre " class="img -
Figure 5.29 – Effet du passage du curseur de la souris
3 </div>
Ce qui donne la figure 5.30.
Figure 5.30 – Classe thumbnail appliquée à une grande image
Nous ne sommes évidemment pas limités à afficher des images dans un thumbnail. Puisque vous pouvez mettre cette classe dans un <div> ou autre, vous pouvez gar- nir le thumbnail de ce que vous voulez. Par exemple j’ai stylisé l’adresse sur la page d’exemple :
1 <address class=" thumbnail ">
2 <p>Vous pouvez me contacter à cette adresse :</p> 3 <strong>Tigrou Alfred </strong><br>
4 All ée des fauves <br> 5 28645 Félins -sur - Loire <br> 6 </address>
Figure 5.31 – Classe thumbnail appliquée à une adresse