Thẻ trong Bootstrap: Khái niệm và cách sử dụng

Trong Bootstrap 4, thẻ (Card) được giới thiệu như một phần tử chứa mới, thay thế cho các thành phần Panel, Well và Thumbnail cũ. Thẻ (Card) bao gồm các tùy chọn cho phần 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ẽ. Tham khảo bài học về thẻ (Card) trong Bootstrap dưới đây của Mytour để tìm hiểu thêm.

Học cách sử dụng thẻ (Card) trong Bootstrap

1. Tạo Card cơ bản trong Bootstrap

Để tạo card cơ bản trong Bootstrap, chúng ta sử dụng lớp .card, và nội dung trong card được đặt trong lớp .card-body.

Ví dụ: Trong ví dụ dưới đây chúng ta sẽ tạo một card cơ bản trong Bootstrap:

Kết quả xuất ra sẽ có dạng như sau:

2. Các loại nội dung cho Card trong Bootstrap

Card trong Bootstrap hỗ trợ nhiều loại nội dung khác nhau như hình ảnh, văn bản, danh sách nhóm, liên kết, ... .

2.1 Header và Footer trong Bootstrap

Sử dụng class .card-header để thêm tiêu đề và class .card-footer để thêm phần chân trang cho card trong Bootstrap.

Ví dụ: Trong ví dụ dưới đây minh họa cách tạo Header và Footer cho card trong Bootstrap:

Kết quả xuất ra sẽ có dạng như sau:

2.2. Card chỉ có phần body

Chúng ta có thể sử dụng class .card bao bọc class .card-body để tạo card chỉ chứa phần thân.

Kết quả xuất ra sẽ có dạng như sau:

2.3. Thêm List Group trong Card

Nếu muốn, chúng ta cũng có thể thêm list group vào card cùng với các loại nội dung khác như trong ví dụ dưới đây:

Kết quả xuất ra sẽ có dạng như sau:

Ngoài ra, bạn có thể kết hợp nhiều loại nội dung khác nhau để tạo card. Trong ví dụ dưới đây, chúng ta tạo một card có chiều rộng cố định kết hợp hình ảnh, văn bản, danh sách nhóm và liên kết:

Kết quả xuất ra sẽ có dạng như sau:

2.4. Tùy chỉnh nền background cho card trong Bootstrap

Bootstrap cung cấp nhiều tùy chọn để tùy chỉnh nền background, đường viền và màu sắc. Chúng ta có thể sử dụng các class tiện ích văn bản và nền background để thay đổi giao diện card.

Ví dụ: Ví dụ sau minh họa cách tùy chỉnh nền background cho card trong Bootstrap:

Kết quả xuất ra sẽ có dạng như sau:

2.5. Tùy chỉnh đường viền và văn bản card trong Bootstrap

Để tùy chỉnh văn bản và màu sắc của đường viền cho bất kỳ card nào, chúng ta có thể sử dụng các class tiện ích văn bản và đường viền. Chỉ cần áp dụng các class này trên .card hoặc các phần tử con như trong ví dụ dưới đây:

Kết quả xuất ra sẽ có dạng như sau:

3. Bố cục card trong Bootstrap

Ngoài các tùy chọn định dạng card, Bootstrap cũng cung cấp một số tùy chọn để tạo bố cục cho card.

3.1. Tạo Card Group trong Bootstrap

Chúng ta có thể sử dụng card group để hiển thị card dưới dạng một phần tử được ghép kết hợp, với các cột có chiều rộng và chiều cao bằng nhau. Card Group sử dụng display: flex; để thiết lập kích thước không đổi.

Ví dụ: Trong ví dụ sau chúng ta sẽ tạo một card group:

Kết quả xuất ra sẽ có dạng như sau:

3.2. Tạo Card Deck trong Bootstrap

Card Deck tương tự như Card Group, tức là chiều rộng và chiều cao của các cột bằng nhau, chỉ khác ở chỗ các card không được ghép kết hợp.

Ví dụ: Ví dụ sau minh họa cách tạo một card deck trong Bootstrap:

Kết quả xuất ra sẽ có dạng như sau:

3.3. Tạo các cột cho card trong Bootstrap

Trong Bootstrap 4, chúng ta có thể tạo các cột giống như Pinterest bằng cách gói chúng trong .card-columns. Các card được tạo bằng thuộc tính column trong CSS thay vì flexbox để căn chỉnh dễ dàng hơn.

Ngoài ra, card được sắp xếp từ trên xuống và từ trái sang phải.

3.4. Tạo card theo chiều ngang trong Bootstrap

Nếu cần, chúng ta cũng có thể tạo card theo chiều ngang, trong đó hình ảnh và văn bản được đặt cạnh nhau bằng cách sử dụng các lớp lưới và tiện ích.

Ví dụ: Ví dụ sau minh họa cách tạo card theo chiều ngang trong Bootstrap:

Kết quả xuất ra sẽ có dạng như sau:

3.5. Sử dụng hình ảnh làm nền background cho card

Để chuyển hình ảnh thành nền background cho card và thêm văn bản của card lên trên, chúng ta sử dụng class .card-img-overlay thay vì class .card-body. Tùy thuộc vào hình ảnh, chúng ta có thể thêm các định dạng để điều chỉnh giao diện.

Ví dụ: Ví dụ sau minh họa cách sử dụng hình ảnh làm nền background cho card trong Bootstrap:

Kết quả xuất ra sẽ có dạng như sau:

Lưu ý: Nội dung trong card không được vượt quá chiều cao của hình ảnh. Nếu vượt quá, nội dung sẽ bị tràn và hiển thị bên ngoài hình ảnh.

3.6. Căn chỉnh văn bản trong card

Bằng cách sử dụng các class căn chỉnh văn bản, chúng ta có thể dễ dàng căn chỉnh vị trí văn bản cho bất kỳ card nào.

Ví dụ: Trong ví dụ sau chúng ta sẽ căn chỉnh văn bản trong card:

Kết quả xuất ra sẽ có dạng như sau:

3.7. Chỉ định kích thước cho card trong Bootstrap

Chiều rộng của card trong Bootstrap được thiết lập mặc định là 100%, tức là chiếm toàn bộ chiều rộng. Tuy nhiên, chúng ta có thể thay đổi kích thước này bằng cách sử dụng các class CSS tùy chỉnh, các lớp lưới hoặc các class tiện ích tùy chỉnh kích thước.

Ví dụ: Trong ví dụ sau minh họa cách chỉ định kích thước cho card trong Bootstrap:

Kết quả xuất ra sẽ có dạng như sau:

3.8. Tạo card hoạt động như link

Thêm class .stretched-link cho liên kết bên trong card để tạo card hoạt động như một link, cho phép chúng ta click vào.

Ví dụ: Xem ví dụ sau:

Kết quả xuất ra sẽ như sau:

Chúc mừng bạn đã hoàn thành bài học về Card trong Bootstrap cùng Mytour. Nếu có câu hỏi hoặc cần hỗ trợ, đừng ngần ngại để lại bình luận dưới bài viết nhé!

Trong bài học tiếp theo, Mytour sẽ giới thiệu về Media Object trong Bootstrap, hãy cùng đón chờ nhé!