Bài 9: Phân trang (Pagination) trong Bootstrap 4

0
1494

Xin chào các bạn, Pagination là một thuật ngữ không quá xa lạ đối với dân lập trình web, hầu hết mọi website đều sử dụng nó để làm nhiệm vụ giới hạn dữ liệu trên một trang. Bootstrap cũng rất thấu hiểu tâm lý của chúng ta vì thế cũng hỗ trợ phần stylesheet pagination rất đẹp mắt giúp cho việc cắt HTML CSS giảm bớt được thời gian với nó. Các bạn có thể lên trang chủ của nó để xem cách sử dụng, nhưng nếu bạn không rành tiếng anh thì có thể xem qua bài này để nắm bắt.

Phân trang cơ bản (Basic Pagination)

Phần này thì cực đơn giản. Mọi thành phần tạo ra pagination đều nằm trong cặp thẻ ul & li, thêm vào thẻ ul class pagination, thêm vào mỗi thẻ <li> class .page-item thì mọi thứ coi như xong. Ngoài ra, trong thẻ <a> cần có class .page-link nữa nhé.

3 class này được Bootstrap 4 quy định như sau:

Ví dụ:

Kết quả:

Trạng thái active của Pagination

Class active sẽ hiển thị background để báo cho chúng ta biết đang ở trang nào.

Bootstrap 4 quy định class .active như sau:

Các bạn xem ví dụ dưới đây hoặc nhìn vào hình có thể thấy rõ là mình đang gán class active cho thẻ <li> số 3 và nó hiển thị background màu xanh:

Trạng thái Disabled trong Pagination

Class disabled cấm chúng ta click vào trang nào đó (thường là trang hiện tại).

Bootstrap 4 quy định class này như sau:

Ví dụ, mình gán class disabled cho thẻ <li> số 1 thì nó không còn hiện màu xanh nữa mà hiện màu đen , khi rê chuột vào nó không có hiện tượng được click vào:

Kích cỡ của các thanh phân trang

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

Ví dụ:

Vị trí thanh phân trang

Chúng ta có thể thiết lập vị trí hiển thị cho thanh phân trang ở bên trái, bên phải hay ở giữa với các class:

  • bên trái là thanh phân trang bình thường sử dụng class .pagination
  • ở giữa sử dụng class .justify-content-center
  • ở bên phải sử dụng class .fustify-content-end

Ví dụ:

Lời kết

Bài viết khá ngắn nhưng tôi cũng đã trình bày xong những tính năng stylesheet mà pagination trong bootstrap 4 hỗ trợ. Phân trang là phần được sử dụng rất phổ biến và quan trọng trong các trang web. Vì vậy, bạn cần nắm rõ các lớp của phân trang trong bootstrap để dễ dàng tạo các nút phân trang và tùy chỉnh kích thước, phân trang đang hoạt động hay bị vô hiệu một cách linh hoạt.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây