知識點(diǎn)
默認(rèn)展示帶鏈接的圖片名惩。
如果你想實(shí)現(xiàn)一個類似 Pinterest 的頁面效果（不同高度和/寬度的縮略圖順序排列）的話泌绣，你需要使用一個第三方插件钮追。
創(chuàng)建步驟：
- 在圖像周圍添加帶有 class
.thumbnail的<a>標(biāo)簽。 - 這會添加四個像素的內(nèi)邊距（padding）和一個灰色的邊框阿迈。
- 當(dāng)鼠標(biāo)懸停在圖像上時元媚，會動畫顯示出圖像的輪廓。
實(shí)踐
<!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><!--默認(rèn)的縮略圖 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>縮略圖標(biāo)簽</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>縮略圖標(biāo)簽</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>縮略圖標(biāo)簽</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>縮略圖標(biāo)簽</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>
