Bootstrap 缩略图
简介
在本教程中，您将看到如何使用 Bootstrap 创建缩略图，即图像、录像、文本的网格。
缩略图有一个简单而又灵活的标记。同时，您可以使用已有的 bootstrap css class 比如 .span2 或 .span3 来设置缩略图的宽度和高度。
为什么使用缩略图
当在 Web 中创建用户经历，您通常需要创建一个图像或录像的网格。一个很好的例子就是需要展示产品图片的公司网站，这个时候，可能会用到缩略图。
使用默认缩略图实例
实例
<div class="container">
<ul class="thumbnails">
<li class="span3">
<a href="//www.NowJava.com/php/php-tutorial.html" class="thumbnail">
<img src="../bootstrap/php-thumb.png" alt="php tutorial" width="260" height="180" />
</a>
</li>
<li class="span4">
<a href="//www.NowJava.com/sql/sql-tutorial.html" class="thumbnail">
<img src="../bootstrap/mysql-thumb.png" alt="mysql tutorial" width="300" height="180" />
</a>
</li>
<li class="span5">
<a href="//www.NowJava.com/js/js-tutorial.html" class="thumbnail">
<img src="../bootstrap/js-thumb.png" alt="js tutorial" width="380" height="180" >
</a>
</li>
</ul>
<hr>
</div> <!-- /container -->
<ul class="thumbnails">
<li class="span3">
<a href="//www.NowJava.com/php/php-tutorial.html" class="thumbnail">
<img src="../bootstrap/php-thumb.png" alt="php tutorial" width="260" height="180" />
</a>
</li>
<li class="span4">
<a href="//www.NowJava.com/sql/sql-tutorial.html" class="thumbnail">
<img src="../bootstrap/mysql-thumb.png" alt="mysql tutorial" width="300" height="180" />
</a>
</li>
<li class="span5">
<a href="//www.NowJava.com/js/js-tutorial.html" class="thumbnail">
<img src="../bootstrap/js-thumb.png" alt="js tutorial" width="380" height="180" >
</a>
</li>
</ul>
<hr>
</div> <!-- /container -->
在线查看实例
您可以定制默认的缩略图，并添加段落、标题列表或者其他类型的 HTML 内容。