Bootstrap 4 thẻ
thẻ
Một thẻ trong Bootstrap 4 là một hộp có viền với một số phần đệm xung quanh nội dung của nó. Nó bao gồm các tùy chọn cho đầu trang, chân trang, nội dung, màu sắc, v.v.
John Doe
Một số văn bản ví dụ một số văn bản ví dụ. John Doe là một kiến trúc sư và kỹ sư
Xem hồ sơThẻ cơ bản
Một thẻ cơ bản được tạo với .cardlớp và nội dung bên trong thẻ có một .card-bodylớp:
Thí dụ
<div class="card">
<div class="card-body">Basic
card</div>
</div>
Nếu bạn đã quen với Bootstrap 3, thẻ sẽ thay thế các bảng, giếng và hình thu nhỏ cũ.
Đầu trang và cuối trang
Lớp .card-headerthêm tiêu đề vào thẻ và .card-footerlớp thêm chân trang vào thẻ:
Thí dụ
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
Thẻ theo ngữ cảnh
Để thêm màu nền cho thẻ, hãy sử dụng các lớp ngữ cảnh ( .bg-primary,,, và .
.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark.bg-light
Thí dụ
Tiêu đề, văn bản và liên kết
Sử dụng .card-titleđể thêm tiêu đề thẻ vào bất kỳ thành phần tiêu đề nào. Lớp .card-textđược sử dụng để xóa các lề dưới cùng cho phần tử <p> nếu nó là phần tử con cuối cùng (hoặc phần tử duy nhất) bên trong .card-body. Lớp .card-linkthêm màu xanh lam vào bất kỳ liên kết nào và hiệu ứng di chuột.
Thí dụ
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
Hình ảnh thẻ
John Doe
Một số văn bản ví dụ một số văn bản ví dụ. John Doe là một kiến trúc sư và kỹ sư
Xem hồ sơ
Thêm .card-img-tophoặc .card-img-bottomvào một
<img>để đặt hình ảnh ở trên cùng hoặc ở dưới cùng bên trong thẻ. Lưu ý rằng chúng tôi đã thêm hình ảnh bên ngoài .card-bodyđể kéo dài toàn bộ chiều rộng:
Thí dụ
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Liên kết kéo dài
Thêm .stretched-linklớp vào một liên kết bên trong thẻ và nó sẽ làm cho toàn bộ thẻ có thể nhấp vào và có thể di chuyển được (thẻ sẽ hoạt động như một liên kết):
John Doe
Một số văn bản ví dụ một số văn bản ví dụ. John Doe là một kiến trúc sư và kỹ sư
Xem hồ sơThí dụ
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
Lớp phủ hình ảnh thẻ
Biến hình ảnh thành nền thẻ và sử dụng .card-img-overlay
để thêm văn bản lên đầu hình ảnh:
Thí dụ
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Cột thẻ
Một số văn bản bên trong thẻ đầu tiên
Một số văn bản bên trong thẻ thứ hai
Một số văn bản bên trong thẻ thứ ba
Một số văn bản bên trong thẻ thứ tư
Một số văn bản bên trong thẻ thứ năm
Một số văn bản bên trong thẻ thứ sáu
Lớp .card-columnstạo ra một lưới thẻ giống như khối xây (như pinterest). Bố cục sẽ tự động điều chỉnh khi bạn chèn nhiều thẻ hơn.
Lưu ý: Các thẻ được hiển thị theo chiều dọc trên màn hình nhỏ (nhỏ hơn 576px):
Thí dụ
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
Bộ bài
Một số văn bản bên trong thẻ đầu tiên
Thêm một số văn bản để tăng chiều cao
Thêm một số văn bản để tăng chiều cao
Thêm một số văn bản để tăng chiều cao
Một số văn bản bên trong thẻ thứ hai
Một số văn bản bên trong thẻ thứ ba
Một số văn bản bên trong thẻ thứ tư
Lớp .card-decktạo ra một lưới các thẻ có chiều cao và chiều rộng bằng nhau . Bố cục sẽ tự động điều chỉnh khi bạn chèn nhiều thẻ hơn.
Lưu ý: Các thẻ được hiển thị theo chiều dọc trên màn hình nhỏ (nhỏ hơn 576px):
Thí dụ
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
Nhóm thẻ
Một số văn bản bên trong thẻ đầu tiên
Thêm một số văn bản để tăng chiều cao
Thêm một số văn bản để tăng chiều cao
Thêm một số văn bản để tăng chiều cao
Một số văn bản bên trong thẻ thứ hai
Một số văn bản bên trong thẻ thứ ba
Một số văn bản bên trong thẻ thứ tư
Lớp .card-grouptương tự như .card-deck. Sự khác biệt duy nhất là .card-grouplớp loại bỏ lề trái và lề phải giữa mỗi thẻ.
Lưu ý: Các thẻ được hiển thị theo chiều dọc trên màn hình nhỏ (nhỏ hơn 576px), VỚI lề trên và dưới:
Thí dụ
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>