Trong hướng dẫn này, bạn sẽ học cách tạo phân trang bằng Bootstrap.
Phân trang (pagination) là quá trình sắp xếp nội dung bằng cách chia nó thành các trang riêng biệt.
Phân trang được sử dụng khá thường xuyên trong hầu hết mọi ứng dụng web, chẳng hạn như nó được sử dụng bởi các công cụ tìm kiếm để hiển thị một số kết quả hạn chế trên các trang kết quả tìm kiếm hoặc hiển thị một số lượng bài đăng hạn chế cho mỗi trang trên blog hoặc diễn đàn.
<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>
Kết quả của ví dụ trên sẽ giống như sau:
Các liên kết bên trong phân trang Bootstrap có thể được tùy chỉnh thêm cho các trường hợp khác nhau, như khi người dùng đến phần kết thúc hoặc phần bắt đầu, hoặc chỉ ra số trang hiện tại cho người dùng. Sử dụng lớp .disabled
để tắt các liên kết và .active
để chỉ ra trang hiện tại.
<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>
Kết quả của ví dụ trên sẽ giống như sau:
Lưu ý: Lớp.disabled
chỉ hiển thị các liên kết dưới dạng bị vô hiệu hóa, nó không loại bỏ chức năng nhấp chuột, để làm điều này, bạn cần xóa thuộc tính href của thẻ<a>
hoặc thay thế thẻ<a>
bằng thẻ<span>
như ví dụ dưới đây.
<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>
Bạn cũng có thể thay đổi kích thước phân trang để tăng hoặc giảm vùng có thể nhấp.
Thêm các lớp định cỡ tương ứng như .pagination-lg
hoặc .pagination-sm
vào lớp .pagination
cơ sở để tạo phân trang lớn hơn hoặc nhỏ hơn. Đây là một ví dụ:
<!-- 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>
Kết quả của ví dụ trên sẽ giống như sau:
Theo mặc định, phân trang được căn chỉnh theo chiều ngang bên trái. Để căn chỉnh nó ở giữa trang, hãy thêm lớp .justify-content-center
vào lớp .pagination
cơ sở, như hình 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>
Kết quả của ví dụ trên sẽ giống như sau:
Tương tự, bạn có thể sử dụng lớp .justify-content-end
để căn chỉnh phân trang sang bên phải:
<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>
Kết quả của ví dụ trên sẽ giống như sau:
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.