Tutoriel Bootstrap

Bootstrap

Découvez les bases du plus célébre des frameworks CSS.

HTML HTML5 CSS Dreamweaver PHP

Miniatures Bootsrap

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

Personnalisation

Il est possible d'ajouter tout type de contenu HTML comme des titres, des paragraphes ou des boutons dans les vignettes
<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

Nature

Titre miniature

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.

En savoir + Voir le détail

Nature

Titre miniature

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.

En savoir + Voir le détail

Nature

Titre miniature

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.

En savoir + Voir le détail