Trong thiết kế giao diện web hiện đại, việc hiển thị danh sách thông tin một cách rõ ràng và trực quan luôn là một trong những yếu tố quan trọng. List Group trong Bootstrap 5 là một thành phần mạnh mẽ, giúp bạn dễ dàng tạo ra các danh sách với giao diện đẹp mắt và tương tác linh hoạt. Bài viết này sẽ cung cấp cho bạn hướng dẫn chi tiết từ cấu trúc cơ bản đến các tùy biến nâng cao của List Group, nhằm giúp bạn áp dụng hiệu quả trong các dự án thực tế.

1. Giới thiệu về List Group

List Group là một thành phần UI của Bootstrap 5 cho phép bạn tạo danh sách các mục (items) với kiểu dáng nhất quán, hỗ trợ cả nội dung đơn giản lẫn phức tạp. Với List Group, bạn có thể:

• Hiển thị danh sách các mục dạng văn bản.
• Tích hợp các liên kết, nút bấm hoặc nội dung HTML tùy chỉnh.
• Kết hợp cùng các thành phần như badges, icons, hoặc hình ảnh để tăng tính tương tác và thẩm mỹ.

2. Cấu trúc cơ bản

2.1. Sử dụng <ul> và <li>

Cách tạo List Group cơ bản nhất là sử dụng thẻ <ul> với lớp list-group và mỗi mục là một thẻ <li> với lớp list-group-item:

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

2.2. Sử dụng <div> với các liên kết

Để tạo danh sách có thể tương tác (clickable), bạn có thể sử dụng thẻ <div> và <a> kết hợp với lớp list-group-item và list-group-item-action:

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Item 1</a>
  <a href="#" class="list-group-item list-group-item-action">Item 2</a>
  <a href="#" class="list-group-item list-group-item-action">Item 3</a>
</div>

3. Tùy biến List Group

Bootstrap 5 cho phép bạn tùy biến List Group theo nhiều cách để phù hợp với nhu cầu giao diện của dự án.

3.1. Active và Disabled Items

Bạn có thể làm nổi bật một mục bằng cách thêm lớp active hoặc vô hiệu hóa một mục với lớp disabled:

<ul class="list-group">
  <li class="list-group-item active">Active Item</li>
  <li class="list-group-item">Regular Item</li>
  <li class="list-group-item disabled">Disabled Item</li>
</ul>

3.2. Thêm Badges

Badges giúp hiển thị thông tin bổ sung như số đếm hoặc nhãn cho từng mục:

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Thông báo
    <span class="badge bg-primary rounded-pill">4</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Tin nhắn
    <span class="badge bg-success rounded-pill">7</span>
  </li>
</ul>

3.3. Nội dung tùy chỉnh

Để hiển thị nội dung phức tạp hơn, bạn có thể lồng các thành phần HTML khác bên trong List Group:

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Tiêu đề mục 1</h5>
      <small>10 phút trước</small>
    </div>
    <p class="mb-1">Mô tả ngắn về nội dung của mục 1. Nội dung này có thể dài hơn và bao gồm nhiều thông tin.</p>
    <small>Thông tin bổ sung</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Tiêu đề mục 2</h5>
      <small class="text-muted">30 phút trước</small>
    </div>
    <p class="mb-1">Mô tả nội dung của mục 2 với thông tin chi tiết và hấp dẫn hơn.</p>
    <small class="text-muted">Chi tiết thêm</small>
  </a>
</div>

4. Ứng dụng

List Group có thể được tích hợp vào nhiều trường hợp sử dụng khác nhau, chẳng hạn như:

• Dashboard quản trị: Hiển thị danh sách người dùng, thông báo hoặc các mục cần theo dõi.
• Trang danh sách sản phẩm: Kết hợp với ảnh, giá cả và mô tả sản phẩm.
• Menu điều hướng: Tạo các menu tương tác cho website với khả năng tùy biến cao.

Ví dụ: Kết hợp List Group với Collapse

Bạn có thể kết hợp List Group với các thành phần khác như Collapse để tạo giao diện tương tác động:

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Danh sách nhiệm vụ
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <ul class="list-group">
          <li class="list-group-item">Nhiệm vụ 1</li>
          <li class="list-group-item">Nhiệm vụ 2</li>
          <li class="list-group-item">Nhiệm vụ 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

5. Các lưu ý khi sử dụng List Group

• Tính nhất quán: Đảm bảo sử dụng các lớp CSS của Bootstrap đúng cách để giao diện luôn thống nhất.
• Responsive Design: List Group của Bootstrap 5 tự động hỗ trợ responsive, nhưng bạn nên kiểm tra kỹ trên các thiết bị khác nhau.
• Tùy chỉnh CSS: Nếu cần, bạn có thể ghi đè các style mặc định của Bootstrap để phù hợp với thiết kế riêng của dự án.

6. Kết luận

List Group trong Bootstrap 5 là một thành phần linh hoạt và mạnh mẽ, giúp bạn xây dựng giao diện danh sách thông tin rõ ràng, dễ tương tác và thẩm mỹ. Từ cấu trúc cơ bản đến các tùy biến nâng cao, bài viết đã cung cấp cho bạn những kiến thức cần thiết để áp dụng List Group vào các dự án web của mình.

Nếu bạn có bất kỳ thắc mắc hay ý kiến đóng góp nào, hãy để lại bình luận bên dưới để cùng trao đổi. Đừng quên chia sẻ bài viết nếu bạn thấy nó hữu ích!