Pagination trong Bootstrap, cách tạo và sử dụng

Pagination (hay phân trang) trong Bootstrap hiểu nôm na là chia nhỏ nội dung trang web thành các trang con. Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết cách tạo Pagination trong Bootstrap như thế nào.

Trong bài học trước Taimienphi.vn đã hướng dẫn bạn cách tạo Breadcrumb trong Bootstrap. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ hướng dẫn tiếp cho bạn cách tạo Pagination trong Bootstrap.

 

Mục Lục bài viết:
1. Tạo Pagination (phân trang) trong Bootstrap
2. Tùy chỉnh trạng thái vô hiệu hóa / hoạt động cho các liên kết trong phân trang
3. Thay đổi kích thước phân trang trong Bootstrap
4. Căn chỉnh phân trang trong Bootstrap

 

1. Tạo Pagination (phân trang) trong Bootstrap

Như Taimienphi.vn đã đề cập ở trên, Pagination (phân trang) trong Bootstrap là việc chia nhỏ nội dung trang web thành các trang con.

Hầu hết các ứng dụng web đều sử dụng phân trang, chẳng hạn như các công cụ tìm kiếm sử dụng phân trang để hiển thị giới hạn số lượng kết quả tìm kiếm trên các trang kết quả tìm kiếm hoặc giới hạn số lượng bài viết trên mỗi trang trên blog hoặc diễn đàn.

Ví dụ: trong ví dụ dưới đây minh họa cách tạo phân trang trong Bootstrap:

pagination trong bootstrap

Kết quả đầu ra có dạng như dưới đây:

pagination trong bootstrap 2

 

2. Tùy chỉnh trạng thái vô hiệu hóa / hoạt động cho các liên kết trong phân trang

Chúng ta có thể tùy chỉnh các liên kết (link) trong phân trang cho các trường hợp khác nhau, để người dùng có thể hình dung được họ đang truy cập trang nào hiện tại.

Bằng cách sử dụng lớp .disabled để tạo giao diện các liên kết giống như dạng bị vô hiệu hóa, chưa được truy cập và lớp .active để hiển thị là trang hiện tại mà người dùng truy cập.

Ví dụ: trong ví dụ dưới đây chúng ta tùy chỉnh trạng thái vô hiệu hóa / hoạt động cho các liên kết trong phân trang bằng cách sử dụng các lớp disabled và lớp active:

pagination trong bootstrap 3

Kết quả đầu ra có dạng như dưới đây:

pagination trong bootstrap 4

Lưu ý: Lớp .disabled chỉ hiển thị các liên kết khi bị vô hiệu hóa và không xóa bỏ chức năng click chuột. Để làm được điều này, chúng ta thay thế các liên kết neo (anchor) active hoặc disabled bằng span, tham khảo ví dụ dưới đây:

pagination trong bootstrap 5

Kết quả đầu ra có dạng như dưới đây:

pagination trong bootstrap 6

 

3. Thay đổi kích thước phân trang trong Bootstrap

Ngoài ra chúng ta cũng có thể thay đổi kích thước phân trang để tăng hoặc giảm kích thước khu vực có thể click được.

Bằng cách sử dụng các lớp kích thước tương đối như .pagination-lg hoặc .pagination-sm vào lớp .pagination để tạo phân trang có kích thước lớn hơn hoặc nhỏ hơn.

Ví dụ: Ví dụ dưới đây minh họa cách thay đổi kích thước phân trang trong Bootstrap:

pagination trong bootstrap 7

Kết quả đầu ra có dạng như dưới đây:

pagination trong bootstrap 8

 

4. Căn chỉnh phân trang trong Bootstrap

Mặc định phân trang trong Bootstrap được căn chỉnh theo chiều ngang nằm về phía bên trái. Để căn chỉnh phân trang chính giữa, chúng ta thêm lớp .justify-content-center vào lớp .pagination như trong ví dụ dưới đây:

pagination trong bootstrap 9

Kết quả đầu ra có dạng như dưới đây:

pagination trong bootstrap 10

Tương tự, chúng ta có thể sử dụng lớp .justify-content-end để căn chỉnh phân trang theo chiều ngang nằm về phía bên phải như trong ví dụ dưới đây:

pagination trong bootstrap 11

Kết quả đầu ra có dạng như dưới đây:

pagination trong bootstrap 12

Bài viết trên đây Taimienphi.vn vừa hướng dẫn bạn cách tạo Pagination (phân trang) trong Bootstrap. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé.

https://thuthuat.taimienphi.vn/pagination-trong-bootstrap-51128n.aspx
Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Badge trong Bootstrap.

Tác giả: Ngọc Thảo     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Media Object trong Bootstrap, khái niệm và cách sử dụng
List Group trong Bootstrap, tác dụng và cách tạo
Cài đặt môi trường C
Tạo danh sách bằng Bootstrap như thế nào?
Badge trong Bootstrap, khái niệm và cách sử dụng
Từ khoá liên quan:

Pagination trong Bootstrap

, Bootstrap, học Bootstrap,

SOFT LIÊN QUAN
  • Lập trình C++

    Giáo trình lập trình C++

    Lập trình C++ là tài liệu hướng dẫn học lập trình C++ - ngôn ngữ lập trình hướng đối tượng mở rộng từ ngôn ngữ C, cung cấp đến bạn các kiến thức về cách thức và tư duy lập trình. Đây là tài liệu rất hữu ích cho những ai ...

Tin Mới


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá