Dữ liệu hiển thị trên một trang web rất lớn vì vậy nếu hiển thị hết trong 1 trang thì quá dài người đọc rất khó tìm được nội dung mình cần vì vậy chúng ta cần phân trang. Phân trang (Paging hay Pagination) chính là việc phân trang các web ra thành nhiều trang con. Trong bài viết dưới đây chúng ta chỉ tập trung xây dựng giao diện phân trang (Pagination) trong Bootstrap 3 chứ không có xây dựng phần mã nguồn nhé các bạn.
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ố trang cho mỗi trang.
Để 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.
Ví dụ phân trang cơ bản:
<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>
Kết quả:
Trạng thái kích hoạt (Active State)
Để thêm trạng thái trang nào đang kích hoạt, chỉ cần dùng lớp .active
Ví 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>
Vô hiệu hóa trang đang hoạt động (Disabled State)
Trái với lớp .active, lớp .disabled dùng để vô hiệu trang nào đó hoạt động
Ví dụ disabled state
<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>
Kết quả:
Định cỡ phân trang
Các khối phân trang cũng có thể có kích thước lớn hơn hoặc kích thướ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ụ trên nhờ đoạn code sau:
<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 .breadcrumb cho biết vị trí của trang hiện tại trong phân cấp điều hướng:
Ví dụ
<div class="container"> <h2>Breadcrumbs</h2> <ul class="breadcrumb"> <li><a href="#">Trang chủ</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li class="active">Bootstrap</li> </ul> </div>
Kết quả:
Lời kết:
Trong bài viết này chúng ta đã tìm hiểu xong về phân trang (Pagination) trong Bootstrap 3 rồi đấy, trong bài tiếp theo chúng ta sẽ tìm hiểu về pager một dạng phân trang khác và cách kết hợp chúng với nhau.
