Bootstrap - Hình thu nhỏ
Chương này thảo luận về hình thu nhỏ Bootstrap. Rất nhiều trang web cần một cách để bố trí hình ảnh, video, văn bản, v.v., trong một lưới và Bootstrap có một cách dễ dàng để làm điều này với hình thu nhỏ. Để tạo hình thu nhỏ bằng Bootstrap -
Thêm thẻ <a> với lớp .thumbnail xung quanh một hình ảnh.
Điều này thêm bốn pixel đệm và một đường viền màu xám.
Khi di chuột, một ánh sáng động sẽ phác thảo hình ảnh.
Ví dụ sau minh họa một hình thu nhỏ mặc định:
<div class = "row">
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
</div>
Thêm nội dung tùy chỉnh
Bây giờ chúng ta đã có một hình thu nhỏ cơ bản, bạn có thể thêm bất kỳ loại nội dung HTML nào như tiêu đề, đoạn văn hoặc các nút vào hình thu nhỏ. Làm theo các bước bên dưới -
Thay đổi thẻ <a> có loại .thumbnail thành một <div>.
Bên trong <div> đó, bạn có thể thêm bất cứ thứ gì bạn cần. Vì đây là <div>, chúng ta có thể sử dụng quy ước đặt tên dựa trên nhịp mặc định để định kích thước.
Nếu bạn muốn nhóm nhiều hình ảnh, hãy đặt chúng vào một danh sách không có thứ tự và mỗi mục danh sách sẽ được chuyển sang bên trái.
Ví dụ sau đây chứng minh điều này -
<div class = "row">
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</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 class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</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 class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</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 class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</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>