Trong Bootstrap 4 chúng ta sẽ được làm quen với một phần tử chứa mới có tên là Card dùng thay thế cho các thành phần Panel, Well và Thumbnail cũ. Card trong Bootstrap 4 bao gồm các tùy chọn cho header và footer, mở rộng nội dung, màu nền theo ngữ cảnh và các tùy chọn hiển thị mạnh mẽ hơn. Trong bài này chúng ta sẽ từng bước nghiên cứu về Card trong Bootstrap 4 bạn nhé!
1. Card trong Bootstrap 4
Bootstrap 4 sử dụng lớp .card tạo ra các box chứa nội dung có đa dạng có thể tùy biến. Card là phần tử có khả năng tùy biến mềm dẻo, dễ mở rộng để chứa các nội dung khác nhau, nó cung cấp tùy chọn tiêu phần header, footer riêng, thiết lập màu sắc nền, màu chữ riêng ...
1.1 Tạo Card cơ bản
Một thẻ (Card) cơ bản được tạo bằng lớp .card và nội dung bên trong thẻ có lớp .card-body:
Ví dụ
<div class="card"> <div class="card-body">Basic Card</div> </div>
1.2 Lớp Header và Footer trong Card
Bootstrap 4 sử sụng lớp .card-header để thêm tiêu đề và lớp .card-footer thêm phần chân trang vào Card.
Ví dụ:
<div class="card"> <div class="card-header">Header</div> <div class="card-body">Content</div> <div class="card-footer">Footer</div> </div>
1.3 Card theo ngữ cảnh ( Đặt màu nền cho Card)
Để thêm màu nền cho Card, chúng ta sử dụng các lớp ngữ cảnh (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, .bg-light)
Ví dụ:
<div class="container"> <h2>Cards with Contextual Classes</h2> <div class="card"> <div class="card-body">Basic card</div> </div> <br> <div class="card bg-primary text-white"> <div class="card-body">Primary card</div> </div> <br> <div class="card bg-success text-white"> <div class="card-body">Success card</div> </div> <br> <div class="card bg-info text-white"> <div class="card-body">Info card</div> </div> <br> <div class="card bg-warning text-white"> <div class="card-body">Warning card</div> </div> <br> <div class="card bg-danger text-white"> <div class="card-body">Danger card</div> </div> <br> <div class="card bg-secondary text-white"> <div class="card-body">Secondary card</div> </div> <br> <div class="card bg-dark text-white"> <div class="card-body">Dark card</div> </div> <br> <div class="card bg-light text-dark"> <div class="card-body">Light card</div> </div> </div>
1.4 Tiêu đề, văn bản và liên kết trong Card
Sử dụng .card-title để thêm tiêu đề Card vào bất kỳ phần tử 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-link thêm màu xanh lam vào bất kỳ liên kết nào.
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>
1.5 Chèn ảnh vào Card
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 Card. Để ảnh kéo dài toàn bộ chiều rộng thẻ chúng ta cần chèn ảnh bên ngoài .card-body.
<div class="container"> <h2>Card Hình Ảnh</h2> <p>Hình ảnh trên cùng (card-img-top):</p> <div class="card" style="width:400px"> <img class="card-img-top" src="cuccc.jpg" alt="Card image" style="width:100%"> <div class="card-body"> <h4 class="card-title">Cuc Tinh Y</h4> <p class="card-text">Cuc Tinh Y kute xinh dep vai chuong</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div> <br> <p>Hình ảnh dưới cùng (card-img-bottom):</p> <div class="card" style="width:400px"> <div class="card-body"> <h4 class="card-title">Luna</h4> <p class="card-text">Girl xinh nhac Han Quoc</p> <a href="#" class="btn btn-primary">See Profile</a> </div> <img class="card-img-bottom" src="gx1.jpg" alt="Card image" style="width:100%"> </div> </div>
1.6 Stretched Link ( Card hoạt động như link)
Thêm lớp .stretched-link vào một liên kết bên trong Card và nó sẽ làm cho toàn bộ Card có thể nhấp và có thể lưu được (thẻ sẽ hoạt động như một liên kết):
<div class="card" style="width:400px"> <img class="card-img-top" src="cuccc.jpg" alt="Card image" style="width:100%"> <div class="card-body"> <h4 class="card-title">Cuc Tinh Y</h4> <p class="card-text">Cuc Tinh Y kute xinh dep vai chuong</p> <a href="#" class="btn btn-primary stretched-link">See Profile</a> </div> </div>
1.7 Card Image Overlays ( Sử Dụng Hình Ảnh Làm Nền Background Cho Card)
Chúng ta có thể chuyển hình ảnh thành nền của Card và sử dụng lớp .card-img-overlay để thêm văn bản lên đầu hình ảnh:
Ví dụ:
<div class="card" style="width:400px"> <img class="card-img-top" src="cuccc.jpg" alt="Card image" style="width:100%"> <div class="card-img-overlay"> <h4 class="card-title">Cuc Tinh Y</h4> <p class="card-text">Cuc Tinh Y kute xinh dep vai chuong</p> <a href="#" class="btn btn-primary stretched-link">See Profile</a> </div> </div>
2. Các Layout Card trong Bootstrap 4
2.1 Card columns
Lớp .card-columns sẽ giúp ta tạo ra 1 layout theo kiểu Masonry layout (như pinterest). Ưu điểm của masonry layout là nó thể hiện được nhiều hình ảnh với kích cỡ khác nhau mà không tạo ra sự lộn xộn đối với người xem.
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í 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>
2.2 Card Deck Trong Bootstrap 4
Lớp .card-deck tạo ra một mạng 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):
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>
2.3 Card Group
Lớp .card-group tương tự như .card-deck. Sự 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 Card, tức là các Card sẽ dính liền nhau.
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:
<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>
3. Kết luận
Với Card trong Bootstrap 4 chúng ta có thể tạo ra một layout web hiện đại mà không cần đi quá sâu vào tìm hiểu CSS. Card trong Bootstrap 4 có khá nhiều lớp tùy chọn và tùy biến để chúng ta trình bày nội dung 1 cách đẹp đẽ hơn. Chúc các bạn thành công!
