Bài 16: List Groups trong Bootstrap 5
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>
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>
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>
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>
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:
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:
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>
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>
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>
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:
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.
Bạn nên đọc
-
Bài 13: Progress Bars trong Bootstrap 5
-
Bài 3: Hệ thống lưới Grid System trong Bootstrap 5
-
Bài 12: Badge trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Giải đáp những câu hỏi về Bootstrap thường gặp
-
Bài 5: Màu sắc trong Bootstrap 5
-
Bài 2: Tìm hiểu về Container trong Bootstrap 5
-
Bài 11: Button Group trong Bootstrap 5
-
Bài 15: Pagination trong Bootstrap 5
Cũ vẫn chất
-
30 lời chúc sinh nhật chồng yêu ý nghĩa và ngọt ngào
Hôm qua 1 -
Cách sao chép định dạng trong Google Docs, Sheets và Slides
Hôm qua -
Hướng dẫn chuyển sang ngôn ngữ tiếng Việt cho Gmail
Hôm qua -
70 câu ca dao, tục ngữ về học tập hay nhất
Hôm qua -
Những câu nói hay về mùa thu, lời chào mùa thu hay và ý nghĩa
Hôm qua -
Hướng dẫn toàn tập Word 2016 (Phần 26): Tạo đồ họa SmartArt
Hôm qua -
Đấu Trường Chân Lý Mobile (TFT Mobile)
-
Code LaLa Land Lục Địa Bí Ẩn mới nhất và cách nhập code
Hôm qua 2 -
‘Ghét’ Apple, Mark Zuckerberg vẫn phải dùng Macbook nhưng nó lạ lắm
Hôm qua 1 -
Bạn đã sử dụng keo tản nhiệt đúng cách?
Hôm qua