Phân trang Bootstrap


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.

Phân trang cơ bản trong Bootstrap trông như thế này:

Để tạo phân trang cơ bản, hãy thêm .paginationlớp vào một <ul>phần tử:

Thí dụ

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

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

Trạng thái hoạt động hiển thị trang hiện tại là gì:

Thêm lớp .activeđể cho người dùng biết họ đang truy cập trang nào:

Thí dụ

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>


Trạng thái Khuyết tật

Không thể nhấp vào một liên kết bị vô hiệu hóa:

Thêm lớp .disablednếu một liên kết vì lý do nào đó bị vô hiệu hóa:

Thí dụ

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</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 thành kích thước lớn hơn hoặc kích thướ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><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>
</ul>

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

Breadcrumbs

Một dạng khác để phân trang, là breadcrumbs:

Lớp .breadcrumbcho biết vị trí của trang hiện tại trong một hệ thống phân cấp điều hướng:

Thí dụ

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li><a href="#">Pictures</a></li>
  <li class="active">Vacation</li>
</ul>

Kiểm tra bản thân với các bài tập

Bài tập:

Thêm tên lớp chính xác để chuyển danh sách bên dưới thành menu phân trang.

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


Toàn bộ Tham chiếu Điều hướng Bootstrap

Để có tài liệu tham khảo đầy đủ về tất cả các lớp điều hướng, hãy truy cập Tài liệu tham khảo điều hướng Bootstrap đầy đủ của chúng tôi .