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.
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:
Kết quả đầu ra có dạng như dưới đây:
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:
Kết quả đầu ra có dạng như dưới đây:
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:
Kết quả đầu ra có dạng như dưới đây:
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:
Kết quả đầu ra có dạng như dưới đây:
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:
Kết quả đầu ra có dạng như dưới đây:
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:
Kết quả đầu ra có dạng như dưới đây:
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é.
Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Badge trong Bootstrap.