Hướng dẫn List Groups trong Bootstrap 5 (mới nhất 2023)

List Groups là một thành phần quan trọng trong Bootstrap 5 giúp hiển thị danh sách các mục ngang hoặc dọc một cách dễ dàng. Với List Groups, bạn có thể tạo ra danh sách các mục có hiệu ứng hover, tích chọn, đánh dấu thông báo, và thậm chí cả ảnh đại diện. Hướng dẫn List Groups trong Bootstrap 5 sẽ cung cấp cho bạn kiến thức cần thiết để tạo ra các danh sách mục đa dạng và linh hoạt, điều chỉnh các biểu đồ và màu sắc, và tùy chỉnh các sự kiện và cảnh báo. Nắm vững việc sử dụng List Groups sẽ giúp bạn xây dựng giao diện người dùng hiện đại và hấp dẫn.

Hướng dẫn tóm tắt về khóa học nhanh Bootstrap 5 – Nhóm danh sách #12.

Danh sách các nhóm trong Bootstrap 5

List Group trong Bootstrap 5 là một phần tử đa dụng và mạnh mẽ để hiển thị thông tin trên web và ứng dụng, hãy tìm hiểu cách sử dụng nó tại QuanTriMang.com!

Danh sách cơ bản trong Bootstrap 5 được nhóm lại thành một nhóm.

Một danh sách nhóm cơ bản trong Bootstrap 5 là một danh sách các mục không được sắp xếp theo thứ tự. Để tạo một danh sách nhóm cơ bản, sử dụng thẻ

với lớp .list-group-item:

<ul >
<li >First item</li>
<li >Second item</li>
<li >Third item</li>
</ul>

Ví dụ cho web Quantrimang.com:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Nhóm danh sách cơ bản trên QuanTriMang.com</h2>
  <ul >
    <li >Mục 1</li>
    <li >Mục 2</li>
    <li >Mục 3</li>
  </ul>
</div>

</body>
</html>

Nhóm danh sách cơ bản trong Bootstrap 5

Mục đang hoạt động

Sử dụng lớp .active để làm nổi bật phần tử hiện tại.

<ul >
<li >Active item</li>
<li >Second item</li>
<li >Third item</li>
</ul>

Ví dụ trên trang web QuanTriMang.com:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Mục đang hoạt động trong nhóm danh sách trên QuanTriMang.com</h2>
  <ul >
    <li >Mục 1</li>
    <li >Mục thứ 2</li>
    <li >Mục thứ 3</li>
  </ul>
</div>

</body>
</html>

Mục đang hoạt động

Xử dụng danh sách với các mục có liên kế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 thẻ <div> thay thế cho thẻ <ul> và thẻ <a> thay thế cho thẻ <li>. Nếu bạn muốn màu nền chuyển sang xám khi di chuột qua, bạn có thể thêm class .list-group-item-action.

<div >
<a href="#" >First item</a>
<a href="#" >Second item</a>
<a href="#" >Third item</a>
</div>

Ví dụ trên trang web QuanTriMang.com:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Nhóm list với các mục được liên kết trên QuanTriMang.com</h2>
  <div >
    <a href="#" >Mục 1</a>
    <a href="#" >Mục 2</a>
    <a href="#" >Mục 3</a>
  </div>
</div>

</body>
</html>

Liên kết các nhóm trong danh sách

Mục không hoạt động

Lớp .disabled sẽ tạo một màu văn bản sáng hơn cho các mục không hoạt động. Khi được áp dụng vào các liên kết, lớp này sẽ loại bỏ hiệu ứng khi rê chuột vào liên kết đó.

<div >
<a href="#" >Disabled item</a>
<a href="#" >Disabled item</a>
<a href="#" >Third item</a>
</div>

Ví dụ trên trang web QuanTriMang.com:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Nhóm danh sách chứa mục bị vô hiệu hóa trên QuanTriMang.com</h2>
  <p>Class disabled tô màu nhạt hơn cho các mục bị vô hiệu hóa. Và khi được sử dụng trên các liên kết, nó sẽ loại bỏ hiệu ứng di chuột:</p>
  <div >
    <a href="#" >Mục bị vô hiệu hóa</a>
    <a href="#" >Mục bị vô hiệu hóa</a>
    <a href="#" >Mục 3</a>
  </div>
</div>

</body>
</html>

Danh sách nhóm có mục bị vô hiệu hóa

Xóa viền

Sử dụng class .list-group-flush để xóa bỏ các đường viền và góc bo tròn:

<ul >
<li >First item</li>
<li >Second item</li>
<li >Third item</li>
<li >Fourth item</li>
</ul>

Ví dụ trang web QuanTriMang.com như sau:

Xóa viền các mục và góc bo tròn trong danh sách trên QTM

Nhóm danh sách được đánh số

Sử dụng class .list-group-numbered để tạo danh sách các mục được liệt kê kèm số đánh dấu trước:

<ol >
<li >First item</li>
<li >Second item</li>
<li >Third item</li>
</ol>

Ví dụ trên trang web QuanTriMang.com:

Danh sách chứa các mục được đánh số

Chia nhóm theo chiều ngang với danh sách danh sách.

Để các mục trong danh sách hiển thị theo chiều ngang (nằm cạnh nhau thay vì ở phía trên của nhau), thêm class .list-group-horizontal vào .list-group:

<ul >
<li >First item</li>
<li >Second item</li>
<li >Third item</li>
<li >Fourth item</li>
</ul>

Ví dụ dưới trang web QuanTriMang.com:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Nhóm danh sách theo chiều ngang trên QuanTriMang.com</h2>
  <p>Class .list-group-horizontal hiện các mục trong danh sách theo chiều ngang:</p>
  <ul >
    <li >Mục 1</li>
    <li >Mục 2</li>
    <li >Mục 3</li>
    <li >Mục 4</li>
  </ul>
</div>

</body>
</html>

Nhóm danh sách trên Bootstrap theo chiều ngang

Class theo ngữ cảnh

Một cách sử dụng của lớp trong ngữ cảnh là để thêm màu sắc cho các đầu mục trong danh sách.

Lớp tô màu các mục trong danh sách bao gồm: .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.

<ul >
<li >Success item</li>
<li >Secondary item</li>
<li >Info item</li>
<li >Warning item</li>
<li >Danger item</li>
<li >Primary item</li>
<li >Dark item</li>
<li >Light item</li>
</ul>

Ví dụ trên trang web QuanTriMang.com:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Nhóm danh sách theo ngữ cảnh trên QTM</h2>
  <ul >
    <li >Thành công</li>
    <li >Bổ sung</li>
    <li >Thông tin</li>
    <li >Cảnh báo</li>
    <li >Nguy hiểm</li>
    <li >Cơ bản</li>
    <li >Màu tối</li>
    <li >Màu sáng</li>
  </ul>
</div>

</body>
</html>

Nhóm danh sách theo ngữ cảnh trên Bootstrap 5

Kết nối các mục bằng class dựa trên ngữ cảnh.

<div >
<a href="#" >Action item</a>
<a href="#" >Success item</a>
<a href="#" >Secondary item</a>
<a href="#" >Info item</a>
<a href="#" >Warning item</a>
<a href="#" >Danger item</a>
<a href="#" >Primary item</a>
<a href="#" >Dark item</a>
<a href="#" >Light item</a>
</div>

Ví dụ trên trang web QuanTriMang.com:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div >
  <h2>Các mục được liên kết theo ngữ cảnh trên QuanTriMang</h2>
  <p>Di chuyển chuột qua các mục được liên kết để thấy hiệu ứng con trỏ:</p>
  <div >
    <a href="#" >Action item</a>
    <a href="#" >Success item</a>
    <a href="#" >Secondary item</a>
    <a href="#" >Info item</a>
    <a href="#" >Warning item</a>
    <a href="#" >Danger item</a>
    <a href="#" >Primary item</a>
    <a href="#" >Dark item</a>
    <a href="#" >Light item</a>
  </div>
</div>

</body>
</html>

Một kiểu nhóm danh sách trong Bootstrap 5

Nhóm danh sách với Badge

Sử dụng class .badge cùng với lớp tiện ích/trợ giúp để thêm huy hiệu vào ngay bên trong danh sách nhóm.

<ul >
<li >
Inbox
<span >12</span>
</li>
<li >
Ads
<span >50</span>
</li>
<li >
Junk
<span >99</span>
</li>
</ul>

Ví dụ trên trang web QuanTriMang.com:

Dưới đây là tất cả thông tin mà bạn cần biết về cách tạo nhóm danh sách trong Bootstrap 5. Bạn sẽ thấy rằng việc tạo nhóm danh sách chuyên nghiệp cho trang web rất dễ dàng chỉ bằng cách thay đổi một số yếu tố khi viết mã bằng Bootstrap 5.

Bài 16: Nhóm danh sách trong Bootstrap 5 – Nguồn