Bài 15: List Group trong Bootstrap 4

0
197

Xin chào các bạn, trong bài viết ngày hôm nay, mình sẽ hướng dẫn các bạn về List Group trong Bootstrap 4. Sử dụng list-group tạo ra danh sách các phần tử với sự tùy biến mềm dẻo, các phần tử con xây dựng từ list-group-item.

List Group

Mục đích của Bootstrap khi tạo ra List Group là để hiển thị 1 nội dung dưới dạng danh sách. Thực tế, chỉ với HTML thì bạn cũng có thể tạo ra 1 danh sách bằng cách sử dụng các thẻ danh sách ul li nhưng sẽ phức tạp hơn việc sử dụng Bootstrap. Bootstrap cung cấp các class .list-group.list-group-item như 1 tiêu chuẩn để tạo ra các danh sách phức tạp hơn HTML thông thường.

.list-group & .list-group-item

Sử dụng class .list-group áp dụng cho thẻ <ul> và class .list-group-item áp dụng cho thẻ <li>, như sau:

Hiển thị kết quả:

Ngoài ra, với 2 class này các bạn có thể tạo ra 1 danh sách mà không cần phải sử dụng cặp thẻ danh sách ul li, như sau:

List Group kết hợp với Link

Sau đây là ví dụ đơn giản với các list group là các link:

Kết quả hiển thị:

List Group kết hợp với Color

Có một vài lớp bổ xung cho để sử dụng cùng với .list-group-item giúp bạn thiết lập màu nền hoặc màu chữ cho list-group-item, nó nên được sử dụng với các ngữ cảnh khác nhau trong ứng dụng.

  • .list-group-item-primary
  • .list-group-item-secondary
  • .list-group-item-success
  • .list-group-item-danger
  • .list-group-item-warning
  • .list-group-item-info
  • .list-group-item-light
  • .list-group-item-dark
  • .list-group-item-muted
  • .list-group-item-white

Ví dụ:

Tùy biến List Group

Bạn có thể tạo một List Group tùy biến, trong đó các List-group-item có nội dung HTML, hãy nhớ rằng Bootstrap hỗ trợ 2 lớp .list-group-item-heading & .list-group-item-text, chúng có ích trong trường hợp này.

Ví dụ:

Kết luận

Như vậy mình đã hướng dẫn xong cho các bạn về khái niệm List Group trong Bootstrap 4, rất hữu ích phải không nào, nó sẽ giúp các bạn tạo nhiều dạng danh sách phức tạp và đẹp mắt hơn rất nhiều so với HTML thông thường. Hẹn gặp lại các bạn ở bài học tiếp theo.

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