[Bootstrap] Phần 13: Phân trang

Trong bài viết này, chúng ta sẽ học cách tạo vùng phân trang dùng trong Bootstrap. Phân trang (Paging hay Pagination) là việc phân trang các web ra thành nhiều trang con, vì dữ liệu hiển thị trên 1 trang có thể rất lớn, trình duyệt web không thể hiển thị hết được hoặc sẽ là danh sách rất dài làm người dùng khó theo dõi. Trong bài viết, chúng ta chỉ tập trung xây dựng giao diện phân trang chứ không có xây dựng phần mã nguồn.

Phân trang cơ bản
Để thực hiện tạo giao diện phân trang cơ bản, chúng ta sẽ dùng lớp .pagination với phần tử ul.

<div class="container">
  <h2>Phân trang cơ bản - dammio.com</h2>
  <p>Lớp .pagination cung cấp các liên kết phân trang</p>
  <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>
</div>

Trạng thái kích hoạt
Để thêm trạng thái trang nào đang kích hoạt, chỉ cần dùng lớp .active

<div class="container">
  <h2>Phân trang cơ bản - dammio.com</h2>
  <p>Lớp .active để kích hoạt trang đang hoạt động</p>
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="active"><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>

Vô hiệu hóa trang đang hoạt động
Trái với lớp .active, lớp .disabled dùng để vô hiệu trang nào đó hoạt động

<div class="container">
  <h2>Phân trang cơ bản - dammio.com</h2>
  <p>Lớp .active để kích hoạt trang đang hoạt động</p>
  <ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="disabled"><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>

Phân trang với nút tới, nút lui
Chúng ta có thể định nghĩa nút tới, và nút lui trong phân trang như ví dụ sau.

<div class="container">
  <h2>Phân trang có nút tới, lui - dammio.com</h2>
  <ul class="pagination">
	<li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</div>

Điều chỉnh kích thước phân trang
Để điều chỉnh kích thước phân trang, bạn có thể dùng các lớp .pagination-lg hay .pagination-sm

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

Breadcrumb
Một dạng phân trang khác là breadcrumb. Lớp .breadcrumb chỉ rõ trang hiện tại trong 1 mô hình phân cấp trang.

<div class="container">
	<ul class="breadcrumb">
		<li><a href="#">Dammio.com</a></li>
		<li><a href="#">Danh mục</a></li>
		<li><a href="#">Thiết kế web</a></li>
		<li class="active">Bootstrap</li> 
	</ul>
</div>

Trong ví dụ trên, trang Bootstrap được hiển thị là trang thấp nhất mô hình phân cấp Dammio.com -> Danh mục -> Thiết kế web -> Bootstrap.

Pager
Pager là một trang phân trang, chứa các nút tới và nút lui để đi hoặc lùi lại lại trang cần xem nội dung. Lớp .pager trong phần tử ul dùng để tạo 1 pager.

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Để canh các nút tới, lui ở vị trí trái, phải, chúng ta có thể dùng lớp .previous và .next.

<ul class="pager">
  <li class="previous"><a href="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

Kết luận: bài viết đã cung cấp nội dung kiến thức về các lớp để tạo giao diện phân trang và pager trong Bootstrap.