Bootstrap: Thumbnail
Mở rộng hệ thống lưới của Bootstrap với thành phần thumbnail để dễ dàng hiển thị lưới các ảnh, video, text, và còn hơn thế nữa.
Ví dụ cơ bản
Mặc định, thumbnail của Bootstrap được thiết kế để hiển thị các ảnh có liên kết bằng một chút markup.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="...">
</a>
</div>
...
</div>
Tùy biến nội dung
Bạn có thể thêm bất kỳ loại nội dung dạng HTML nào như tiêu đề, đoạn văn, các nút... vào trong thumbnail bằng cách bổ sung thêm một chút markup nữa.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/300x200" 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>