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

Ce site est liste dans la categorie Enseignement et formation : Formations professionnelles de l'annuaire Référencement et Dictionnaire

Frédéric création Jardin | Concinnatis | Au petit grandeur | Lestrem TP | Jerico | Solumetal | Comonmarket | Chez Beau J'ai | Beukenne Traiteur | PDP Recouvrement | Agroé - Achat groupé d'énérgie | Achat goupé Sorea | CE LM énergie | placedesenergies.com | Gazon de la Folie | Dépannage pôele à  pellet | Création site web Nord | Rénovation habitat Pas de calais | Cuisine Bois | Créperie à  Valenciennes | Repar Coudre | DNS service | Archis 2 | 3MI | Tests d'orientation professionnels - Solutests | Ircl | Leblan promotion | Formation webmaster, PAO, CAO / DAO | Formateur Web, référencement et PAO | Formateur bureautique |