Bootstrap 4 Pagination
Phân trang cơ bản
Nếu bạn có một trang web với nhiều trang, bạn có thể muốn thêm một số loại phân trang cho mỗi trang.
Để tạo phân trang cơ bản, hãy thêm .paginationlớp vào một <ul>phần tử. Sau đó, thêm .page-itemvào từng <li>phần tử và một .page-linklớp vào mỗi liên kết bên trong <li>:
Thí dụ
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
Trạng thái hoạt động
Lớp .activeđược sử dụng để "tô sáng" trang hiện tại:
Thí dụ
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item
active"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
Trạng thái Khuyết tật
Lớp .disabledđược sử dụng cho các liên kết không thể nhấp vào:
Thí dụ
<ul class="pagination">
<li class="page-item
disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
Định cỡ phân trang
Các khối phân trang cũng có thể được định kích thước lớn hơn hoặc nhỏ hơn:
Thêm lớp .pagination-lgcho các khối lớn hơn hoặc .pagination-smcho các khối nhỏ hơn:
Thí dụ
<ul class="pagination
pagination-lg">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link"
href="#">Previous</a></li>
<li class="page-item"><a
class="page-link" href="#">1</a></li>
<li class="page-item"><a
class="page-link" href="#">2</a></li>
<li class="page-item"><a
class="page-link" href="#">3</a></li>
<li class="page-item"><a
class="page-link" href="#">Next</a></li>
</ul>
Căn chỉnh phân trang
Sử dụng các lớp tiện ích để thay đổi căn chỉnh của phân trang:
Thí dụ
<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px
0">
<li class="page-item">...</li>
</ul>
<!--
Center-aligned -->
<ul class="pagination justify-content-center"
style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!-- Right-aligned -->
<ul
class="pagination justify-content-end" style="margin:20px 0">
<li
class="page-item">...</li>
</ul>
Mẹo: Đọc thêm về các lớp Tiện ích / Người trợ giúp Bootstrap 4 trong Chương Tiện ích BS4 của chúng tôi .
Breadcrumbs
Một dạng khác để phân trang, là breadcrumbs:
Các lớp .breadcrumbvà .breadcrumb-item
cho biết vị trí của trang hiện tại trong phân cấp điều hướng:
Thí dụ
<ul class="breadcrumb">
<li class="breadcrumb-item"><a
href="#">Photos</a></li>
<li
class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li
class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item
active">Rome</li>
</ul>