Đối với các lập trình viên website thì phân trang là khái niệm vô cùng quen thuộc và khi bạn tìm đến bài viết này chắc hẳn sẽ không xa lạ với khái niệm này vì vậy chúng ta sẽ không đi tìm hiểu lại khái niệm phân trang là gì nữa mà sẽ bắt đầu ngay vào tìm hiểu về pagination (Phân trang) trong Bootstrap 4 các bạn nhé. Một điều lưu ý là ở đây chúng ta chủ yếu thiết kế giao diện web sử dụng Bootstrap 4 chứ không phải cách lấy và hiển thị dữ liệu từ database.
Phân trang cơ bản trong Bootstrap 4
Để tạo phân trang cơ bản, hãy thêm lớp .pagination vào một phần tử ul. Sau đó, thêm .page-item vào từng phần tử li và một lớp .page-link vào mỗi liên kết bên trong li:
Ví dụ:
<div class="container"> <h2 id="phan-trang-trong-bootstrap-4">Phân trang trong Bootstrap 4</h2> <ul class="pagination"><li> </li><li class="page-item"><a class="page-link" href="#">Previous</a></li><li> </li><li class="page-item"><a class="page-link" href="#">1</a></li><li> </li><li class="page-item"><a class="page-link" href="#">2</a></li><li> </li><li class="page-item"><a class="page-link" href="#">3</a></li><li> </li><li class="page-item"><a class="page-link" href="#">Next</a></li><li> </li></ul> </div>
Trạng thái hoạt động (Active State)
Trạng thái hoạt động chỉ cho bạn biết mình đang ở trang nào và trang đó được gọi là trang được 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 trang khác) chúng ta chỉ cần thêm lớp . active vào là được. Trong bootstrap 4 mặc định trang được kích hoạt có màu nền là màu xanh dương (blue) và chữ màu trắng.
<div class="container"> <h2 id="trang-duoc-kich-hoat">Trang được kích hoạt</h2> <ul class="pagination"><li> </li><li class="page-item"><a class="page-link" href="#">Previous</a></li><li> </li><li class="page-item"><a class="page-link" href="#">1</a></li><li> </li><li class="page-item active"><a class="page-link" href="#">2</a></li><li> </li><li class="page-item"><a class="page-link" href="#">3</a></li><li> </li><li class="page-item"><a class="page-link" href="#">Next</a></li><li> </li></ul> </div>
Hủy kích hoạt trang
Tương tự như kích hoạt trang, chúng ta có thể hủy kích hoạt trang nào đó bằng cách thêm lớp .disabled và khi đó trang bị hủy kích hoạt sẽ không thể click vào và có màu nhạt hơn.
<div class="container"> <h2 id="pagination-disabled-state">Pagination - Disabled State</h2> <ul class="pagination"><li> </li><li class="page-item"><a class="page-link" href="#">Previous</a></li><li> </li><li class="page-item disabled"><a class="page-link" href="#">1</a></li><li> </li><li class="page-item"><a class="page-link" href="#">2</a></li><li> </li><li class="page-item"><a class="page-link" href="#">3</a></li><li> </li><li class="page-item"><a class="page-link" href="#">Next</a></li><li> </li></ul> </div>
Kích thước phân trang
Bên cạnh kích thước mặc định Bootstrap 4 còn hỗ trợ chúng ta 2 lớp để tăng, giảm kích thước phân trang đó là lớp .pagination-lg cho kích thước lớn và lớp .pagination-sm cho kích thước nhỏ hơn. Ngoài ra, bạn hoàn toàn có thể tự định nghĩa các lớp CSS riêng biệt để có kích thước như ý nếu muốn.
<div class="container"> <h2 id="kich-thuoc-phan-trang">Kích thước phân trang</h2> <p>Lớn:</p> <ul class="pagination pagination-lg"><li> </li><li class="page-item"><a class="page-link" href="#">Previous</a></li><li> </li><li class="page-item"><a class="page-link" href="#">1</a></li><li> </li><li class="page-item"><a class="page-link" href="#">2</a></li><li> </li><li class="page-item"><a class="page-link" href="#">3</a></li><li> </li><li class="page-item"><a class="page-link" href="#">Next</a></li><li> </li></ul> <p>Mặc định:</p> <ul class="pagination"><li> </li><li class="page-item"><a class="page-link" href="#">Previous</a></li><li> </li><li class="page-item"><a class="page-link" href="#">1</a></li><li> </li><li class="page-item"><a class="page-link" href="#">2</a></li><li> </li><li class="page-item"><a class="page-link" href="#">3</a></li><li> </li><li class="page-item"><a class="page-link" href="#">Next</a></li><li> </li></ul> <p>Nhỏ:</p> <ul class="pagination pagination-sm"><li> </li><li class="page-item"><a class="page-link" href="#">Previous</a></li><li> </li><li class="page-item"><a class="page-link" href="#">1</a></li><li> </li><li class="page-item"><a class="page-link" href="#">2</a></li><li> </li><li class="page-item"><a class="page-link" href="#">3</a></li><li> </li><li class="page-item"><a class="page-link" href="#">Next</a></li><li> </li></ul> </div>
Căn chỉnh vị trí phân trang (Pagination Alignment)
Sử dụng các lớp tiện ích để thay đổi căn chỉnh vị trí của phân trang:
Mặc định phân trang được căn trái, chúng ta dùng lớp .justify-content-center để căn giữ, dùng lớp .justify-content-end để căn phải
Ví dụ:
<!-- Default (left-aligned) --> <ul class="pagination" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!-- Center-aligned --> <ul class="pagination justify-content-center" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!-- Right-aligned --> <ul class="pagination justify-content-end" style="margin:20px 0"> <li class="page-item">...</li> </ul>
Breadcrumbs trong Bootstrap 4
Một dạng khác để phân trang, là breadcrumbs:
Các lớp .breadcrumb và .breadcrumb-item cho biết vị trí của trang hiện tại trong hệ thống phân cấp điều hướng:
<div class = "container"> <h2> Breadcrumbs </h2> <p> Lớp .breadcrumb cho biết vị trí của trang hiện tại trong phân cấp điều hướng: </p> <ul class = "breadcrumb"> <li class = "breadcrumb-item"> <a href="#"> Ảnh </a> </li> <li class = "breadcrumb-item"> <a href="#"> Mùa hè 2017 </a> </li> <li class = "breadcrumb-item"> <a href="#"> Ý </a> </li> <li class = "breadcrumb-item active"> Rome </li> </ul> </div>
Tùy biến giao diện phân trang
Để tùy biến giao diện phân trang chúng ta bắt buộc 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. Ví dụ dưới đây đổi đường viền, nền, chữ thành màu tím như sau.
<!DOCTYPE html> <html lang="en"> <head> <title>Ví dụ phân trang</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: magenta; } .page-item.active .page-link { background-color:magenta; border-color:magenta } .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover { color: magenta; background-color: #eee; border-color: #ddd; } .pagination > .active > a { color: white; background-color: magenta; border: solid 1px magenta; } .pagination > .active > a:hover { background-color: magenta; border: solid 1px magenta; } </style> </head> <body> <div class="container"> <h2>Tùy biến giao diện phân trang:</h2> <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>
Kết quả:
Lời kết:
Thông qua các ví dụ trên chắc hẳn các bạn đã nắm vững được cách thiết kế giao diện phân trang trong Bootstrap 4 rồi phải không nào. Có gì thắc mắc các bạn hãy comment bên dưới nhé!
