Bootstrap thumbnails
May 04, 2021 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:
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:
