Eine ausführliche Einführung in Bootstrap-Miniaturansichten

In diesem Kapitel werden Bootstrap-Miniaturansichten erläutert. Die meisten Websites müssen Bilder, Videos, Texte usw. in einem Raster anordnen. Bootstrap bietet eine einfache Möglichkeit, dies über Miniaturansichten zu tun. Hier sind die Schritte zum Erstellen einer Miniaturansicht mit Bootstrap:

Fügen Sie ein -Tag mit der Klasse .thumbnail um das Bild hinzu.

Dadurch werden vier Pixel Abstand und ein grauer Rand hinzugefügt.

Wenn Sie mit der Maus über das Bild fahren, wird der Umriss des Bildes animiert.

Übersicht

Das Standarddesign von Boosttrap-Miniaturansichten erfordert nur minimale Tags, um verknüpfte Bilder anzuzeigen. Miniaturansichten werden durch den „Thumbnail“-Stil und das Bootstrap-Rastersystem implementiert

Die chinesische Übersetzung Das Miniaturbild ist tatsächlich wie ein Miniaturbild. Es gibt ein Bild in der Mitte, einen kleinen Kreis aus Leerzeichen um das Bild herum, einen Rand und abgerundete Ecken und den Text darunter

.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>

Benutzerdefinierter Inhalt

Nur basierend auf der Miniaturansicht wird ein Div-Name hinzugefügt Container für „Beschriftung“, platzieren Sie andere Inhalte in diesem Container, wie z. B. Titel, Textbeschreibung, Schaltfläche usw.

.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>

Das obige ist der detaillierte Inhalt vonEine ausführliche Einführung in Bootstrap-Miniaturansichten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!