Une introduction détaillée aux vignettes Bootstrap

Ce chapitre expliquera les vignettes Bootstrap. La plupart des sites doivent disposer les images, les vidéos, le texte, etc. dans une grille. Bootstrap fournit un moyen simple de le faire via des vignettes. Voici les étapes pour créer une vignette à l'aide de Bootstrap :

Ajoutez une balise avec la classe .thumbnail autour de l'image.

Cela ajoutera quatre pixels de remplissage et une bordure grise.

Lorsque la souris passe sur l'image, le contour de l'image sera animé.

Vue d'ensemble

La conception par défaut des vignettes Boosttrap ne nécessite que des balises minimales pour afficher les images liées. Les vignettes sont implémentées via le style "vignette" et le système de grille d'amorçage

La traduction chinoise. de la vignette est l'ongle du pouce. C'est en effet comme une vignette. Il y a une image au milieu, un petit cercle d'espace vide autour de l'image, une bordure et des coins arrondis à l'extérieur, et le texte en dessous

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;  transition: all .2s ease-in-out;
}.thumbnail > img,
.thumbnail a > img {
  margin-right: auto;
  margin-left: auto;
}a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #428bca;
}.thumbnail .caption {
  padding: 9px;
  color: #333;
}

<div class="container"><div class="row"><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a></div></div></div>

Contenu personnalisé

Basé uniquement sur la vignette, un nom div est ajouté Conteneur pour "légende", placez d'autres contenus dans ce conteneur, comme un titre, une description textuelle, un bouton, etc.

.thumbnail .caption {
  padding: 9px;
  color: #333;
}

<div class="container"><div class="row"><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a><div class="caption"><h3>小火柴的蓝色理想</h3><p>好的代码像粥一样，都是用时间熬出来的</p><p><a href="##" class="btn btn-primary">确认</a><a href="##" class="btn btn-info">取消</a></p></div> </div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a><div class="caption"><h3>小火柴的蓝色理想</h3><p>好的代码像粥一样，都是用时间熬出来的</p><p><a href="##" class="btn btn-primary">确认</a><a href="##" class="btn btn-info">取消</a></p></div> </div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a><div class="caption"><h3>小火柴的蓝色理想</h3><p>好的代码像粥一样，都是用时间熬出来的</p><p><a href="##" class="btn btn-primary">确认</a><a href="##" class="btn btn-info">取消</a></p></div> </div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="http://via.placeholder.com/100x100"" alt="#"></a><div class="caption"><h3>小火柴的蓝色理想</h3><p>好的代码像粥一样，都是用时间熬出来的</p><p><a href="##" class="btn btn-primary">确认</a><a href="##" class="btn btn-info">取消</a></p></div> </div>                </div></div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!