Bootstrap - Phân trang

Chương này thảo luận về tính năng phân trang mà Bootstrap hỗ trợ. Việc phân trang, một danh sách không có thứ tự được Bootstrap xử lý giống như nhiều phần tử giao diện khác.

Phân trang

Bảng sau liệt kê các lớp mà Bootstrap cung cấp để xử lý phân trang.

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>

<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>

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

Phân trang mặc định

Ví dụ sau minh họa việc sử dụng lớp .pagination đã thảo luận trong bảng trên -

<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>

Những trạng thái

Ví dụ sau minh họa việc sử dụng lớp .disabled, .active đã thảo luận trong bảng trên -

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1</a></li>
   <li class = "disabled"><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>

Định cỡ

Ví dụ sau minh họa việc sử dụng các lớp để định cỡ, .pagination-* đã thảo luận trong bảng trên -

<ul class = "pagination pagination-lg">
   <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>

<br>

<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>

<br>

<ul class = "pagination pagination-sm">
   <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>

Máy nhắn tin

Nếu bạn cần tạo các liên kết phân trang đơn giản vượt ra ngoài văn bản, máy nhắn tin có thể hoạt động khá tốt. Giống như các liên kết phân trang, máy nhắn tin là một danh sách không có thứ tự. Theo mặc định, các liên kết được căn giữa. Bảng sau liệt kê các lớp mà Bootstrap cung cấp cho máy nhắn tin.

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

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

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

Máy nhắn tin mặc định

Ví dụ sau minh họa việc sử dụng lớp .pager đã thảo luận trong bảng trên -

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

Các liên kết được căn chỉnh

Ví dụ sau minh họa việc sử dụng các lớp để căn chỉnh, .previous, .next đã thảo luận trong bảng trên -

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

Những trạng thái

Ví dụ sau minh họa việc sử dụng lớp .disabled đã thảo luận trong bảng trên -

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