Bootstrap 5 phân trang

Phân trang cơ bản

Nếu trang web của bạn có rất nhiều trang, bạn có thể muốn thêm某种 phân trang cho mỗi trang.

Để tạo phân trang cơ bản, hãy thêm .pagination thêm lớp vào <ul> thành phần. Sau đó thêm .page-item vào mỗi <li> thành phần, và thêm .page-link thêm lớp vào <li> mỗi liên kết trong:

Mô hình

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">trước trang</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="#">Trang tiếp theo</a></li>
</ul>

Thử ngay

Trạng thái hoạt động

.active Lớp cho trang hiện tại được "nhấn mạnh":

Mô hình

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">trước trang</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="#">Trang tiếp theo</a></li>
</ul>

Thử ngay

Trạng thái vô hiệu

.disabled Lớp cho liên kết không thể nhấp:

Mô hình

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">trước trang</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="#">Trang tiếp theo</a></li>
</ul>

Thử ngay

Kích thước phân trang

Khối phân trang cũng có thể được điều chỉnh để lớn hơn hoặc nhỏ hơn:

Vui lòng thêm lớp cho khối lớn hơn .pagination-lg hoặc thêm lớp cho khối nhỏ hơn .pagination-sm Loại:

Mô hình

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">trước trang</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="#">Trang tiếp theo</a></li>
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">trước trang</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="#">Trang tiếp theo</a></li>
</ul>

Thử ngay

Đối齡 phân trang

Vui lòng sử dụng lớp utility để thay đổi cách đối齡 phân trang:

Mô hình

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

Thử ngay

Crumb (Breadcrumbs)

Một hình thức khác của phân trang là crumb:

.breadcrumb và .breadcrumb-item Lớp quy định vị trí hiện tại của trang này trong cấu trúc định hướng:

Mô hình

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Hình ảnh</a></li>
  <li class="breadcrumb-item"><a href="#">Mùa thu năm 2019</a></li>
  <li class="breadcrumb-item"><a href="#">Trung Quốc</a></li>
  <li class="breadcrumb-item active">Beijing</li>
</ul>

Thử ngay