Chào mừng bạn đến với Lamvt Group

Bootstrap Pagination Phân trang trong bootstrap

Bootstrap Pagination Phân trang trong bootstrap
5 (100%) 8 votes

Trong bài trước, chúng ta đã tìm hiểu về bootstrap tabs và pills, giúp thu gọn một lượng lớn nội dung mà vẫn giữ được bố cục trang.

Xem thêm: Bootstrap Tabs và Pills

Trong bài này, chúng ta cùng tìm hiểu về phân trang trong bootstrap (pagination bootstrap). Phân trang được sử dụng ở rất nhiều trang web và là tính năng rất quan trọng. Nếu bạn truy xuất tất cả dữ liệu hiển thị ra ngoài trang web thì trang web của bạn sẽ dài, người xem khó theo dõi. Đặc biệt, với những trang web có nhiều nội dung ta nên sử dụng phân trang để hạn chế số bài viết hiển thị ra ngoài.

  1. Phân trang cơ bản

Để tạo một phân trang cơ bản, ta thêm lớp .pagination vào thành phần <ul>. Ví dụ:

Bootstrap Pagination Phân trang trong bootstrap 1-4

Đầu ra của đoạn code trên sẽ như thế này:

Bootstrap Pagination Phân trang trong bootstrap 2-2

  1. Trạng thái hoạt động trong phân trang

Trạng thái đang hoạt động cho người xem biết họ đang ở trang nào. Để làm được điều đó, thêm lớp .active vào thẻ <li> chứa trang mà họ đang xem. Ví dụ:

Bootstrap Pagination Phân trang trong bootstrap 3-2

Đầu ra sẽ trông như hình dưới:

Bootstrap Pagination Phân trang trong bootstrap 4-2

Xem thêm: Bootstrap Collapse

  1. Trạng thái vô hiệu hóa trong phân trang

Ở trạng thái bị vô hiệu hóa, người xem không thể chọn vào liên kết đó. Tương tự như trạng thái hoạt động, bạn chỉ cần thêm lớp .disabled vào thẻ <li> chứa trang mà bạn muốn vô hiệu và khi người dùng di chuột đến nó sẽ hiển thị icon vô hiệu (trạng thái vô hiệu thường được dùng ở nút phân trang bắt đầu hoặc kết thúc). Ví dụ:

Bootstrap Pagination Phân trang trong bootstrap 5-1

Đầu ra sẽ trông như hình dưới:

Bootstrap Pagination Phân trang trong bootstrap 6-1

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

Bạn có thể thay đổi kích thước của phân trang để phù hợp với vùng hiển thị của nó. Thêm lớp .pagination-lg vào thành phần <ul> có lớp .pagination nếu bạn muốn hiển thị phân trang có kích thước lớn hoặc thêm lớp .pagination-sm vào thành phần <ul> có lớp .pagination nếu bạn muốn hiển thị phân trang có kích thước nhỏ.

Bootstrap Pagination Phân trang trong bootstrap 7-1

Đầu ra sẽ trông như hình dưới:

Bootstrap Pagination Phân trang trong bootstrap 8

Xem thêm: Bootstrap Dropdowns

  1. Phân trang next và previous

Nhiều khi bạn chỉ muốn phân trang ở dạng đơn giản như nút tiếp theo (next) hay quay lại (previous) để điều hướng. Khi đó, việc tạo ra nút phân trang sẽ đơn giản hơn nhiều.

Bạn thêm lớp .pager vào thành phần <ul> như ví dụ:

Bootstrap Pagination Phân trang trong bootstrap 9-1

Đầu ra sẽ trông như hình dưới:

Bootstrap Pagination Phân trang trong bootstrap 10-1

Theo mặc định nút phân trang next và previous được căn ở giữa theo chiều ngang của trang. Bạn có thể căn lại vị trí của nút sang trái hoặc sang phải bằng cách thêm lớp .previous và lớp .next vào thẻ <li> có chứa nút tương ứng. Ví dụ:

Bootstrap Pagination Phân trang trong bootstrap 11

Đầu ra sẽ trông như hình dưới:

Bootstrap Pagination Phân trang trong bootstrap 12

KẾT

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.

Xem thêm: Dịch vụ thiết kế website

Bài Viết Liên Quan

Dương Trung

- Họ và tên: Dương Thành Trung - Ngày sinh: 16/06 - Quê quán: Lạc Đạo - Văn Lâm- Hưng Yên - Số điện thoại: 0168.999.2570 - Mail: duongtrung.nuce.aw@gmail.com - Facebook: www.facebook.com/trungdt.net

liên hệ

Phone

0169 981 5232

Address

Số 25, Phú Thứ - Tây Mỗ, Nam Từ Liêm, Hà Nội

Email

Lamvt19792003@gmail.com

Copyright © 2017 by Lamvt Group. All right reserved.