Tương tự Bootstrap 3, Bootstrap 4 cũng có chức năng để thể hiện việc phân trang trên giao diện. Trước khi tìm hiểu về cách phân trang trong Bootstrap, một số kiến thức nền giúp bạn hiểu về phân trang như sau.
Phân trang (paging) là một khái niệm rất quen thuộc trong việc thiết kế và phát triển ứng dụng Web. Giả sử bạn có 10000 sản phẩm trong cơ sở dữ liệu, và nếu sử dụng truy vấn để hiển thị hết 10000 sản phẩm này lên 1 trang web, tất nhiên bạn phải chờ rất lâu mới có thể thấy toàn bộ dữ liệu. Hơn nữa, máy của bạn sẽ bị đơ, nguy hiểm hơn là Web Server cũng bị như vậy, thậm chí nguy hiểm hơn là rớt toàn bộ hệ thống. Trong thực tế, tất cả các Web Server và Server Database đều có cơ chế chặn dòng dữ liệu lớn vào/ra, vì vậy thông thường sẽ bung ra lỗi. Do đó, thông thường người ta sử dụng kỹ thuật phân trang để hạn chế số lượng record trong database có thể hiển thị trong cùng 1 thời điểm (ví dụ 100 sản phẩm), do đó để hiển thị hết toàn bộ 1 triệu sản phẩm, bạn cần phân ra thành 100 trang con so với 1 trang chứa 10000 sản phẩm. Con số này không quá lớn giúp người dùng có thể tương tác với website của bạn dễ dàng.
Ở Bootstrap 4, việc phân trang chủ yếu là thiết kế giao diện Web, không phải là việc lập trình và xây dựng mã nguồn để lấy dữ liệu từ database, sau đó phân thành các trang và hiển thị trên Web.
Tạo giao diện phân trang
Để tạo giao diện phân trang cơ bản, bạn cần thêm lớp .pagination vào phần tử ul. Sau đó, cứ mỗi phần tử li nằm trong ul thì bạn thêm lớp .page-item, đối với liên kết bên trong li thì bạn dùng lớp .page-link. Hãy xem ví dụ đơn giản 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>Phân trang trong Bootstrap 4 ---- dammio.com</h2>
<p>Thêm lớp .pagination vào phần tử ul, sau đó thêm lớp .page-item vào mỗi phần tử và với 1 liên kết trong li thì thêm lớp .page-link:</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Trước</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Sau</a></li>
</ul>
</div>
</body>
</html>
Hiển thị trang cần kích hoạt
Nếu bạn muốn trang nào đó được kích hoạt, có màu sáng hơn so với các trang khác, bạn chỉ cần thêm lớp .active là được. Mặc định trang được kích hoạt có màu xanh dương (blue) và chữ màu trắng.
<!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>Phân trang trong Bootstrap 4 ---- dammio.com</h2>
<p>Thêm lớp .active để kích hoạt trang bất kỳ:</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Trước</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Sau</a></li>
</ul>
</div>
</body>
</html>
Hủy kích hoạt trang
Tương tự như kích hoạt trang, để hủy kích hoạt trang nào đó, bạn cần thêm lớp .disabled như sau. Khi đó trang bị hủy kích hoạt để có màu nhạt.
<!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>Phân trang trong Bootstrap 4 ---- dammio.com</h2>
<p>Thêm lớp .disabled để hủy kích hoạt trang bất kỳ:</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Trước</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item disabled"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Sau</a></li>
</ul>
</div>
</body>
</html>
Kích thước phân trang
Để tăng, giảm kích thước phân trang, bạn có thể dùng 2 lớp: .pagination-lg cho kích thước lớn và .pagination-sm cho kích thước nhỏ hơn. Ngoài ra, bạn phải tự định nghĩa các lớp CSS riêng để có kích thước như ý nếu muốn.
<!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>Phân trang trong Bootstrap 4 ---- dammio.com</h2>
<p>Thêm 2 lớp: .pagination-lg và .pagination-sm để tăng giảm kích thước:</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Trước</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item disabled"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Sau</a></li>
</ul>
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">Trước</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item disabled"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Sau</a></li>
</ul>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">Trước</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item disabled"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Sau</a></li>
</ul>
</div>
</body>
</html>
Căn chỉnh phân trang
Tương tự các bố cục HTML khác, bạn có thể canh chỉnh dòng phân trang ở bên trái, giữa và bên phải. Mặc định giao diện hiển thị phân trang là nằm bên trái, để hiển thị ở giữa dùng lớp .justify-content-center, ở bên phải thì dùng lớp .justify-content-end 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>Phân trang trong Bootstrap 4 ---- dammio.com</h2>
<p>Sử dụng lớp justify-content-center (canh giữa) và .justify-content-end (canh phải ) cho vùng phân trang:</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Trước</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item disabled"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Sau</a></li>
</ul>
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="#">Trước</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item disabled"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Sau</a></li>
</ul>
<ul class="pagination justify-content-end">
<li class="page-item"><a class="page-link" href="#">Trước</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item disabled"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Sau</a></li>
</ul>
</div>
</body>
</html>
Breadcrumb
Breadcrumb trong tiếng Anh có nghĩa là bánh mì, hoặc cắt lát như bánh mì. Thật ra, trong giao diện Web Breadcrumb là một dạng điều hướng (navigation) chứa các mục liên kết phân cấp từ lớn đến nhỏ, ví dụ Trang chủ –> Giới thiệu –> Lịch sử hình thành. Để dùng breadcrumb trong Bootstrap 4, bạn chỉ cần sử dụng lớp .breadcrumb và .breadcrumb-item cho mỗi phần tử con trong mô hình phân cấp.
<!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>Breadcrumb trong Bootstrap 4 --- dammio.com</h2>
<p>Sử dụng lớp .breadcrumb để thể hiện breadcum và lớp .breadcrumb-item chỗ mỗi phần tử con:</p>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Trang chủ</a></li>
<li class="breadcrumb-item"><a href="#">Giới thiệu</a></li>
<li class="breadcrumb-item"><a href="#">Lịch sử hình thành</a></li>
</ul>
</div>
</body>
</html>
Tùy biến giao diện phân trang
Để tùy biến giao diện phân trang, không có cách nào khác là bạn phải sử dụng lớp CSS ghi đè các lớp các sẵn trong tập tin pagination.css của Bootstrap. Hãy xem một ví dụ thay đổi đường viền, nền, chữ thành màu xanh lá 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>
<style>
.pagination > li > a
{
background-color: white;
color: green
}
.page-item.active .page-link
{
background-color:green;
border-color:green
}
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
color: green;
background-color: #eee;
border-color: #ddd;
}
.pagination > .active > a
{
color: white;
background-color: green;
border: solid 1px green;
}
.pagination > .active > a:hover
{
background-color: green;
border: solid 1px green;
}
</style>
</head>
<body>
<div class="container">
<h2>Phân trang trong Bootstrap 4 ---- dammio.com</h2>
<p>Tùy biến giao diện phân trang:</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Trước</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">Sau</a></li>
</ul>
</div>
</body>
</html>
Nhúng giao diện phân trang vào một bảng có thanh cuộn ngang
Nếu bạn có một giao diện phân trang với hàng chục trang và khi đó có thể làm bể giao diện website. Giải pháp đưa ra là bạn có thể nhúng giao diện phân trang vào trong 1 bảng đáp ứng (lớp .table-responsive) và có thanh cuộn ngang giúp giao diện không bị bể. Hãy xem 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>Phân trang trong Bootstrap 4 ---- dammio.com</h2>
<p>Giao diện chứa trong một bảng đáp ứng (.table-responsive) để tránh bể giao diện với lượng lớn trang được hiển thị:</p>
<nav aria-label="Ví dụ điều hướng trang" class="table-responsive mb-2">
<ul class="pagination mb-0">
<li class="page-item"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">6</a></li>
<li class="page-item"><a class="page-link" href="#">7</a></li>
<li class="page-item"><a class="page-link" href="#">8</a></li>
<li class="page-item"><a class="page-link" href="#">9</a></li>
<li class="page-item"><a class="page-link" href="#">10</a></li>
<li class="page-item"><a class="page-link" href="#">11</a></li>
<li class="page-item"><a class="page-link" href="#">12</a></li>
<li class="page-item"><a class="page-link" href="#">13</a></li>
<li class="page-item"><a class="page-link" href="#">14</a></li>
<li class="page-item"><a class="page-link" href="#">15</a></li>
<li class="page-item"><a class="page-link" href="#">16</a></li>
<li class="page-item"><a class="page-link" href="#">17</a></li>
<li class="page-item"><a class="page-link" href="#">18</a></li>
<li class="page-item"><a class="page-link" href="#">19</a></li>
<li class="page-item"><a class="page-link" href="#">20</a></li>
<li class="page-item"><a class="page-link" href="#">21</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
</body>
</html>
Kết luận
Bài viết đã chỉ ra cho bạn cách thiết kế giao diện phân trang trong Bootstrap 4 thông qua các ví dụ. Mời bạn tiếp tục theo dõi bài tiếp theo.
Trích dẫn bài viết
- APA:
Dammio. (2019). [Bootstrap 4] Phần 16: Phân trang trong Bootstrap 4. https://www.dammio.com/2019/12/12/bootstrap-4-phan-16-phan-trang-trong-bootstrap-4. - BibTeX:
@misc{dammio,
author = {Dammio},
title = {[Bootstrap 4] Phần 16: Phân trang trong Bootstrap 4},
year = {2019},
url = {https://www.dammio.com/2019/12/12/bootstrap-4-phan-16-phan-trang-trong-bootstrap-4},
urldate = {2025-03-20}
}
![[Bootstrap] Phần 2: Hệ thống lưới trong Bootstrap](https://www.dammio.com/wp-content/uploads/2016/11/no-image-410x260.png "[Bootstrap] Phần 2: Hệ thống lưới trong Bootstrap")
![[Bootstrap 4] Phần 7: Hình ảnh](https://www.dammio.com/wp-content/uploads/2018/10/girl-410x260.jpg "[Bootstrap 4] Phần 7: Hình ảnh")
![[Bootstrap 4] Phần 6: Bảng biểu](https://www.dammio.com/wp-content/uploads/2017/10/bootstrap-3-410x260.png "[Bootstrap 4] Phần 6: Bảng biểu")
![[Bootstrap 4] Phần 10: Nút nhấn (button)](https://www.dammio.com/wp-content/uploads/2018/10/block_buttons_bs4-410x260.png "[Bootstrap 4] Phần 10: Nút nhấn (button)")
![[Bootstrap 4] Phần 5: Màu sắc trong Bootstrap 4](https://www.dammio.com/wp-content/uploads/2018/07/bs4_colors_bg-410x260.png "[Bootstrap 4] Phần 5: Màu sắc trong Bootstrap 4")
[…] [Bootstrap 4] Phần 16: Phân trang trong Bootstrap 4 – 12 tháng 12, 2019 lúc 8:11:53 Sáng […]
[…] [Bootstrap 4] Phần 16: Phân trang trong Bootstrap 4 – 12 tháng 12, 2019 lúc 8:11:53 Sáng […]