[Bootstrap 4] Phần 18: Nhóm danh sách (List Group)

Trong Bootstrap 4, nhóm danh sách là một nhóm chứa tên tiêu đề các mục con. Bạn có thể áp dụng nhóm danh sách để tạo thanh menu điều hướng trang hoặc phân loại nội dung website theo từng nhóm/thể loại khác nhau.

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

Một nhóm danh sách cơ bản được xem là một danh sách không có thứ tự, với các phần tử con trong danh sách. Để tạo nhóm danh sách, bạn chỉ cần dùng hai phần tử ul, li và hai lớp .list-group, .list-group-item để định nghĩa.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Nhóm danh sách cơ bản --- dammio.com</h2>
  <ul class="list-group">
    <li class="list-group-item">Phần tử thứ 1</li>
    <li class="list-group-item">Phần tử thứ 2</li>
    <li class="list-group-item">Phần tử thứ 3</li>
  </ul>
</div>

</body>
</html>

Trạng thái kích hoạt

Trong danh sách phần tử, bạn có thể chọn phần tử nào được kích hoạt (nôm na là hiển thị nổi bật hơn các phần tử) bằng cách dùng lớp .active như sau.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Nhóm danh sách --- dammio.com</h2>
  <ul class="list-group">
    <li class="list-group-item">Phần tử thứ 1</li>
    <li class="list-group-item active">Phần tử thứ 2 được kích hoạt bằng lớp .active</li>
    <li class="list-group-item">Phần tử thứ 3</li>
  </ul>
</div>

</body>
</html>

Trạng thái vô hiệu hóa

Tương tự như trạng thái kích hoạt, bạn có thể vô hiệu hóa phần tử nào đó bằng cách sử dụng lớp .disabled như ví dụ sau.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Nhóm danh sách --- dammio.com</h2>
  <ul class="list-group">
    <li class="list-group-item">Phần tử thứ 1</li>
    <li class="list-group-item .disabled">Phần tử thứ 2 được vô hiệu hóa bằng lớp .disabled </li>
    <li class="list-group-item">Phần tử thứ 3</li>
  </ul>
</div>

</body>
</html>

Nhóm danh sách với các phần tử liên kết

Mỗi phần tử trong danh sách có thể liên kết đến một địa chỉ URL nào đó. Để làm được như vậy, bạn chỉ cần thêm thuộc tính href và lớp .list-group-item-action ở mỗi phần tử con.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Nhóm danh sách phần tử liên kết --- dammio.com</h2>
  <ul class="list-group">
    <a href="https://www.dammio.com" class="list-group-item list-group-item-action">dammio.com</a>
    <a href="https://www.dammio.com" class="list-group-item list-group-item-action">Phần tử thứ 2</a>
    <a href="https://www.dammio.com" class="list-group-item list-group-item-action">Phần tử thứ 3</a>
  </ul>
</div>

</body>
</html>

Loại bỏ viền và góc bo tròn

Để loại bỏ viền (border) và các góc bo tròn trong danh sách nhóm, bạn chỉ cần sử dụng lớp .list-group-flush. Từ “flush” có nghĩa là “tuôn ra”, “phun ra” hoặc “dội, rửa” nhà vệ sinh. Trong trường hợp, flush có nghĩa là loại bỏ, làm sạch viền và góc bo tròn cho nhóm danh sách. Khi dùng lớp .list-group-flush, các đường viền bên ngoài biến mất, bạn chỉ có thể thấy các viền ngăn cách các phần tử ở giữa.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Nhóm danh sách không viền, không bo tròn --- dammio.com</h2>
  <ul class="list-group list-group-flush">
    <li class="list-group-item list-group-item-action">dammio.com</li>
    <li class="list-group-item list-group-item-action">Phần tử thứ 2</li>
    <li  class="list-group-item list-group-item-action">Phần tử thứ 3</li>
  </ul>
</div>

</body>
</html>

Loại góc bo tròn

Tương tự như trên, thay vì loại bỏ viền thì nếu bạn chỉ muốn bỏ góc bo tròn, bạn chỉ cần thêm lớp .rounded-0 ở mỗi phần tử con là đủ.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Nhóm danh sách không có góc bo tròn --- dammio.com</h2>
  <ul class="list-group">
    <li class="list-group-item list-group-item-action rounded-0">dammio.com</li>
    <li class="list-group-item list-group-item-action rounded-0">Phần tử thứ 2</li>
    <li class="list-group-item list-group-item-action rounded-0">Phần tử thứ 3</li>
  </ul>
</div>
 
</body>
</html>

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

Khi nhóm danh sách hiển thị theo chiều ngang, khi đó nhóm danh sách trở thành một thanh điều hướng ngang hay một menu ngang trong giao diện web. Để hiển thị theo chiều ngang, đơn giản chúng ta chỉ cần thêm lớp .list-group-horizontal như ví dụ sau.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Nhóm danh sách theo chiều ngang --- dammio.com</h2>
  <ul class="list-group list-group-horizontal">
    <li class="list-group-item list-group-item-action">dammio.com</li>
    <li class="list-group-item list-group-item-action">Phần tử thứ 2</li>
    <li class="list-group-item list-group-item-action">Phần tử thứ 3</li>
  </ul>
</div>
 
</body>
</html>

Các lớp bối cảnh

Tương tự như các thành phần khác trong Bootstrap, nhóm danh sách và các phần tử con đều có thể thể hiện bối cảnh (màu sắc) thông qua các lớp như .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 and list-group-item-light.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Các lớp bối cảnh với các phần tử liên kết --- dammio.com</h2>
  <p>Rê chuột và nhấp lên các phần tử để thấy sự khác biệt =)</p>
  <div class="list-group">
    <a href="https://www.dammio.com" class="list-group-item list-group-item-action">Action item</a>
    <a href="https://www.dammio.com" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
    <a href="https://www.dammio.com" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
    <a href="https://www.dammio.com" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
    <a href="https://www.dammio.com" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
    <a href="https://www.dammio.com" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
    <a href="https://www.dammio.com" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
    <a href="https://www.dammio.com" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
    <a href="https://www.dammio.com" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
  </div>
</div>
 
</body>
</html>

Nhóm danh sách chứa huy hiệu/nhãn hiệu (badge)

Tương tự các thành phần khác, bạn chỉ cần thêm các lớp huy hiệu (.badge, .badge-pill,…) thông qua thẻ span bên trong các phần tử để hiển thị huy hiệu.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Nhóm danh sách với các huy hiệu --- dammio.com</h2>
  <p>Kết hợp các lớp .badge để hiển thị huy hiệu cho các phần tử con:</p>
  <ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Hộp thư
      <span class="badge badge-primary badge-pill">12</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Quảng cáo
      <span class="badge badge-primary badge-pill">50</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Linh tinh
      <span class="badge badge-primary badge-pill">99</span>
    </li>
  </ul>
</div>

</body>
</html>

Canh giữa các phần tử trong nhóm danh sách

Đây cũng là vấn đề đôi khi bạn hay gặp trong quá trình thiết kế, để canh giữa nội dung thì có nhiều cách. Bài viết chỉ ra cho bạn một cách đó là một div ngoài với lớp .text-center như sau.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap --- dammio.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
 
  <div class="card text-center">
    <div class="card-header">
      DAMMIO.COM
    </div>
    <div class="list-group list-group-flush">
      <a href="https://www.dammio.com" class="list-group-item">dammio.com</a>
      <a href="https://www.dammio.com" class="list-group-item">dammio.com</a>
      <a href="https://www.dammio.com" class="list-group-item">dammio.com</a>
      <a href="https://www.dammio.com" class="list-group-item">dammio.com</a>
      <a href="https://www.dammio.com" class="list-group-item">dammio.com</a>
    </div>
  </div>
</div>
 
</body>
</html>

Kết luận

Bài viết đã hướng dẫn bạn cách tạo và áp dụng nhóm danh sách trong Bootstrap 4. Mời bạn tiếp tục theo dõi bài tiếp theo.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Liên quan: [Bootstrap 4] Phần 17: Phân trang ảo cho bảng biểu (Table) bằng Bootstrap 4 và DataTables

Trích dẫn bài viết

APA:
Dammio. (2020). [Bootstrap 4] Phần 18: Nhóm danh sách (List Group). https://www.dammio.com/2020/02/07/bootstrap-4-phan-18-nhom-danh-sach-list-group.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[Bootstrap 4] Phần 18: Nhóm danh sách (List Group)}, year = {2020}, url = {https://www.dammio.com/2020/02/07/bootstrap-4-phan-18-nhom-danh-sach-list-group}, urldate = {2025-01-09} }

Theo dõi

1 Bình luận

Cũ nhất

Mới nhất Được bỏ phiếu nhiều nhất

Phản hồi nội tuyến

Xem tất cả bình luận

[Bootstrap 4] Phần 17: Phân trang ảo cho bảng biểu (Table) bằng Bootstrap 4 và DataTables | | DAMMIO

4 năm trước

[…] [Bootstrap 4] Phần 18: Nhóm danh sách (List Group) – 07 tháng 02, 2020 lúc 4:12:36 Sáng […]

Trả lời

wpDiscuz

Kết nối