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.

Lớp học Sự miêu tả Mã mẫu
.pagination Thêm lớp này để phân trang trên trang của bạn.
<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>
.disabled, .active Bạn có thể tùy chỉnh các liên kết bằng cách sử dụng .disabled cho các liên kết không thể nhấp vào và .active để chỉ ra 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>
.pagination-lg, .pagination-sm Sử dụng các lớp này để nhận các vật phẩm có kích thước khác nhau.
<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.

Lớp học Sự miêu tả Mã mẫu
.pager Thêm lớp này để nhận các liên kết máy nhắn tin.
<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>
.Trước Sau Sử dụng lớp học .previous căn trái và .next để căn chỉnh các liên kết.
<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>
.tàn tật Thêm lớp này để có được cái nhìn bị tắt tiếng.
<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>