EnglishChào mừng bạn đến với series học Bootstrap 5 trên CodeTutHub! Trong bài viết này, chúng ta sẽ khám phá Cards - một thành phần mạnh mẽ và linh hoạt trong Bootstrap. Cards được sử dụng để trình bày nội dung như hình ảnh, văn bản, nút, và các thành phần khác trong một khối thống nhất, đẹp mắt và chuyên nghiệp.
Cards là gì?
Cards trong Bootstrap 5 là một container linh hoạt, thường được sử dụng để hiển thị thông tin ngắn gọn, trực quan như bài viết, sản phẩm, hoặc bất kỳ nội dung nào bạn muốn làm nổi bật. Cards cung cấp một giao diện đẹp mắt với các tùy chỉnh dễ dàng như thêm hình ảnh, tiêu đề, văn bản, nút, và các thành phần khác.
Cấu trúc cơ bản của Card
Cấu trúc cơ bản của một Card bao gồm lớp .card để tạo container, và các lớp con để tổ chức nội dung:
<div class="card" style="width: 18rem;">
<img src="https://codetuthub.com/example/image/300x200.jpg" class="card-img-top" alt="Hình ảnh mẫu">
<div class="card-body">
<h5 class="card-title">Tiêu đề Card</h5>
<p class="card-text">Đây là một đoạn văn ngắn mô tả nội dung của Card.</p>
<a href="#" class="btn btn-primary">Tìm hiểu thêm</a>
</div>
</div>Thêm hình ảnh vào Card
Bạn có thể thêm hình ảnh ở đầu Card bằng lớp .card-img-top hoặc ở dưới cùng bằng .card-img-bottom.
Hình ảnh ở đầu:
<div class="card" style="width: 18rem;">
<img src="https://codetuthub.com/example/image/300x200.jpg" class="card-img-top" alt="Hình ảnh mẫu">
<div class="card-body">
<h5 class="card-title">Tiêu đề Card</h5>
<p class="card-text">Đây là một đoạn văn ngắn mô tả nội dung của Card.</p>
<a href="#" class="btn btn-primary">Tìm hiểu thêm</a>
</div>
</div>
Hình ảnh ở cuối:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Tiêu đề Card</h5>
<p class="card-text">Đây là một đoạn văn ngắn mô tả nội dung của Card.</p>
<a href="#" class="btn btn-primary">Tìm hiểu thêm</a>
</div>
<img src="https://codetuthub.com/example/image/300x200.jpg" class="card-img-bottom" alt="Hình ảnh mẫu">
</div>Card với tiêu đề, nội dung và nút
Card cho phép bạn thêm tiêu đề, phụ đề, và văn bản để cung cấp thông tin rõ ràng:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Tiêu đề Card</h5>
<h6 class="card-subtitle mb-2 text-muted">Phụ đề</h6>
<p class="card-text">Đây là nội dung mô tả card. Bạn có thể thêm bất kỳ nội dung nào tại đây.</p>
<a href="#" class="card-link">Liên kết 1</a>
<a href="#" class="card-link">Liên kết 2</a>
</div>
</div>Card với nền màu
Sử dụng các lớp tiện ích như .bg-primary, .bg-success, hoặc .text-white để tạo nền màu cho Card.
<div class="card bg-primary text-white" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card với nền màu</h5>
<p class="card-text">Card này sử dụng nền màu xanh dương và chữ trắng.</p>
</div>
</div>Card Groups
Bootstrap 5 cung cấp lớp .card-group để nhóm nhiều Card lại với nhau:
<div class="card-group">
<div class="card">
<img src="https://codetuthub.com/example/image/300x200.jpg" class="card-img-top" alt="Hình ảnh 1">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Đây là nội dung của Card 1.</p>
</div>
</div>
<div class="card">
<img src="https://codetuthub.com/example/image/300x200.jpg" class="card-img-top" alt="Hình ảnh 2">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Đây là nội dung của Card 2.</p>
</div>
</div>
<div class="card">
<img src="https://codetuthub.com/example/image/300x200.jpg" class="card-img-top" alt="Hình ảnh 3">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">Đây là nội dung của Card 3.</p>
</div>
</div>
</div>Card xếp chồng (Card Deck)
Lớp .card-deck giúp sắp xếp các Card đều nhau trong một dòng:
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Nội dung card 1.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Nội dung card 2.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">Nội dung card 3.</p>
</div>
</div>
</div>Card với List Group
Bạn có thể kết hợp Cards với List Group để hiển thị danh sách:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Danh sách</h5>
<p class="card-text">Đây là một danh sách trong card.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Danh mục 1</li>
<li class="list-group-item">Danh mục 2</li>
<li class="list-group-item">Danh mục 3</li>
</ul>
</div>Tích hợp JavaScript
Bạn có thể kết hợp Cards với các thành phần JavaScript của Bootstrap như Modal, Collapse, hoặc Carousel để tăng tính tương tác.
Card kết hợp Collapse:
<div class="card">
<div class="card-header">
<a href="#collapseCard" data-bs-toggle="collapse">Mở Card</a>
</div>
<div id="collapseCard" class="collapse">
<div class="card-body">
Đây là nội dung ẩn/hiện của Card.
</div>
</div>
</div>Kết luận
Cards trong Bootstrap 5 là một công cụ mạnh mẽ để tạo các khối nội dung gọn gàng, hấp dẫn. Từ trình bày bài viết, sản phẩm, đến giao diện tùy chỉnh, bạn có thể dễ dàng tích hợp Cards vào bất kỳ dự án nào.
Hãy tiếp tục theo dõi CodeTutHub để khám phá thêm nhiều thành phần thú vị khác trong series học Bootstrap 5. Nếu có thắc mắc hoặc ý kiến đóng góp, đừng ngần ngại để lại bình luận nhé!
Chúc bạn học tốt!
