缩略图thumbnail

在菜鸟教程学bootstrap的时候，遇见缩略图，练习学习一下。以下是菜鸟教程的链接:

http://www.runoob.com/bootstrap/bootstrap-thumbnails.html

缩略图thumbnail的用法很简单只需要一个a标签和一个thumbnail的类名即可，如下：

普通文字：

<a href="#"class="thumbnail">文字</a>

图片：

<a href="#" class="thumbnail">
<img src="img/123.jpg" alt="Cannot load picture.">
</a>

当然也可以是视频等

也可以是在自定义的div标签的class设置为"thumbnail"来包含文字，图片，视频等实现缩略图

重点要讲的内容是排列问题。

当图片大小比窗口尺寸小的时候 ，缩略图就会显示整行。解决方法就是利用栅格系统，col-xs-*,col-sm-*,col-md-*,col-lg-*等是可以对网页尺寸进行排版的。默认一行有12格，只要*小于12就可以设定缩略图的大小。不过会存在一个问题，有可能缩略图虽然不是填充整行，但是比实际图像大一圈，怎么解决呢？就是调整*的数值，使之小于图像实际所占用的尺寸，这个时候缩略图就会完美包含图片，只不过图片会适当的缩小，大小就是所设定的*的与12相比的比例大小

<div class="col-lg-*">

*****文字，图片，视频等标签*****

</div>