天天看点

BootStrap中的缩略图

BootStrap中的缩略图

将图片元素包裹在带有.thumbnail类的链接< a >元素中即可以创建一个缩略图。缩略图会添加四个像素的内边距(padding)和一个灰色的边框,当鼠标悬停在图像上时会动画显示出图像的轮廓。

代码如下:

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-4">
    <a href="#" class="thumbnail"><img src="img/11.jpg" /></a>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4">
    <a href="#" class="thumbnail"><img src="img/12.jpg" /></a>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-4">
    <a href="#" class="thumbnail"><img src="img/13.jpg" /></a>
  </div>
</div>      

效果如下:

<img src="img/pic.jpg" alt="圆角" class="img-rounded" />
<img src="img/pic.jpg" alt="圆形" class="img-circle" />
<img src="img/pic.jpg" alt="缩略图样式" class="img-thumbnail" />