Nhóm danh sách Bootstrap 5
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ục thứ hai
- Mục thứ ba
Để tạo một nhóm danh sách cơ bản, hãy sử dụng phần tử <ul> với lớp .list-group và các phần tử <li> với lớp .list-group-item :
Ví dụ
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul> Hãy tự mình thử »Trạng thái hoạt động
- Mục đang hoạt động
- Mục thứ hai
- Mục thứ ba
Sử dụng lớp .active để đánh dấu mục hiện tại:
Ví dụ
<ul class="list-group">
<li class="list-group-item
active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul> Hãy tự mình thử » Nhóm danh sách với các mục được liên kết
Để tạo 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> . Tùy chọn thêm lớp .list-group-item-action nếu bạn muốn màu nền xám khi di chuột:
Ví dụ
<div class="list-group">
<a href="#"
class="list-group-item list-group-item-action">First item</a>
<a
href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div> Hãy tự mình thử »Mục bị vô hiệu hóa
Lớp .disabled thêm màu văn bản nhạt hơn vào mục bị vô hiệu hóa. Và khi sử dụng vào link sẽ loại bỏ hiệu ứng di chuột:
Ví dụ
<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#"
class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div> Hãy tự mình thử »Xóa/Xóa Đường Viền
Sử dụng lớp .list-group-flush để loại bỏ một số đường viền và các góc tròn:
- Mục đầu tiên
- Mục thứ hai
- Mục thứ ba
- Mục thứ tư
Ví dụ
<ul class="list-group
list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul> Hãy tự mình thử »Nhóm danh sách được đánh số
Sử dụng lớp .list-group-numbered để tạo các mục danh sách có số ở phía trước chúng:
- Mục đầu tiên
- Mục thứ hai
- Mục thứ ba
Ví dụ
<ol class="list-group list-group-numbered">
<li
class="list-group-item">First item</li>
<li
class="list-group-item">Second item</li>
<li
class="list-group-item">Third item</li>
</ol> Hãy tự mình thử »Nhóm danh sách ngang
Nếu bạn muốn các mục danh sách hiển thị theo chiều ngang thay vì theo chiều dọc (cạnh nhau thay vì chồng lên nhau), hãy thêm lớp .list-group-horizontal vào .list-group :
- Mục đầu tiên
- Mục thứ hai
- Mục thứ ba
- Mục thứ tư
Ví dụ
<ul class="list-group
list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul> Hãy tự mình thử »Lớp học theo ngữ cảnh
Các lớp theo ngữ cảnh có thể được sử dụng để thêm màu vào các mục trong danh sách:
- Mục thành công
- Mục phụ
- Mục thông tin
- Mục cảnh báo
- Vật phẩm nguy hiểm
- Mục chính
- Mục tối
- Vật phẩm nhẹ
Các lớp để tô màu các mục danh sách là: .list-group-item-success , list-group-item-secondary , list-group-item-info , list-group-item-warning , .list-group-item-danger , .list-group-item-primary , list-group-item-dark và list-group-item-light ,:
Ví dụ
<ul class="list-group">
<li class="list-group-item
list-group-item-success">Success item</li>
<li
class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li
class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li
class="list-group-item list-group-item-light">Light item</li>
</ul> Hãy tự mình thử »Liên kết các mục với các lớp theo ngữ cảnh
Ví dụ
<div class="list-group">
<a href="#" class="list-group-item
list-group-item-action">Action item</a>
<a href="#"
class="list-group-item list-group-item-action list-group-item-success">Success item</a>
<a
href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div> Hãy tự mình thử »Nhóm danh sách có huy hiệu
Kết hợp các lớp .badge với các lớp tiện ích/trợ giúp để thêm huy hiệu vào nhóm danh sách:
- Hộp thư đến 12
- Quảng cáo 50
- Rác 99
Ví dụ
<ul class="list-group">
<li class="list-group-item d-flex
justify-content-between align-items-center">
Inbox
<span class="badge bg-primary rounded-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge bg-primary
rounded-pill">50</span>
</li>
<li class="list-group-item
d-flex justify-content-between align-items-center">
Junk
<span class="badge bg-primary rounded-pill">99</span>
</li>
</ul> Hãy tự mình thử »