Bootstrap thumbnails


May 04, 2021 08:00 Bootstrap


Table of contents


Bootstrap thumbnails

This chapter explains Bootstrap thumbnails. M ost sites need to lay out images, videos, text, and so on in the grid. B ootstrap provides an easy way to do this with thumbnails. Here's how to create a thumbnail with Bootstrap:

  • Add a label with class .thumbnail around the image.

  • This adds a four-pixel padding margin and a gray border.

  • When you hover over an image, the outline of the image is animated.

The following example demonstrates the default thumbnail:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 缩略图</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow" ></script></head><body><div class="row">
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="/wp-content/uploads/2014/06/kittens.jpg" 
         alt="通用的占位符缩略图">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="/wp-content/uploads/2014/06/kittens.jpg" 
         alt="通用的占位符缩略图">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="/wp-content/uploads/2014/06/kittens.jpg" 
         alt="通用的占位符缩略图">
      </a>
   </div>
   <div class="col-sm-6 col-md-3">
      <a href="#" class="thumbnail">
         <img src="/wp-content/uploads/2014/06/kittens.jpg" 
         alt="通用的占位符缩略图">
      </a>
   </div></div></body></html>

The result is as follows:

Bootstrap thumbnails

Add custom content

Now that we have a basic thumbnail, we can add various HTML content to the thumbnail, such as a title, paragraph, or button. Here are the steps:

  • Replace the label with class .thumbnail with the hashtag slt;div.

  • You can add anything you want to add within the . Since this is a slt;div,, we can use the default span-based naming rules to resize.

  • If you want to group multiple images, place them in a disordered list, and each list item floats to the left.

The following example demonstrates this:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 自定义缩略图</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow" ></script></head><body><div class="row">
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="/wp-content/uploads/2014/06/kittens.jpg" 
         alt="通用的占位符缩略图">
      </div>
      <div class="caption">
         <h3>缩略图标签</h3>
         <p>一些示例文本。一些示例文本。</p>
         <p>
            <a href="#" class="btn btn-primary" role="button">
               按钮            </a> 
            <a href="#" class="btn btn-default" role="button">
               按钮            </a>
         </p>
      </div>
   </div>
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="/wp-content/uploads/2014/06/kittens.jpg" 
         alt="通用的占位符缩略图">
      </div>
      <div class="caption">
         <h3>缩略图标签</h3>
         <p>一些示例文本。一些示例文本。</p>
         <p>
            <a href="#" class="btn btn-primary" role="button">
               按钮            </a> 
            <a href="#" class="btn btn-default" role="button">
               按钮            </a>
         </p>
      </div>
   </div>
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="/wp-content/uploads/2014/06/kittens.jpg" 
         alt="通用的占位符缩略图">
      </div>
      <div class="caption">
         <h3>缩略图标签</h3>
         <p>一些示例文本。一些示例文本。</p>
         <p>
            <a href="#" class="btn btn-primary" role="button">
               按钮            </a> 
            <a href="#" class="btn btn-default" role="button">
               按钮            </a>
         </p>
      </div>
   </div>
   <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
         <img src="/wp-content/uploads/2014/06/kittens.jpg" 
         alt="通用的占位符缩略图">
      </div>
      <div class="caption">
         <h3>缩略图标签</h3>
         <p>一些示例文本。一些示例文本。</p>
         <p>
            <a href="#" class="btn btn-primary" role="button">
               按钮            </a> 
            <a href="#" class="btn btn-default" role="button">
               按钮            </a>
         </p>
      </div>
   </div></div></body></html>

The result is as follows:

Bootstrap thumbnails