Bootstrap缩略图样式使用方法

yibin 2015-09-18 网站运营 574

每个网站都会有很多图片引入,类似文章配图等,倘若你想要在项目中引入缩略图样式,不妨试试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缩略图主要是单张图片的情况,该图片往往都占据了整个父容器的宽度。


写在文章最后

缩略图在网站建设项目中使用的点有很多,包括文章特色图像、作者简介产品简介等,按照以上的编码方式,能够节约不少编码时间,赶紧来试试吧。


扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询