Découvez les bases du plus célébre des frameworks CSS.
Dans ce tutoriel, je vous propose de découvrir le composant thumbnails de Bootstrap qui permet d'afficher des miniatures, idéales pour placer du texte, des images ou des vidéos.
Pour l'utiliser, il faudra utiliser la classe .thumbnail
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail" title="">
<img src="images/photo01.jpg" alt="Nature">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail" title="">
<img src="images/photo01.jpg" alt="Nature">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail" title="">
<img src="images/photo01.jpg" alt="Nature">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail" title="">
<img src="images/photo01.jpg" alt="Nature">
</a>
</div>
</div>
Exemple
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/photo01.jpg" alt="Nature">
<div class="caption">
<h3>Titre miniature</h3>
<p>Hic dolore eram illum nescius, summis an nostrud ne varias. Ut quid dolore se deserunt se culpa doctrina possumus, irure distinguantur officia eram quamquam, ubi nam instituendarum, quamquam minim vidisse nescius.</p>
<p><a href="#" class="btn btn-xs btn-primary" role="button" title="En savoir +">En savoir +</a>
<a href="#" class="btn btn-xs btn-default" role="button" title="Voir le détail">Voir le détail</a></p>
</div>
</div>
<div class="thumbnail">
<img src="images/photo01.jpg" alt="Nature">
<div class="caption">
<h3>Titre miniature</h3>
<p>Hic dolore eram illum nescius, summis an nostrud ne varias. Ut quid dolore se deserunt se culpa doctrina possumus, irure distinguantur officia eram quamquam, ubi nam instituendarum, quamquam minim vidisse nescius.</p>
<p><a href="#" class="btn btn-xs btn-primary" role="button" title="En savoir +">En savoir +</a>
<a href="#" class="btn btn-xs btn-default" role="button" title="Voir le détail">Voir le détail</a></p>
</div>
</div>
<div class="thumbnail">
<img src="images/photo01.jpg" alt="Nature">
<div class="caption">
<h3>Titre miniature</h3>
<p>Hic dolore eram illum nescius, summis an nostrud ne varias. Ut quid dolore se deserunt se culpa doctrina possumus, irure distinguantur officia eram quamquam, ubi nam instituendarum, quamquam minim vidisse nescius.</p>
<p><a href="#" class="btn btn-xs btn-primary" role="button" title="En savoir +">En savoir +</a>
<a href="#" class="btn btn-xs btn-default" role="button" title="Voir le détail">Voir le détail</a></p>
</div>
</div>
</div>
Exemple
Hic dolore eram illum nescius, summis an nostrud ne varias. Ut quid dolore se deserunt se culpa doctrina possumus, irure distinguantur officia eram quamquam, ubi nam instituendarum, quamquam minim vidisse nescius.
Hic dolore eram illum nescius, summis an nostrud ne varias. Ut quid dolore se deserunt se culpa doctrina possumus, irure distinguantur officia eram quamquam, ubi nam instituendarum, quamquam minim vidisse nescius.
Hic dolore eram illum nescius, summis an nostrud ne varias. Ut quid dolore se deserunt se culpa doctrina possumus, irure distinguantur officia eram quamquam, ubi nam instituendarum, quamquam minim vidisse nescius.