Phân trang bootstrap

      20

Tương tự Bootstrap 3, Bootstrap 4 cũng tất cả chức năng để thể hiện việc phân trang trên giao diện. Trước Khi tra cứu hiểu về bí quyết phân trang vào Bootstrap, một số kiến thức nền góp bạn hiểu về phân trang như sau.

Bạn đang xem: Phân trang bootstrap

Phân trang (paging) là một khái niệm rất quen thuộc thuộc vào việc thiết kế và vạc triển ứng dụng Web. Giả sử bạn có 10000 sản phẩm trong cơ sở dữ liệu, cùng nếu sử dụng tróc nã vấn để hiển thị hết 10000 sản phẩm này lên 1 trang web, tất nhiên bạn phải chờ rất lâu mới tất cả thể thấy toàn bộ dữ liệu. Hơn nữa, đồ vật của bạn sẽ bị đơ, nguy hiểm hơn là Web Server cũng bị như vậy, thậm chí nguy hiểm hơn là rớt toàn bộ hệ thống. Trong thực tế, tất cả những Web Server với Server Database đều gồm cơ chế chặn cái dữ liệu lớn vào/ra, vày vậy thông thường sẽ bung ra lỗi. Do đó, thông thường người ta sử dụng kỹ thuật phân trang để hạn chế số lượng record vào database bao gồm thể hiển thị trong thuộc 1 thời điểm (ví dụ 100 sản phẩm), vày đó để hiển thị hết toàn bộ 1 triệu sản phẩm, bạn cần phân ra thành 100 trang nhỏ so với 1 trang chứa 10000 sản phẩm. Con số này không quá lớn giúp người dùng tất cả thể tương tác với trang web của bạn dễ dàng.

Xem thêm: Làm Bảng Hiệu Nhà Thuốc Long Châu, Hệ Thống Nhà Thuốc Pharmacity

Ở Bootstrap 4, việc phân trang chủ yếu là thiết kế giao diện Web, ko phải là việc lập trình cùng xây dựng mã nguồn để lấy dữ liệu từ database, sau đó chia thành những trang với hiển thị bên trên Web.

Xem thêm: Top 9 Cửa Hàng Bán Socola Tại Tphcm Ngon Miễn Bàn, Top 9 Cửa Hàng Bán Socola Ngon Ở Tp

Tạo giao diện phân trang

Để tạo giao diện phân trang cơ bản, bạn cần thêm lớp .pagination vào phần tử ul. Sau đó, cứ mỗi phần tử li nằm trong ul thì bạn thêm lớp .page-thắng lợi, đối với liên kết phía bên trong li thì bạn cần sử dụng lớp .page-liên kết. Hãy xem ví dụ đơn giản sau.

*
*

Ví dụ Bootstrap --- segala.info

Phân trang trong Bootstrap 4 ---- segala.info

Thêm lớp .pagination vào phần tử ul, sau đó thêm lớp .page-thành công vào mỗi phần tử với với 1 liên kết vào li thì thêm lớp .page-link:


Chuyên mục: SEO
dịch vụ entity