Bootstrap: Phân trang (Pagination)

Cung cấp các liên kết phân trang cho website hoặc ứng dụng của bạn với thành phần phân trang, hoặc đơn giản hơn là theo dạng pager.

Phân trang mặc định

Thành phần phân trạng đơn giản lấy cảm hứng từ Rdio, rất hữu ích trong việc hiển thị kết quả tìm kiếm và cho các ứng dụng. Thành phần này được hiển thị dưới dạng các khối lớn nên rất khó để người dùng bấm trượt, ngoài ra nó cũng có thể mở rộng một cách dễ dàng.

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

Trạng thái đang kích hoạt và trạng thái vô hiệu hóa

Các liên kết được tùy chỉnh tương ứng với các trường hợp khác nhau. Hãy sử dụng .disabled đối với các liên kết không thể click và sử dụng .active để xác định trang nào là trang hiện tại.

<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
  ...
</ul>

Bạn cũng có thể áp dụng các trạng thái trên lên thẻ <span> thay vì <a> để xóa bỏ tính năng liên kết của <a> mà vẫn giữ được style như mong đợi.

<ul class="pagination">
  <li class="disabled"><span>&laquo;</span></li>
  <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
  ...
</ul>

Kích thước

Bạn muốn thành phần phân trang hiển thị theo dạng lớn hay nhỏ? Hãy thêm .pagination-lg hoặc .pagination-sm tương ứng với kích thước mà bạn muốn hiển thị.

<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

Pager

Các liên kết "lùi" và "tiến" được sử dụng như một kiểu phân trang đơn giản với chỉ với một chút markup và style, rất thích hợp cho các trang web dạng blog hoặc báo chí.

Ví dụ mặc định

Theo mặc định, pager sẽ tự động căn giữa các liên kết.

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Căn chinh các liên kết

Bạn có thể căn chỉnh các liên kết về phía mà bạn muốn:

<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Trạng thái vô hiệu hóa

Các liên kết pager cũng class .disabled để vô hiệu hóa liên kết khi phân trang.

<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>