Nhóm danh sách Bootstrap
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ử »Danh sách nhóm có huy hiệu
Bạn cũng có thể thêm huy hiệu vào nhóm danh sách. Các huy hiệu sẽ tự động được đặt ở bên phải:
- 12 Mới
- 5 Đã xóa
- 3 cảnh báo
Để tạo huy hiệu, hãy tạo phần tử <span>
với lớp .badge
bên trong mục danh sách:
Ví dụ
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
Hãy tự mình thử » Nhóm danh sách với các mục được liên kết
Các mục trong nhóm danh sách cũng có thể là siêu liên kết. Điều này sẽ thêm màu nền xám khi di chuộ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>
:
Ví dụ
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Hãy tự mình thử »Trạng thái hoạt động
Sử dụng lớp .active
để đánh dấu mục hiện tại:
Ví dụ
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Hãy tự mình thử »Mục bị vô hiệu hóa
Nhóm danh sách sau đây có một mục bị vô hiệu hóa:
Để tắt một mục, hãy thêm lớp .disabled
:
Ví dụ
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
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 để tô màu các mục trong danh sách:
- Mục đầu tiên
- Mục thứ hai
- Mục thứ ba
- Mục thứ tư
Các lớp để tô màu các mục danh sách là: .list-group-item-success
, list-group-item-info
, list-group-item-warning
và .list-group-item-danger
:
Ví dụ
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
Hãy tự mình thử »Nội dung tùy chỉnh
Bạn có thể thêm gần như mọi HTML vào trong một mục nhóm danh sách.
Bootstrap cung cấp các lớp .list-group-item-heading
và .list-group-item-text
có thể được sử dụng như sau:
Ví dụ
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>
Hãy tự mình thử »