Bài 16: List Groups trong Bootstrap 5

Chí Vỹ

List Group hay nhóm danh sách trong Bootstrap 5 là một thành phần linh hoạt và mạnh mẽ được dùng để hiển thị một chuỗi thông tin trên web, app… Hãy cùng QuanTriMang.com tìm hiểu cách dùng List-group trong Bootstrap 5 nhé!

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

Nhóm list cơ bản nhất trong Bootstrap 5 là một danh sách các đầu mục không theo thứ tự. Để tạo một nhóm danh sách cơ bản, dùng <ul> với class .list-group, và <li> với class .list-group-item:

<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>

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" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Nhóm danh sách cơ bản trên QuanTriMang.com</h2>
  <ul class="list-group">
    <li class="list-group-item">Mục 1</li>
    <li class="list-group-item">Mục 2</li>
    <li class="list-group-item">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

Dùng class .active để highlight mục hiện tại:

<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>

Ví dụ trên 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" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Mục đang hoạt động trong nhóm danh sách trên QuanTriMang.com</h2>
  <ul class="list-group">
    <li class="list-group-item active">Mục 1</li>
    <li class="list-group-item">Mục thứ 2</li>
    <li class="list-group-item">Mục thứ 3</li>
  </ul>
</div>

</body>
</html>

Mục đang hoạt động

Nhóm 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, dùng <div> thay thế <ul> và <a> thay cho <li>. Tùy chọn, thêm class .list-group-item-action nếu muốn màu nền chuyển xám khi trỏ chuột qua:

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">First item</a>
<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>

Ví dụ trên 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" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Nhóm list với các mục được liên kết trên QuanTriMang.com</h2>
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Mục 1</a>
    <a href="#" class="list-group-item list-group-item-action">Mục 2</a>
    <a href="#" class="list-group-item list-group-item-action">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

Class .disabled thêm một màu văn bản sáng hơn cho mục không hoạt động. Và khi được dùng trên các liên kết, nó sẽ loại bỏ hiệu ứng di chuột:

<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>

Ví dụ trên 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" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <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 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 3</a>
  </div>
</div>

</body>
</html>

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

Xóa viền

Dùng class .list-group-flush để loại bỏ một số đường viền và các góc bo tròn:

<ul class="list-group list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>

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

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ố

Dùng class .list-group-numbered để tạo các mục được liệt kê kèm số ở phía trước chúng:

<ol class="list-group list-group-numbered">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ol>

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

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

Nhóm danh sách theo chiều ngang

Nếu muốn 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 class="list-group list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>

Ví dụ trên 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" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <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 class="list-group list-group-horizontal">
    <li class="list-group-item">Mục 1</li>
    <li class="list-group-item">Mục 2</li>
    <li class="list-group-item">Mục 3</li>
    <li class="list-group-item">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

Class theo ngữ cảnh có thể được dùng để thêm màu sắc cho các đầu mục trong danh sách:

Class 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 class="list-group">
<li class="list-group-item list-group-item-success">Success item</li>
<li class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li class="list-group-item list-group-item-light">Light item</li>
</ul>

Ví dụ trên 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" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Nhóm danh sách theo ngữ cảnh trên QTM</h2>
  <ul class="list-group">
    <li class="list-group-item list-group-item-success">Thành công</li>
    <li class="list-group-item list-group-item-secondary">Bổ sung</li>
    <li class="list-group-item list-group-item-info">Thông tin</li>
    <li class="list-group-item list-group-item-warning">Cảnh báo</li>
    <li class="list-group-item list-group-item-danger">Nguy hiểm</li>
    <li class="list-group-item list-group-item-primary">Cơ bản</li>
    <li class="list-group-item list-group-item-dark">Màu tối</li>
    <li class="list-group-item list-group-item-light">Màu sáng</li>
  </ul>
</div>

</body>
</html>

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

Liên kết các mục với class theo ngữ cảnh

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Action item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>

Ví dụ trên 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" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <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 class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Action item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-light">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

Kết hợp class .badge với class tiện ích/trợ giúp để thêm badge vào bên trong nhóm danh sách:

<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge bg-primary rounded-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge bg-primary rounded-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Junk
<span class="badge bg-primary rounded-pill">99</span>
</li>
</ul>

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

Nhóm danh sách kèm badge trên QuanTriMang.com

Trên đây là tất cả những điều bạn cần biết về cách tạo nhóm danh sách trong Bootstrap 5. Như bạn thấy rất dễ dàng tạo được các nhóm danh sách chuyên nghiệm cho web chỉ bằng cách thay đổi một chút thành phần khi code bằng Bootstrap 5.

Thứ Sáu, 02/12/2022 16:54

5 ★ 2 👨 679

#Bootstrap