Bootstrap Vignettes
Ce chapitre expliquera les vignettes Bootstrap. La plupart des sites web ont besoin de disposer des images, des vidéos, du texte, etc. dans une grille. Bootstrap fournit un moyen simple de le faire avec des vignettes. Les étapes pour créer une vignette avec Bootstrap sont les suivantes :
- Ajoutez une classe autour de l'image.thumbnailde la balise <a>.
- Cela ajoute quatre pixels de marge intérieure et une bordure grise.
- Lorsque la souris survole l'image, le contour de l'image s'affiche avec une animation.
L'exemple suivant présente la miniature par défaut :
Exemple
<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="Miniature générique de remplacement">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="Miniature générique de remplacement">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="Miniature générique de remplacement">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="Miniature générique de remplacement">
</a>
</div>
</div>
Essayez-le vous-même »
Le résultat est le suivant :
Ajouter du contenu personnalisé
Maintenant que nous avons une vignette de base, nous pouvons ajouter divers contenus HTML à la vignette, tels que des titres, des paragraphes ou des boutons. Les étapes spécifiques sont les suivantes :
- Remplacez la balise avec la classe.thumbnailde la balise <a> par <div>.
- À l'intérieur du <div>, vous pouvez ajouter tout ce que vous voulez. Comme il s'agit d'un <div>, nous pouvons utiliser la convention de nommage par défaut basée sur span pour ajuster la taille.
- Si vous souhaitez regrouper plusieurs images, placez-les dans une liste non ordonnée, et chaque élément de liste flotte à gauche.
L'exemple suivant le démontre :
Exemple
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="Miniature générique de remplacement">
<div class="caption">
<h3>Libellé de la vignette</h3>
<p>Un exemple de texte. Un exemple de texte.</p>
<p>
<a href="#" class="btn btn-primary" role="button">Bouton</a>
<a href="#" class="btn btn-default" role="button">Bouton</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="Miniature générique de remplacement">
<div class="caption">
<h3>Libellé de la vignette</h3>
<p>Un exemple de texte. Un exemple de texte.</p>
<p>
<a href="#" class="btn btn-primary" role="button">Bouton</a>
<a href="#" class="btn btn-default" role="button">Bouton</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="Miniature générique de remplacement">
<div class="caption">
<h3>Libellé de la vignette</h3>
<p>Un exemple de texte. Un exemple de texte.</p>
<p>
<a href="#" class="btn btn-primary" role="button">Bouton</a>
<a href="#" class="btn btn-default" role="button">Bouton</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="Miniature générique de remplacement">
<div class="caption">
<h3>Libellé de la vignette</h3>
<p>Un exemple de texte. Un exemple de texte.</p>
<p>
<a href="#" class="btn btn-primary" role="button">Bouton</a>
<a href="#" class="btn btn-default" role="button">Bouton</a>
</p>
</div>
</div>
</div>
</div>
Essayez-le vous-même »
Le résultat est le suivant :
