縮略圖在網站中最常用的地方就是產品列表頁面，一行顯示幾張圖片，有的在圖片底下（左側或右側）帶有標題、描述等信息。Bootstrap框架將這一部獨立成一個模塊組件。并通過“thumbnail”樣式配合bootstrap的網格系統來實現?？梢詫a品列表頁變得更好看。
源碼文件：
? LESS版本：對應文件thumbnails.less
? Sass版本：對應文件_thumbnails.scss
? 編譯后版本：bootstrap.css文件第4402行～第4426行
使用方法：
通過“thumbnail”樣式配合bootstrap的網格系統來實現。
前面也說過了，縮略圖的實現是配合網格系統一起使用，假設我們一個產品列表，如下圖所示：
先來看結構：
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://img1.sycdn.imooc.com//5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
</a>
</div>
…
</div>
</div>
上面的結構表示的是在寬屏幕（可視區域大于768px）的時候，一行顯示四個縮略圖(單擊全屏查看效果)：
在窄屏（可視區域小于768px）的時候，一行只顯示兩個縮略圖：
實現原理：
布局實現的主要是依靠于Bootstrap框架的網格系統，而縮略圖對應的樣式代碼：
/*bootstrap.css文件第4402行～第4426行*/
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
margin-right: auto;
margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
border-color: #428bca;
}
.thumbnail .caption {
padding: 9px;
color: #333;
}
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報