每个网站都会有很多图片引入,类似文章配图等,倘若你想要在项目中引入缩略图样式,不妨试试Bootstrap缩略图样式的使用,和Bootstrap栅格系统结合起来使用,会有意想不到的效果。
默认Bootstrap缩略图样式
因为缩略图可能要牵涉到链接,所以需要在图片外面加入一个a标签,缩略图样式直接写入这个a标签即可,使用起来非常方便: <a href="#" class="thumbnail">
<img src="/imgs/test.jpg" alt="Bootstrap缩略图样式">
</a>
通过对a标签引入thumbnail样式,就可以实现Bootstrap缩略图的样式,而且hover还有对应的交互效果,非常不错,另外,为了符合SEO搜索引擎优化原则,你需要在img中添加alt属性。
自定义缩略图内容
知道如何调用缩略图样式之后,我们就可以将缩略图与其他HTML元素相互结合。
例如我们可以将缩略图和栅格布局相结合,再加上一定的排版和按钮元素,就能够实现例如作者介绍之类的功能:<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="/images/author.jpg" alt="专栏作者">
<div class="caption">
<h3>本杰明</h3>
<p>本杰明是我们的特邀作者</p>
<p>
<a href="#" class="btn btn-primary" role="button">关注</a>
<a href="#" class="btn btn-success" role="button">联系</a>
</p>
</div>
</div>
</div>
</div>
Bootstrap缩略图样式与图片样式的区别
在前面一篇Bootstrap图片样式中,我们也提到了其中一种样式img-thumbnail,那么它们之间有什么区别呢?
最大的区别在于它们的display样式不同,img-thumbnail主要是inline-block,所以能够与其他图片在同一个容器平行排列,更加适合多图片的情况。
而Bootstrap缩略图主要是单张图片的情况,该图片往往都占据了整个父容器的宽度。
写在文章最后
缩略图在网站建设项目中使用的点有很多,包括文章特色图像、作者简介、产品简介等,按照以上的编码方式,能够节约不少编码时间,赶紧来试试吧。
发表回复