Bootstrap 5 thẻ

thẻ

Bootstrap 5 có thẻ là các khung có viền, nội dung xung quanh có một số lề trong. Nó bao gồm tiêu đề, cuối trang, nội dung, màu sắc và các tùy chọn khác.

thẻ cơ bản

Một thẻ cơ bản là được tạo ra bởi .card lớp được tạo ra, nội dung trong thẻ có một .card-body lớp:

Mô hình

<div class="card">
  <div class="card-body">thẻ cơ bản</div>
</div>

Thử ngay

đầu trang và cuối trang

.card-header thêm tiêu đề cho thẻ bằng lớp:.card-footer thêm cuối trang cho thẻ bằng lớp:

Mô hình

<div class="card">
  <div class="card-header">đầu trang</div>
  <div class="card-body">nội dung</div>
  <div class="card-footer">mở đầu trang</div>
</div>

Thử ngay

thẻ ngữ cảnh

Nếu cần thêm màu nền cho thẻ, hãy sử dụng lớp ngữ cảnh sau:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Mô hình

Thử ngay

tiêu đề, văn bản và liên kết

xin hãy sử dụng .card-title thêm tiêu đề thẻ vào bất kỳ phần tiêu đề nào. Nếu <p> thành phần là .card-body thành phần con cuối cùng (hoặc duy nhất một thành phần con) của .card-text Loại bỏ <p> margint底部 của phần tử..card-link Thêm hiệu ứng màu xanh và trôi chảy cho liên kết tùy ý.

Mô hình

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Tiêu đề thẻ</h4>
    <p class="card-text">Một số văn bản mẫu. Một số văn bản mẫu.</p>
    <a href="#" class="card-link">Liên kết thẻ</a>
    <a href="#" class="card-link">Liên kết khác</a>
  </div>
</div>

Thử ngay

hình ảnh thẻ

Chuyển .card-img-top hoặc .card-img-bottom Thêm vào <img>cũng có thể đặt hình ảnh ở trên hoặc dưới thẻ.

Lưu ý, chúng ta đã thêm hình ảnh ngoài .card-body để chiếm toàn bộ chiều rộng:

Mô hình

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Hình ảnh thẻ">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates là một nhà lập trình và kỹ sư. Một số văn bản mẫu. Một số văn bản mẫu.</p>
    <a href="#" class="btn btn-primary">Xem hồ sơ cá nhân</a>
  </div>
</div>

Thử ngay

Hình ảnh chồng thẻ

Chuyển hình ảnh thành nền thẻ và sử dụng .card-img-overlay Thêm văn bản ở trên hình ảnh:

Mô hình

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Hình ảnh thẻ">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Một số văn bản mẫu. Một số văn bản mẫu.</p>
    <a href="#" class="btn btn-primary">Xem hồ sơ cá nhân</a>
  </div>
</div>

Thử ngay