[BOOTSTRAP] Bài 8: Sử dụng card trong bootstrap đầy đủ nhất

Card là một thẻ  trong  bootstrap  4  là  một hộp với padding  xung quanh nội dung. Nó  bao gồm các tùy chọn  cho  header,  footers, content ,  màu sắc, …

 

Basic card 

Sử dụng lớp .card để tạo ra Basic card, và nội dung bên trong card sử dụng lớp .card-body.

Ví dụ:

Header and Footer

Sử dụng lớp.card-header để tạo phần heading cho card và lớp .card-footer để tạo phần footer cho card.

Ví dụ:

Contextual Cards

Để thêm màu cho back-ground them các lớp sau ( .bg-primary , .bg-success ,.bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark và .bg-light .

Ví dụ:

Titles, text, and links

Sử dụng lớp card-title để tạo card titles cho phần heading. Lớp .card-text sử dụng để bỏ phần bottom margins trong thẻ a

element bên trong .card-body. Lớp.card-link sử dụng tạo màu xanh cho các phần tử và thêm hiệu ứng chuyển động.

Ví dụ:

Card Images

Sử dụng lớp.card-img-top hoặc lớp .card-img-bottom vào thuộc tính . Để điều chỉnh phần image trên hoặc dưới phần hộp card. Chú ý: Phải sử image ở ngoài lớp .card-body để có thể set được toàn bộ chiều rộng của ảnh.

Stretched Link

Thêm lớp .stretched-link đến một liên kết bên trong thẻ,và nó sẽ làm cho click chuột được trên các thẻ và hoverable (thẻ sẽ hoạt động như một liên kết).

Ví dụ:

Card Image Overlays

Để chèn ảnh layout với chữ ta sử dụng lớp .card-img-overlay để thêm phần chữ trên top phần ảnh.

Ví dụ:

Card Columns

Sử dụng lớp .card-columns để tạo ra hệ thống grid of cards. Phần layout sẽ tự điều chỉnh khi thêm nhiều card hơn.

Note: Các card này sẽ hiển thị theo chiều dọc trên các small device (<576px):

Ví dụ:

Card Deck

Sử dụng lớp.card-deck để tạo ra các tập hợp card có chiều rộng và chiều cao giống nhau và tách rời nhau.

Cách bố trí này sẽ tự động điều chỉnh khi bạn chèn thêm thẻ. 

Ví dụ:

Card Group

Lớp.card-group tương tự như lớp .card-deck.Điểm khác biệt duy nhất là lớp  .card-group sẽ bỏ đi phần margin – phần khách cách giữa các thẻ

Note: : Các card này sẽ hiển thị theo chiều dọc trên các small device (<576px).

Ví dụ:


Các nội dung liên quan:

Tháng 04 - Codecamp mở lớp lập trình web chuyên nghiệp bằng Laravel

Đây là khoá học nâng cao học về Laravel - một framework php hàng đầu thế giới. Nếu bạn mong muốn phát triển dự án chuyên nghiệp, bảo mật, nhu cầu tuyển dụng cao thì tham gia khoá học này.

Tháng 04 - Codecamp mở lớp học lập trình Web Php Từ Cơ Bản Đến Nâng Cao Theo MVC OOP

Mastering PHP là chương trình được biên soạn kỹ lưỡng từng bước một giúp bất kỳ ai có thể làm chủ được việc xây dựng hệ thống website sau thời gian ngắn ngay cả khi chưa có kiến thức nền tảng. Khoá học đầy đủ nội dung và được hướng dẫn tỉ mỉ, chi tiết, cầm tay chỉ code đến khi code được thì thôi.

Top 19 website học lập trình miễn phí cực chất lượng

Những kênh dạy lập trình căn bản bằng Tiếng Việt trên đây là những kênh thông tin tuyệt vời giúp các học viên dù là người mới hay đã có kinh nghiệm lập trình có thể lựa chọn để làm một kênh thông tin tham khảo thêm những kiến thức lập trình phong phú khi lập trình trang web, ứng dụng hoặc tạo lập dự án.