Bootstrap 5 thẻ
thẻ
Thẻ trong Bootstrap 5 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 :
Đầ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ử »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ử »Bạn có biết không?
W3.CSS là một sự thay thế tuyệt vời cho Bootstrap 5.
W3.CSS nhỏ hơn, nhanh hơn và dễ sử dụng hơn.
Nếu bạn muốn tìm hiểu W3.CSS, hãy truy cập Hướng dẫn W3.CSS của chúng tôi.
