Thẻ Bootstrap 4
thẻ
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 bằng lớp .card
và nội dung bên trong thẻ có lớp .card-body
:
Nếu bạn đã quen thuộc với Bootstrap 3, các 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-header
thêm tiêu đề vào thẻ và lớp .card-footer
thêm chân trang vào thẻ:
Ví dụ
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
Hãy tự mình thử »Thẻ theo ngữ cảnh
Để thêm màu nền cho thẻ, hãy sử dụng các lớp theo ngữ cảnh ( .bg-primary
, .bg-success
, .bg-info
, .bg-warning
, .bg-danger
, .bg-secondary
, .bg-dark
và .bg-light
.
Ví 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 để loại bỏ lề dưới 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-link
thêm màu xanh lam vào bất kỳ liên kết nào và hiệu ứng di chuột.
Ví 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ãy tự mình thử »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-top
hoặc .card-img-bottom
vào <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
để trải rộng toàn bộ chiều rộng:
Ví 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>
Hãy tự mình thử »Liên kết kéo dài
Thêm lớp .stretched-link
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à di chuột đượ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ơ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 trên hình ảnh:
Ví 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>
Hãy tự mình thử »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-columns
tạo ra một lưới các 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 thêm thẻ.
Lưu ý: Các thẻ được hiển thị theo chiều dọc trên màn hình nhỏ (dưới 576px):
Ví 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>
Hãy tự mình thử »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-deck
tạo ra một lưới các lá bài 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 thêm thẻ.
Lưu ý: Các thẻ được hiển thị theo chiều dọc trên màn hình nhỏ (dưới 576px):
Ví 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>
Hãy tự mình thử »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-group
tương tự như .card-deck
. Điểm khác biệt duy nhất là lớp .card-group
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ỏ (dưới 576px), CÓ lề trên và dưới:
Ví 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>
Hãy tự mình thử »