Bootstrap 4 - Bootstrap Pagination
Pagination trong Bootstrap, cách tạo và sử dụng
Pagination (hay phân trang) trong Bootstrap hiểu nôm na là chia nhỏ nội dung trang web thành các trang con. Tham khảo tiếp bài viết dưới đây của hiepsiit.com để tìm hiểu chi tiết cách tạo Pagination trong Bootstrap như thế nào.
Tạo Pagination (Phân Trang) Trong Bootstrap
Như Taimienphi.vn đã đề cập ở trên, Pagination (phân trang) trong Bootstrap là việc chia nhỏ nội dung trang web thành các trang con.
Hầu hết các ứng dụng web đều sử dụng phân trang, chẳng hạn như các công cụ tìm kiếm sử dụng phân trang để hiển thị giới hạn số lượng kết quả tìm kiếm trên các trang kết quả tìm kiếm hoặc giới hạn số lượng bài viết trên mỗi trang trên blog hoặc diễn đàn.
Ví dụ: trong ví dụ dưới đây minh họa cách tạo phân trang trong Bootstrap:
<nav>
<ul class="pagination">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>
Tùy Chỉnh Trạng Thái Vô Hiệu Hóa / Hoạt Động Cho Các Liên Kết Trong Phân Trang
Chúng ta có thể tùy chỉnh các liên kết (link) trong phân trang cho các trường hợp khác nhau, để người dùng có thể hình dung được họ đang truy cập trang nào hiện tại.
Bằng cách sử dụng lớp .disabled để tạo giao diện các liên kết giống như dạng bị vô hiệu hóa, chưa được truy cập và lớp .active để hiển thị là trang hiện tại mà người dùng truy cập.
Ví dụ: trong ví dụ dưới đây chúng ta tùy chỉnh trạng thái vô hiệu hóa / hoạt động cho các liên kết trong phân trang bằng cách sử dụng các lớp disabled và lớp active:
<nav>
<ul class="pagination">
<li class="page-item disabled"><a href="#" class="page-link" tabindex="-1">Previous</a></li>
<li class="page-item active"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>
<nav>
<ul class="pagination">
<li class="page-item disabled"><span class="page-link">Previous</span></li>
<li class="page-item active"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>
Thay Đổi Kích Thước Phân Trang Trong Bootstrap
Ngoài ra chúng ta cũng có thể thay đổi kích thước phân trang để tăng hoặc giảm kích thước khu vực có thể click được.
Bằng cách sử dụng các lớp kích thước tương đối như .pagination-lg hoặc .pagination-sm vào lớp .pagination để tạo phân trang có kích thước lớn hơn hoặc nhỏ hơn.
Ví dụ: Ví dụ dưới đây minh họa cách thay đổi kích thước phân trang trong Bootstrap:
<!-- Large pagination -->
<nav>
<ul class="pagination pagination-lg">
<li class="page-item disabled"><span class="page-link">Previous</span></li>
<li class="page-item active"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>
<!-- Default pagination -->
<nav>
<ul class="pagination">
<li class="page-item disabled"><span class="page-link">Previous</span></li>
<li class="page-item active"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>
<!-- Small pagination -->
<nav>
<ul class="pagination pagination-sm">
<li class="page-item disabled"><span class="page-link">Previous</span></li>
<li class="page-item active"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>
Căn Chỉnh Phân Trang Trong Bootstrap
Mặc định phân trang trong Bootstrap được căn chỉnh theo chiều ngang nằm về phía bên trái. Để căn chỉnh phân trang chính giữa, chúng ta thêm lớp .justify-content-center vào lớp .pagination như trong ví dụ dưới đây:
<nav>
<ul class="pagination justify-content-center">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>
Tương tự, chúng ta có thể sử dụng lớp .justify-content-end để căn chỉnh phân trang theo chiều ngang nằm về phía bên phải như trong ví dụ dưới đây:
<nav>
<ul class="pagination justify-content-end">
<li class="page-item"><a href="#" class="page-link">Previous</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</nav>