Card trong Bootstrap 4
Card trong bootstrap 4 chưa hề có trong Bootstrap 3 và thường được sử dụng khi làm những khối giao diện có cả ảnh, tiêu đề, tiêu đề phụ và nội dung mô tả. Vì thế bootstrap card khá thuận tiện trong một vài trường hợp xử lý. Giờ chúng ta hãy cùng nhau thử nghiệm class mới này nhé.
Sử dụng Bootstrap Card
Các thành phần cơ bản cấu thành nên một Card:
-
Tạo thẻ
<div>
có class làcard
làm thẻ bao ngoài -
Sử dụng class
card-img-top
với thẻ<img>
để thêm ảnh vào phần đầu của card. -
Thêm class
card-body
để định nghĩa phần body -
Sử dụng
card-title
vàcard-subtitle
để thêm tiêu đề và phụ đề -
Sử dụng
card-text
với thẻ<p>
để thêm nội dung
Như các bạn đã thấy, Card đang hiển thị trên toàn bộ <div>
bao nó.
Nếu muốn lấy ảnh làm background và hiển thị chữ trên ảnh, các bạn chỉ cần đổi class card-body
thành card-img-overlay
.
Hoặc nếu muốn hiển thị thêm ảnh ở dưới title thì bạn chỉ cần thêm một thẻ <img>
với class card-img-bottom
.
Định nghĩa chiều rộng và chiều cao cho Bootstrap Card
Mặc định Card sẽ lấy tất cả chiều rộng có sẵn trong thẻ <div>
bao chúng, chiều cao sẽ được điều chỉnh sao cho hiển thị phù hợp với nội dung của Card. Tuy nhiên, bạn cũng có thể tự thiết lập chiều rộng của chúng bằng cách thêm style width
hay max-width
và thay đổi chiều dài bằng cách thêm style height
. Như ví dụ dưới đây:
Các bạn có để ý thấy là mình dùng đơn vị của width
và height
là rem
thay vì px
không? Mình viết vậy là bởi đơn vị rem
có thể mở rộng được theo kích cỡ của màn hình, còn px
thì không.
Bootstrap grid
, mình thì hay dùng cách này:
Định nghĩa Header và Footer Bootstrap Card
Các bạn chỉ cần thêm thẻ <div>
với class card-header
và card-footer
Ví dụ:
Thêm Links
Chúng ta có thể dễ dàng thêm link vào nội dung content bằng cách thêm thẻ <a>
và class card-link
.
Kết luận
Chúng ta đã học xong phần Bootstrap Card và giờ các bạn đã biết cách sử dụng class này rồi. Chúc các bạn học tốt và hẹn các bạn ở bài học tiếp theo.
- Posted by baobinhnet
- 2020-07-24 10:57:52