tag with class .thumbnail around the image. This will add four pixels of padding and a gray border. When the mouse hovers over the image, the outline of the image will be animated. Overview The default design of Boosttrap thumbnails requires only minimal tags to display linked images. Thumbnails are implemented through the "thumbnail" style and bootstrap's grid system
The Chinese translation of thumbnail is thumb nail. It is indeed like a thumbnail. There is a picture in the middle, a small circle of blank space around the picture, a border and rounded corners outside, and the text below
.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>
Custom content On the basis of only thumbnails, a div named "caption" is added Container, place other content in this container, such as title, text description, button, 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>
##The above is the detailed content of A detailed introduction to Bootstrap thumbnails. For more information, please follow other related articles on the PHP Chinese website!
