## 縮略圖 縮略圖用于給圖片、視頻、文本等加入柵格功能，很適合以網格形式展示圖片、視頻、商品列表等。默認的縮略圖非常簡單，只需把圖片放在 class="thumbnail" 的 a 標簽中即可。 **默認樣式的實例** Boostrap 縮略圖的默認設計僅需最少的標簽就能展示帶鏈接的圖片。 單張圖片縮略圖如下： ```html <a href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> </a> ``` 多張圖片縮略圖如下（結合柵格系統）： ```html <div class="row"> <div class="col-xs-6 col-md-3"> <a href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> </a> </div> <div class="col-xs-6 col-md-3"> <a href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> </a> </div> <div class="col-xs-6 col-md-3"> <a href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> </a> </div> <div class="col-xs-6 col-md-3"> <a href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> </a> </div> </div> ```  ***** **自定義內容** 如果要在縮略圖中自定義HTML內容，如添加標題、段落、按鈕等，也很簡單，只需把上述的 a 替換成 div 就行了。 ```html <div class="row"> <div class="col-xs-6 col-md-3"> <div href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> <div class="caption"> <h3>標題</h3> <p>圖片描述</p> <p><a href="##" class="btn btn-default" role="button">了解更多>></a></p> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> <div class="caption"> <h3>標題</h3> <p>圖片描述</p> <p><a href="##" class="btn btn-default" role="button">了解更多>></a></p> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> <div class="caption"> <h3>標題</h3> <p>圖片描述</p> <p><a href="##" class="btn btn-default" role="button">了解更多>></a></p> </div> </div> </div> <div class="col-xs-6 col-md-3"> <div href="##" class="thumbnail"> <img src='../img/timg.jpg' alt=""/> <div class="caption"> <h3>標題</h3> <p>圖片描述</p> <p><a href="##" class="btn btn-default" role="button">了解更多>></a></p> </div> </div> </div> </div> ```  **注意：** 縮略圖類會隨著屏幕拉動改變圖片的大小，更好的展示在頁面中。