縮略圖在網(wǎng)站中最常用的地方就是產(chǎn)品列表頁面，一行顯示幾張圖片，有的在圖片底下（左側(cè)或右側(cè)）帶有標(biāo)題、描述等信息。Bootstrap框架將這一部獨(dú)立成一個(gè)模塊組件。并通過“thumbnail”樣式配合bootstrap的網(wǎng)格系統(tǒng)來實(shí)現(xiàn)。可以將產(chǎn)品列表頁變得更好看。

源碼文件：

  ?  LESS版本：對(duì)應(yīng)文件thumbnails.less

  ?  Sass版本：對(duì)應(yīng)文件_thumbnails.scss

  ? 編譯后版本：bootstrap.css文件第4402行～第4426行

使用方法：

通過“thumbnail”樣式配合bootstrap的網(wǎng)格系統(tǒng)來實(shí)現(xiàn)。

前面也說過了，縮略圖的實(shí)現(xiàn)是配合網(wǎng)格系統(tǒng)一起使用，假設(shè)我們一個(gè)產(chǎn)品列表，如下圖所示：

先來看結(jié)構(gòu)：

<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>

上面的結(jié)構(gòu)表示的是在寬屏幕（可視區(qū)域大于768px）的時(shí)候，一行顯示四個(gè)縮略圖(單擊全屏查看效果)：

在窄屏（可視區(qū)域小于768px）的時(shí)候，一行只顯示兩個(gè)縮略圖：

實(shí)現(xiàn)原理：

布局實(shí)現(xiàn)的主要是依靠于Bootstrap框架的網(wǎng)格系統(tǒng)，而縮略圖對(duì)應(yīng)的樣式代碼：

/*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;
}