Buzz
Trong bài hướng dẫn trước đó, Mytour đã hướng dẫn cách tạo Breadcrumb trong Bootstrap. Bài học tiếp theo dưới đây sẽ hướng dẫn bạn cách tạo Pagination trong Bootstrap.
1. Hướng dẫn chi tiết về cách tạo Pagination trong Bootstrap
2. Tùy chỉnh trạng thái bật/tắt cho các liên kết trong phân trang
3. Đổi kích thước phân trang trong Bootstrap
4. Căn chỉnh vị trí của phân trang trong Bootstrap
1. Hướng dẫn tạo Pagination trong Bootstrap
Như đã nói trước đó, việc sử dụng Pagination (phân trang) trong Bootstrap giúp chia nhỏ nội dung trang web thành các trang con.
Phần lớn các ứng dụng web đều tích hợp tính năng phân trang, chẳng hạn như các công cụ tìm kiếm sử dụng nó để hiển thị 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 một cách đơn giản:
Kết quả xuất hiện như sau:
2. Tùy biến trạng thái bật/tắt cho các liên kết trong phân trang
Chúng ta có khả năng điều chỉnh trạng thái của các liên kết trong phân trang để phản ánh sự truy cập của người dùng vào trang nào.
Sử dụng lớp .disabled để tạo giao diện giống liên kết bị tắt, không thể truy cập và lớp .active để chỉ định trang đang được truy cập.
Ví dụ: Trong ví dụ này, chúng ta điều chỉnh trạng thái bật/tắt cho các liên kết trong phân trang bằng cách sử dụng các lớp disabled và active:
Kết quả xuất hiện như sau:
Lưu ý: Lớp .disabled chỉ hiển thị các liên kết khi tắt và không thực hiện chức năng click chuột. Để thực hiện điều này, chúng ta thay thế các liên kết neo (anchor) active hoặc disabled bằng thẻ span, xem ví dụ dưới đây:
Kết quả xuất hiện như sau:
3. Thay đổi kích thước phân trang trong Bootstrap
Bên cạnh đó, chúng ta cũng có thể điều chỉnh kích thước của phân trang để làm tăng giảm kích thước khu vực có thể nhấp chuột.
Sử dụng các lớp kích thước tương đối như .pagination-lg hoặc .pagination-sm trong lớp .pagination để tạo ra phân trang với kích thước lớn hơn hoặc nhỏ hơn.
Ví dụ: Dưới đây là một ví dụ minh họa về cách thay đổi kích thước phân trang trong Bootstrap:
Kết quả hiển thị như sau:
4. Căn chỉnh vị trí phân trang trong Bootstrap
Mặc định, phân trang trong Bootstrap được căn chỉnh ngang và đặt ở phía bên trái. Để căn chỉnh phân trang giữa trang, chúng ta thêm lớp .justify-content-center vào lớp .pagination như ví dụ dưới đây:
Kết quả hiển thị như sau:
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 về phía bên phải như trong ví dụ dưới đây:
Kết quả xuất hiện như sau:
Bài viết này đã hướng dẫn cách tạo Pagination (phân trang) trong Bootstrap. Nếu có bất kỳ câu hỏi hoặc thắc mắc nào, bạn đọc có thể để lại ý kiến trong phần bình luận dưới bài viết.
Trong bài học tiếp theo, Mytour sẽ giới thiệu đến bạn về Badge trong Bootstrap.
