A detailed introduction to Bootstrap thumbnails

This chapter will explain Bootstrap thumbnails. Most websites need to lay out images, videos, text, etc. in a grid. Bootstrap provides an easy way to do this through thumbnails. The steps to create a thumbnail using Bootstrap are as follows:

Add an 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><div>
<div><a><img  src="/static/imghwm/default1.png" data-src="http://via.placeholder.com/100x100" class="lazy" alt="A detailed introduction to Bootstrap thumbnails" ></a></div>
<div><a><img  src="/static/imghwm/default1.png" data-src="http://via.placeholder.com/100x100" class="lazy" alt="A detailed introduction to Bootstrap thumbnails" ></a></div>
<div><a><img  src="/static/imghwm/default1.png" data-src="http://via.placeholder.com/100x100" class="lazy" alt="A detailed introduction to Bootstrap thumbnails" ></a></div>
<div><a><img  src="/static/imghwm/default1.png" data-src="http://via.placeholder.com/100x100" class="lazy" alt="A detailed introduction to Bootstrap thumbnails" ></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><div>
<div>
<a><img  src="/static/imghwm/default1.png" data-src="http://via.placeholder.com/100x100" class="lazy" alt="A detailed introduction to Bootstrap thumbnails" ></a><div>
<h3>小火柴的蓝色理想</h3>
<p>好的代码像粥一样，都是用时间熬出来的</p>
<p><a>确认</a><a>取消</a></p>
</div> </div>
<div>
<a><img  src="/static/imghwm/default1.png" data-src="http://via.placeholder.com/100x100" class="lazy" alt="A detailed introduction to Bootstrap thumbnails" ></a><div>
<h3>小火柴的蓝色理想</h3>
<p>好的代码像粥一样，都是用时间熬出来的</p>
<p><a>确认</a><a>取消</a></p>
</div> </div>
<div>
<a><img  src="/static/imghwm/default1.png" data-src="http://via.placeholder.com/100x100" class="lazy" alt="A detailed introduction to Bootstrap thumbnails" ></a><div>
<h3>小火柴的蓝色理想</h3>
<p>好的代码像粥一样，都是用时间熬出来的</p>
<p><a>确认</a><a>取消</a></p>
</div> </div>
<div>
<a><img  src="/static/imghwm/default1.png" data-src="http://via.placeholder.com/100x100" class="lazy" alt="A detailed introduction to Bootstrap thumbnails" ></a><div>
<h3>小火柴的蓝色理想</h3>
<p>好的代码像粥一样，都是用时间熬出来的</p>
<p><a>确认</a><a>取消</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!