Detailed explanation of thumbnails in Bootstrap

The most commonly used place for thumbnails on the website is the product list page. Several pictures are displayed in one line, and some have titles, descriptions, etc. at the bottom (left or right) of the picture. information. The Bootstrap framework separates this part into a module component. This article will introduce the Bootstrap thumbnail in detail

Overview

The default design of the Bootstrap thumbnail requires only a minimum of tags. It can display pictures with links and realize thumbnails through the "thumbnail" style and the grid system of bootstrap. The circle is blank, with borders and rounded corners outside, and 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;
}

Custom content

On the basis of only thumbnails, a pContainer named "caption", 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="/static/imghwm/default1.png"  data-src="http://via.placeholder.com/100x100"  class="lazy"  " alt="#">
            </a>
            <div class="caption">
                <h3 id="小火柴的蓝色理想">小火柴的蓝色理想</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="/static/imghwm/default1.png"  data-src="http://via.placeholder.com/100x100"  class="lazy"  " alt="#">
            </a>
            <div class="caption">
                <h3 id="小火柴的蓝色理想">小火柴的蓝色理想</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="/static/imghwm/default1.png"  data-src="http://via.placeholder.com/100x100"  class="lazy"  " alt="#">
            </a>
            <div class="caption">
                <h3 id="小火柴的蓝色理想">小火柴的蓝色理想</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="/static/imghwm/default1.png"  data-src="http://via.placeholder.com/100x100"  class="lazy"  " alt="#">
            </a>
            <div class="caption">
                <h3 id="小火柴的蓝色理想">小火柴的蓝色理想</h3>
                <p>好的代码像粥一样，都是用时间熬出来的</p>
                <p>
                    <a href="##" class="btn btn-primary">确认</a>
                    <a href="##" class="btn btn-info">取消</a>
                </p>
            </div> 
        </div>                
    </div>
</div>

For more programming-related knowledge, please visit:

Programming Video

! !

The above is the detailed content of Detailed explanation of thumbnails in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!