Bootstrap Pagination

Trong hướng dẫn này, bạn sẽ học cách tạo phân trang bằng Bootstrap.

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:

Tạo phân trang bằng Bootstrap

Thiết lập trạng thái disable và active cho phân trang

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:

Thiết lập trạng thái disable và active cho phân trang
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>

Thay đổi kích thước của phân trang

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:

Thay đổi kích thước của phân trang

Căn chỉnh vị trí của phân trang

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:

Căn chỉnh vị trí của phân trang

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:

Căn chỉnh vị trí của phân trang
Bootstrap • Bootstrap Cơ Bản
Prev
Bootstrap Breadcrumb
Next
Bootstrap Badge
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

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.

  • 9 min read
Xem Thêm
Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

  • 8 min read
Xem Thêm
Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

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.

  • 3 min read
Xem Thêm
Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.

  • 13 min read
Xem Thêm
Xem tất cả bài viết về Bootstrap