Bootstrap: Nhóm danh sách (List group)
Giải phóng thời gian, khai phóng năng lực
Nhóm group là một thành phần rất mạnh và linh hoạt trong việc hiển thị không chỉ các danh sách đơn giản, mà còn có các danh sách phức tạp với nội dung tùy biến nữa.
Ví dụ cơ bản
Nhóm danh sách cơ bản nhất là một danh sách các hạng mục không có thứ tự cùng với các class thích hợp. Các nhóm danh sách khác được xây dựng dựa trên dạng cơ bản này bằng cách kết hợp với các tùy chọn được nói đến dưới đây và CSS của riêng bạn nếu cần.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Badge
Bạn có thể thêm thành phần badget vào bất kỳ mục nào trong nhóm danh sách và nó sẽ tự động được căn chỉnh về phía bên phải.
- 14Cras justo odio
- 2Dapibus ac facilisis in
- 1Morbi leo risus
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Các hạng mục có liên kết
Bạn có thể liên kết hóa các hạng mục trong nhóm danh sách bằng cách sử dụng danh sách các thẻ <a> (điều đó có nghĩa là bạn phải sử dụng phần tử cha là <div> thay vì <ul>), không cần thiết phải thêm phần tử cha cho từng liên kết trong nhóm danh sách.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Vô hiệu hóa hạng mục
Hãy thêm .disabled vào các .list-group-item để đổi màu chúng thành màu xám, có nghĩa là hạng mục đó đã bị vô hiệu hóa.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Các class theo ngữ cảnh
Hãy sử dụng các class theo ngữ cảnh để style cho các hạng mục trong danh sách theo dạng mặc định hoặc có liên kết. Ngoài ra, bạn cũng có thể thêm trạng thái đang kích hoạt bằng cách sử dụng class .active.
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
Tùy chỉnh nội dung
Bạn có thể thêm bất kỳ mã HTML nào vào bên trong các hạng mục của nhóm danh sách tương tự như ví dụ bên dưới.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
Giải phóng thời gian, khai phóng năng lực