知识点
默认展示带链接的图片。
如果你想实现一个类似 Pinterest 的页面效果（不同高度和/宽度的缩略图顺序排列）的话，你需要使用一个第三方插件。
创建步骤：
- 在图像周围添加带有 class
.thumbnail的<a>标签。 - 这会添加四个像素的内边距（padding）和一个灰色的边框。
- 当鼠标悬停在图像上时，会动画显示出图像的轮廓。
实践
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>组件-缩略图</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style>
<!--
.line{border-top:1px solid #afd9ee;margin:20px 0;}
-->
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4">
<a href="#" class="thumbnail"></a><!--默认的缩略图 thumbnail包裹-->
</div>
<div class="col-lg-4">
<a href="#" class="thumbnail"></a>
</div>
<div class="col-lg-4">
<a href="#" class="thumbnail"></a>
</div>
</div>
<div class="line"></div>
<!--自定义-->
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<div class="caption"><!--caption-->
<h3>缩略图标签</h3>
<p>文本</p>
<p><a href="#" class="btn btn-primary" role="button">按钮</a></p>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<div class="caption"><!--caption-->
<h3>缩略图标签</h3>
<p>文本</p>
<p><a href="#" class="btn btn-primary" role="button">按钮</a></p>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<div class="caption"><!--caption-->
<h3>缩略图标签</h3>
<p>文本</p>
<p><a href="#" class="btn btn-primary" role="button">按钮</a></p>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<div class="caption"><!--caption-->
<h3>缩略图标签</h3>
<p>文本</p>
<p><a href="#" class="btn btn-primary" role="button">按钮</a></p>
</div>
</div>
</div>
</div>
<div class="line"></div>
</div>
</body>
</html>
网友评论