Phân trang Bootstrap 4
Phân trang cơ bản
Nếu bạn có một trang web có nhiều trang, bạn có thể muốn thêm một số kiểu phân trang vào mỗi trang.
Để tạo phân trang cơ bản, hãy thêm lớp .pagination vào phần tử <ul> . Sau đó thêm .page-item vào mỗi phần tử <li> và một lớp .page-link vào mỗi liên kết bên trong <li> :
Ví 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> Hãy tự mình thử »Trạng thái hoạt động
Lớp .active được sử dụng để "đánh dấu" trang hiện tại:
Ví 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> Hãy tự mình thử » Trạng thái bị vô hiệu hóa
Lớp .disabled được sử dụng cho các liên kết không thể nhấp vào:
Ví 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> Hãy tự mình thử »Định cỡ phân trang
Các khối phân trang cũng có thể được điều chỉnh kích thước lớn hơn hoặc nhỏ hơn:
Thêm lớp .pagination-lg cho các khối lớn hơn hoặc .pagination-sm cho các khối nhỏ hơn:
Ví 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> Hãy tự mình thử »Căn chỉnh phân trang
Sử dụng các lớp tiện ích để thay đổi căn chỉnh phân trang:
Ví 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> Hãy tự mình thử »Mẹo: Đọc thêm về các lớp Tiện ích/Trình trợ giúp Bootstrap 4 trong Chương Tiện ích BS4 của chúng tôi.
vụn bánh mì
Một hình thức khác để phân trang là breadcrumbs:
Các lớp .breadcrumb và .breadcrumb-item cho biết vị trí của trang hiện tại trong hệ thống phân cấp điều hướng:
Ví 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> Hãy tự mình thử »