Les badges sont un peu comme les libellés, mais pour des informations plus courtes, idéalement des nombres : Code : HTML
<a href="#">Messages reçus <span class="badge">42</span></a>
Ce qui donne la figure suivante.
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 : Code : HTML
<button class="btn btn-danger">Envoi <span class="badge text- success">42</span></button>
Ce qui donne la figure suivante.
Stylisation du badge J'ai ajouté des badges sur la page d'exemple pour représenter le nombre de tigres :
Code : HTML <ul>
<li>Tigre de Sibérie <span class="badge">230</span></li>
<li>Tigre de Bali <span class="badge">540</span></li>
<li>Tigre de d'Indochine <span class="badge">230</span></li>
<li>Tigre de Malaisie <span class="badge">240</span></li>
<li>Tigre de Java <span class="badge">1200</span></li>
<li>Tigre de Sumatra <span class="badge">710</span></li>
<li>Tigre du Bengale <span class="badge">20</span></li>
<li>Tigre de la Caspienne <span class="badge">40</span></li> </ul>
Ce qui donne la figure suivante.
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 positionné les images en utilisant tout simplement la grille :
Code : HTML
<section class="row">
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t1.jpg" alt="Tigre" class="img-rounded"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t2.jpg" alt="Tigre" class="img-rounded"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t3.jpg" alt="Tigre" class="img-rounded"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t4.jpg" alt="Tigre" class="img-rounded"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t5.jpg" alt="Tigre" class="img-rounded"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t6.jpg" alt="Tigre" class="img-rounded"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t7.jpg" alt="Tigre" class="img-rounded"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t8.jpg" alt="Tigre" class="img-rounded"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t9.jpg" alt="Tigre" class="img-rounded"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t10.jpg" alt="Tigre" class="img-rounded"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t11.jpg" alt="Tigre" class="img-rounded"></div>
<div class="col-xs-4 col-sm-3 col-md-2"><img src="images/t12.jpg" alt="Tigre" class="img-rounded"></div>
Ce qui donne une organisation bien régulière, comme le montre la figure suivante.
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 :
Code : HTML
<section class="row">
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t1.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t2.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t3.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t4.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t5.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t6.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t7.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t8.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t9.jpg" alt="Tigre" class="img-rounded">
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t10.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t11.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t12.jpg" alt="Tigre" class="img-rounded">
</a>
</div> </section>
On obtient ainsi le même résultat qu'à la figure suivante.
Effet de la classe thumbnail Remarquez à la figure suivante la stylisation quand on passe le curseur de la souris.
Effet du passage du 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 : Code : HTML
<div class="thumbnail">
<img src="images/photo-tigre.jpg" alt="Tigre" class="img-rounded"> </div>
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 garnir le thumbnail de ce que vous voulez. Par exemple j'ai stylisé l'adresse sur la page
d'exemple :
Code : HTML
<address class="thumbnail">
<p>Vous pouvez me contacter à cette adresse :</p>
<strong>Tigrou Alfred</strong><br>
Allée des fauves<br>
28645 Félins-sur-Loire<br> </address>
Ce qui donne la figure suivante.
Classe thumbnail appliquée à une adresse