通過縮略圖組件擴(kuò)展 Bootstrap 的 柵格系統(tǒng),可以很容易地展示柵格樣式的圖像、視頻、文本等內(nèi)容。
如果你想實(shí)現(xiàn)一個類似 Pinterest 的頁面效果(不同高度和/寬度的縮略圖順序排列)的話,你需要使用一個第三方插件,比如 Masonry、Isotope 或 Salvattore。
Boostrap 縮略圖的默認(rèn)設(shè)計僅需最少的標(biāo)簽就能展示帶鏈接的圖片。
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
添加一點(diǎn)點(diǎn)額外的標(biāo)簽,就可以把任何類型的 HTML 內(nèi)容,例如標(biāo)題、段落或按鈕,加入縮略圖組件內(nèi)。
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>