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ẽ để hiển thị một chuỗi thông tin.Hãy cùng Sinitc.com tìm hiểu cách dùng List-group trong Bootstrap 5 nhé!
Bài 15: Pagination trong Bootstrap 5
![]()
Liên kết các mục với class theo ngữ cả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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Sinitc.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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Sinitc.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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Sinitc.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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Sinitc.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 Sinitc.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 Sinitc.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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Sinitc.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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Sinitc.com</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 Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 Sinitc.com</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 Sinitc.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ài 17: Cards trong Bootstrap 5Chủ đề Tương tự
- Tags:
Không có đánh giá nào.
Viết một đánh giá.
Để bình luận vui lòng Đăng nhập tài khoản ! hoặcĐăng ký mới!
S - Tech
Điện máy
Khoa học
Cuộc sống
Ô tô, Xe máy
Tiện ích
Công nghệ
Video
