“Bài viết số 15: Sử dụng Pagination trong Bootstrap 5” giúp người đọc hiểu cách sử dụng tính năng Pagination (phân trang) trong Bootstrap 5. Bootstrap là một framework mã nguồn mở phổ biến, được sử dụng rộng rãi để phát triển giao diện web chuyên nghiệp. Tính năng Pagination giúp chia nhỏ nội dung và hiển thị nó thành các trang để người dùng dễ dàng điều hướng. Bài viết này sẽ hướng dẫn các bước cài đặt và sử dụng Pagination trong Bootstrap 5, từ việc thiết kế giao diện, đến tiện ích và lập trình.
Pagination trong Bootstrap 5 được mô tả ở bài 15.
Bài học sẽ giới thiệu về phân trang trong Bootstrap. Bootstrap 5 sắp xếp danh sách không theo thứ tự trên giao diện.
Phân trang trong Boostrap 5
Dưới đây là danh sách các lớp mà Bootstrap cung cấp để phân trang:
.pagination
Miêu tả: Thêm một lớp này để tạo phân trang cho trang web.
Code mẫu:
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li><a href = "#">1</a></li>
.......
</ul>.disabled, .active
Đặc điểm: Tùy chỉnh liên kết bằng cách sử dụng lớp .disalbed để làm cho liên kết không thể nhấp và lớp .active để chỉ định trang hiện tại.
<ul class = "pagination">
<li class = "disabled"><a href = "#">«</a></li>
<li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li>
.......
</ul>.pagination-lg, .pagination-sm
Miêu tả: Sử dụng các lớp này cho các mục có kích thước khác nhau.
Code mẫu:
<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>Phân trang cơ bản
Nếu bạn có một trang web gồm nhiều trang khác nhau, bạn có thể mong muốn áp dụng một phong cách phân trang nhỏ cho mỗi trang đó.
Để tạo một phân trang cơ bản, bạn cần thêm lớp .pagination vào một thành phần <ul>. Sau đó, bổ sung lớp .page-item vào từng thẻ <li> và một lớp .page-link vào mỗi liên kết bên trong <li>:
Ví dụ:
<!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>Phân trang</h2>
<p>Để tạo phân trang cơ bản, thêm class .pagination vào một nhân tố ul. Sau đó, thêm .page-item vào từng thẻ li và một class .page-link vào từng link bên trong li:</p>
<ul >
<li ><a href="#">Previous</a></li>
<li ><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li ><a href="#">3</a></li>
<li ><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>
Trạng thái hoạt động
Lớp .active được sử dụng để làm nổi bật trang hiện tại.
Ví dụ:
<!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>Phân trang - Trạng thái hoạt động</h2>
<p>Thêm class .active để người dùng biết họ đang ở trên trang nào của Quantrimang.com:</p>
<ul >
<li ><a href="#">Previous</a></li>
<li ><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li ><a href="#">3</a></li>
<li ><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>
Trạng thái vô hiệu hóa
Lớp .disable được sử dụng cho các trang không thể nhấp chuột. Ví dụ:
<!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>Phân trang Quantrimang.com - Trạng thái không hoạt động</h2>
<p>Thêm class .disabled cho trang bị vô hiệu hóa:</p>
<ul >
<li ><a href="#">Previous</a></li>
<li ><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li ><a href="#">3</a></li>
<li ><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>
Kích thước phân trang
Các khối phân trang trong Bootstrap 5 cũng có thể được điều chỉnh để có kích thước lớn hơn hoặc nhỏ hơn. Để khối phân trang lớn hơn, ta thêm lớp .pagination-lg vào, và để khối phân trang nhỏ hơn, ta thêm lớp .pagination-sm. Ví dụ:
<!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>Kích thước khối phân trang trên Quantrimang</h2>
<p>Thêm .pagination-lg cho khối lớn hơn hoặc .pagination-sm cho khối nhỏ hơn.</p>
<p>Large:</p>
<ul >
<li ><a href="#">Previous</a></li>
<li ><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li ><a href="#">3</a></li>
<li ><a href="#">Next</a></li>
</ul>
<p>Default:</p>
<ul >
<li ><a href="#">Previous</a></li>
<li ><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li ><a href="#">3</a></li>
<li ><a href="#">Next</a></li>
</ul>
<p>Small:</p>
<ul >
<li ><a href="#">Previous</a></li>
<li ><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li ><a href="#">3</a></li>
<li ><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>
Chỉnh lề phân trang
Sử dụng các class tiện ích để thay đổi lề phân trang trong Bootstrap 5. Ví dụ:
<!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ăn lề phân trang trên Quantrimang.com</h2>
<p>Dùng các class tiện ích để thay đổi lề phân trang:</p>
<ul >
<li ><a href="javascript:void(0);">Previous</a></li>
<li ><a href="javascript:void(0);">1</a></li>
<li ><a href="javascript:void(0);">2</a></li>
<li ><a href="javascript:void(0);">Next</a></li>
</ul>
<ul >
<li ><a href="javascript:void(0);">Previous</a></li>
<li ><a href="javascript:void(0);">1</a></li>
<li ><a href="javascript:void(0);">2</a></li>
<li ><a href="javascript:void(0);">Next</a></li>
</ul>
<ul >
<li ><a href="javascript:void(0);">Previous</a></li>
<li ><a href="javascript:void(0);">1</a></li>
<li ><a href="javascript:void(0);">2</a></li>
<li ><a href="javascript:void(0);">Next</a></li>
</ul>
</div>
</body>
</html>
Breadcrumb
Breadcrumb là một cách để phân trang đặc biệt, nó được sử dụng để giúp người dùng xác định vị trí tương đối của mình trong cấu trúc trang. Lớp .breadcrumb và .breadcrumb-item chỉ định vị trí của trang hiện tại trong hệ thống phân cấp điều hướng. Ví dụ:
<!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>Breadcrumbs</h2>
<p>Class .breadcrumb và .breadcrumb-item chỉ vị trí trang hiện tại trong hệ thống phân cấp điều hướng trên trang Quantrimang.com:</p>
<ul >
<li ><a href="#">Photos</a></li>
<li ><a href="#">Summer 2017</a></li>
<li ><a href="#">Italy</a></li>
<li >Rome</li>
</ul>
</div>
</body>
</html>
Dưới đây là tất cả những thông tin bạn cần biết về cách phân trang trong Bootstrap 5. Bạn có thể áp dụng các phương pháp phân trang này vào trang web theo nhu cầu và mục đích phát triển của mình.
Bài 15: Phân trang trong Bootstrap 5