Bootstrap缩略图.thumbnail
作者:互联网
缩略图
缩略图是对Bootstrap栅格系统的扩展,将图片、视频、文本等加入到缩略图中,就可以很容易地以网格形式展示图片、视频、商品列表等。
默认缩略图
Boostrap中的默认缩略图设计非常简单,只需把图片、视频、文本等放入 .thumbnail
的 <a>
标签中,就能展示带链接的图片。如:
<a href="#" class="thumbnail">
<img src="img/cat.jpg">
</a>
Bootstrap会给图片加上 4 像素的内边距和一个灰色边框。而且,鼠标悬停时,图片四周还会出现动态光晕。效果如图 3‑69所示:
图3-69 默认缩略图
自定义缩略图
缩略图的扩展性也非常好,只需添加一点点额外的标签,就可以把任何类型的 HTML 内容,如标题、段落或按钮,加入缩略图组件中。
在定义稍微复杂的缩略图时,需要把标题、段落或按钮等内容让在一个 .caption
的容器中,再把它和图片、视频等统统放入 .thumbnail
的容器中即可。如:
<div class="thumbnail">
<img src="img/cat.jpg">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac ... ut id elit.</p>
<p>
<a href="#" class="btn btn-primary">Button</a>
<a href="#" class="btn btn-default">Button</a>
</p>
</div>
</div>
效果如图 3‑70所示:
图3-70 自定义缩略图
缩略图列表
要定义缩略图的列表,也很简单,你只需将一系列的缩略图放入Bootstrap的网格系统中即可。如:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
...
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
...
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
...
</div>
</div>
</div>
效果如图 3‑71所示:
图3-71 缩略图列表
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
标签:...,缩略图,Bootstrap,HTML,thumbnail,图片 来源: https://blog.csdn.net/ixygj197875/article/details/90446303