Bootstrap 4 Nhóm danh sách

Nhóm danh sách cơ bản

Nhóm danh sách cơ bản nhất là danh sách không có thứ tự với các mục danh sách:

• Mục đầu tiên
• Mặt hàng thứ hai
• Mặt hàng thứ ba

Để tạo một nhóm danh sách cơ bản, hãy sử dụng một <ul>phần tử có lớp .list-groupvà <li>các phần tử có lớp .list-group-item:

Trạng thái hoạt động

• Mục hoạt động
• Mặt hàng thứ hai
• Mặt hàng thứ ba

Sử dụng .activelớp để đánh dấu mục hiện tại:

Liệt kê nhóm với các mục được liên kết

Để tạo một nhóm danh sách với các mục được liên kết, hãy sử dụng <div>thay vì <ul> và <a>thay vì <li>. Theo tùy chọn, thêm .list-group-item-actionlớp nếu bạn muốn có màu nền xám khi di chuột:

Mặt hàng bị vô hiệu hóa

Lớp .disabledthêm màu văn bản sáng hơn cho mục bị vô hiệu hóa. Và khi được sử dụng trên các liên kết, nó sẽ loại bỏ hiệu ứng di chuột:

Xả / Xóa đường viền

Sử dụng .list-group-flushlớp để loại bỏ một số đường viền và các góc tròn:

Nhóm danh sách ngang

Nếu bạn muốn các mục trong danh sách hiển thị theo chiều ngang thay vì chiều dọc (cạnh nhau thay vì chồng lên nhau), hãy thêm .list-group-horizontallớp vào .list-group:

Các lớp theo ngữ cảnh

Các lớp ngữ cảnh có thể được sử dụng để tô màu các mục trong danh sách:

• Mặt hàng thành công
• Mặt hàng phụ
• Mục thông tin
• Mục cảnh báo
• Vật phẩm nguy hiểm
• Mặt hàng chính
• Đồ tối
• Mục nhẹ

Các lớp để tô màu các mục trong danh sách là : .list-group-item-success,,,, và list-group-item-secondary,:list-group-item-info list-group-item-warning.list-group-item-danger.list-group-item-primarylist-group-item-darklist-group-item-light

Liên kết các mục với Lớp theo ngữ cảnh

Danh sách nhóm có huy hiệu

Kết hợp .badgecác lớp với các lớp tiện ích / trợ giúp để thêm huy hiệu bên trong nhóm danh sách: