Bài 12: Card trong Bootstrap 4

0
683

Xin chào các bạn, hôm nay mình sẽ giới thiệu cho các bạn 1 thành phần, 1 class mẫu rất hay được sử dụng trong Bootstrap 4 đó là Bootstrap Card. Trong Bootstrap 3 không có class .card nên nếu bạn các bạn dã biết Bootstrap 3 rồi thì bài này vẫn rất hữu ích nhé, vì nó là 1 class mới mà.

Bootstrap Card là gì?

Đây chính là một ví dụ sử dụng Bootstrap Card:

bootstrap card

Flexbox là 1 kiểu dàn trang mới trong CSS3 mà mình cũng đã có 1 bài viết ở phần CSS3 rồi đó, các bạn có thể quay lại phần CSS3 để hiểu rõ bản chất hơn nhé. Bootstrap Card cũng được xây dựng dựa trên cơ chế này.

Bạn có thể có rất nhiều tùy chọn trong Bootstrap Card như là định nghĩa các phần header, footer; định nghĩa nội dung content, background, chèn link, …

Sử dụng Bootstrap Card trong project

Định nghĩa đơn giản cho Card

Sau đây là những phần tử cơ bản nhất để tạo nên Card:

Khi tạo một Card đơn giản, chúng ta cần:

  • 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

Ví dụ:

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.

Thay vì fix chiều rộng và chiều cao như thế, các bạn cũng có thể sử dụng Bootstrap grid, mình thì hay dùng cách này:

Với việc định nghĩa 1 card sẽ ứng với 3 column như trên, 1 hàng mình sẽ có được 4 cards.

Các bạn chỉ cần thêm thẻ <div> với class card-header và card-footer

Ví dụ:

Thêm Navigation

Một tính năng mới của Bootstrap Card là khả năng thêm các mẫu tab hay navigation pills vào header. Để làm được điều này chúng ta sẽ thêm thẻ <ul> với các class nav-tabs và card-header-tabs vào card-header:

Hiển thị kết quả:

Tương tự chúng ta có thể thêm navigation pills vào bằng cách thay thế nav-tabs bằng nav-pills và card-header-tabs bằng card-header-pill.

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

Như các bạn đã biết, Card được sử dụng để tạo layout cho album ảnh, bài blog, sản phẩm thương mại điện tử… Có rất nhiều công ty lớn như Facebook, Google, Printest sử dụng đến nó.

Tóm lại, với Bootstrap Card, các bạn đã có thể tạo ra một trang web hiện đại mà không cần phải đi quá sâu vào tìm hiểu CSS. Bạn cũng có rất nhiều option để chọn lựa và tự customize theo ý thích của mình. Bootstrap vẫn làm 1 framework mạnh mẽ nhất dành cho tất cả mọi người.

Hy vọng các bạn có thể áp dụng được vào project của mình.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây