Bootstrap 5 nhóm danh sách

Danh sách nhóm cơ bản

Danh sách nhóm cơ bản nhất là danh sách không có dấu phẩy ngăn cách chứa các mục danh sách:

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

Mô hình

<ul class="list-group">
  <li class="list-group-item">Mục số một</li>
  <li class="list-group-item">Mục số hai</li>
  <li class="list-group-item">Mục số ba</li>
</ul>

Thử ngay

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

Hãy sử dụng .active Class nhấn mạnh mục hiện tại:

Mô hình

<ul class="list-group">
  <li class="list-group-item active">Mục hoạt động</li>
  <li class="list-group-item">Mục số hai</li>
  <li class="list-group-item">Mục số ba</li>
</ul>

Thử ngay

Danh sách nhóm chứa liên kết

Để tạo danh sách nhóm có liên kết, hãy sử dụng <div> thay thế <ul>, bằng <a> thay thế <li>Tùy chọn, nếu bạn muốn nền màu xám khi trỏ chuột, hãy thêm .list-group-item-action Loại:

Mô hình

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Thứ nhất</a>
  <a href="#" class="list-group-item list-group-item-action">Thứ hai</a>
  <a href="#" class="list-group-item list-group-item-action">Mục số ba</a>
</div>

Thử ngay

Mục bị vô hiệu hóa

.disabled Lớp thêm màu văn bản nhẹ hơn cho mục bị vô hiệu hóa. Khi sử dụng trên liên kết, sẽ loại bỏ hiệu ứng trỏ chuột:

Mô hình

<div class="list-group">
  <a href="#" class="list-group-item disabled">Mục bị vô hiệu hóa</a>
  <a href="#" class="list-group-item disabled">Mục bị vô hiệu hóa</a>
  <a href="#" class="list-group-item">Mục số ba</a>
</div>

Thử ngay

Xóa viền

Sử dụng .list-group-flush Lớp xóa viền và góc tròn:

Mô hình

<ul class="list-group list-group-flush">
  <li class="list-group-item">Mục số một</li>
  <li class="list-group-item">Mục số hai</li>
  <li class="list-group-item">Mục số ba</li>
  <li class="list-group-item">Mục số tư</li>
</ul>

Thử ngay

Danh sách có số

Sử dụng .list-group-numbered Lớp tạo mục danh sách có số đầu tiên:

Mô hình

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Mục số một</li>
  <li class="list-group-item">Mục số hai</li>
  <li class="list-group-item">Mục số ba</li>
</ol>

Thử ngay

Danh sách ngang

Nếu bạn muốn mục danh sách hiển thị ngang而不是 dọc (cùng nhau thay vì đ堆叠), hãy thêm .list-group-horizontal Lớp được thêm vào .list-group：

Mô hình

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Mục số một</li>
  <li class="list-group-item">Mục số hai</li>
  <li class="list-group-item">Mục số ba</li>
  <li class="list-group-item">Mục số tư</li>
</ul>

Thử ngay

Lớp ngữ cảnh

Lớp ngữ cảnh có thể được sử dụng để thêm màu cho mục danh sách:

Lớp cho việc sơn màu 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
  • .list-group-item-light

Mô hình

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Mục danh sách thành công</li>
  <li class="list-group-item list-group-item-secondary">Mục thứ cấp</li>
  <li class="list-group-item list-group-item-info">Mục thông tin</li>
  <li class="list-group-item list-group-item-warning">Mục cảnh báo</li>
  <li class="list-group-item list-group-item-danger">Mục nguy hiểm</li>
  <li class="list-group-item list-group-item-primary">Mục chính</li>
  <li class="list-group-item list-group-item-dark">Mục tối</li>
  <li class="list-group-item list-group-item-light">Mục sáng</li>
</ul>

Thử ngay

Liên kết mục có lớp ngữ cảnh

Mô hình

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Mục hành động</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Mục thành công</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Mục thứ cấp</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Mục thông tin</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Cảnh báo mục</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Mục nguy hiểm</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Mục chính</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Mục tối</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Mục sáng</a>
</div>

Thử ngay

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

Chuyển đổi .badge Kết hợp với class utility/helper, bạn có thể thêm huy hiệu vào nhóm danh sách:

Mô hình

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Hộp thư đến
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Email quảng cáo
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Thùng rác
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Thử ngay