发布于 2016-11-25 14:44:00 | 81 次阅读 | 评论: 0 | 来源: 网络整理
在本教程中，您将看到如何使用 Bootstrap 创建缩略图，即图像、录像、文本的网格。
缩略图有一个简单而又灵活的标记。同时，您可以使用已有的 bootstrap css class 比如 .span2 或 .span3 来设置缩略图的宽度和高度。
当在 Web 中创建用户经历，您通常需要创建一个图像或录像的网格。一个很好的例子就是需要展示产品图片的公司网站，这个时候，可能会用到缩略图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of using default thumbnails from phperz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Example of using default thumbnails from phperz.com">
<meta name="author" content="">
<!-- Le styles -->
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico">
<link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
</head>
<body>
<div class="container">
<ul class="thumbnails">
<li class="span3">
<a href="http://www.phperz.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="http://www.phperz.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="http://www.phperz.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 -->
</body>
</html>
您可以定制默认的缩略图，并添加段落、标题列表或者其他类型的 HTML 内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of thumbnails customized from phperz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Example of thumbnails customized from phperz.com">
<meta name="author" content="">
<!-- Le styles -->
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico">
<link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
</head>
<body>
<div class="container">
<ul class="thumbnails">
<li class="span5">
<div class="thumbnail">
<img src="../bootstrap/shoes1.jpg" alt="product 1">
<div class="caption">
<h5>Product detail</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-success">Buy</a> <a href="#" class="btn btn-warning">Try</a></p>
</div>
</div>
</li>
<li class="span5">
<div class="thumbnail">
<img src="../bootstrap/shoes2.jpg" alt="product 2">
<div class="caption">
<h5>Product detail</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-success">Buy</a> <a href="#" class="btn btn-warning">Try</a></p>
</div>
</div>
</li>
</ul>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div> <!-- /container -->
</body>
</html>