Hướng dẫn table pagination bootstrap

Previous

  • 1
  • 2
  • 3
  • Next
  • Previous

  • 1
  • 2
  • 3
  • Next
  • 2- .disable & .active

    Sử dụng lớp .active cho Pagination-item để làm nổi bật item này và nhấn mạnh rằng đây là trang mà người dùng đang xem [trang hiện thời]. Và sử dụng lớp .disabled cho các liên kết [Link] nếu bạn muốn vô hiệu hóa nó, người dùng không thể nhấn vào liên kết này.

    Previous

  • 1
  • 2 [current]
  • 3
  • Next
  • 3- Kích thước [Sizing]

    Nếu bạn muốn thành phần Pagination to hơn một chút hãy sử dụng lớp .pagination-lg:

    .pagination .pagination-lg

    
    Pagination [.pagination .pagination-lg]:
    
    
       
    • 1
    • 2
    • 3

    Hoặc muốn có một Pagination nhỏ hơn một chút hãy sử dụng lớp .pagination-sm:

    .pagination .pagination-sm

    
    Pagination [.pagination .pagination-sm]:
    
    
       
    • 1
    • 2
    • 3

    4- Justify [Căn chỉnh]

    Bootstrap Pagination thực chất là một Flex Container, vì nó được thiết lập Css property {display: flex}. Vì vậy một vài lớp tiện ích của Bootstrap Flex có thể áp dụng được cho Pagination:

    • justify-content-start
    • justify-content-center
    • justify-content-end
    • justify-content-between
    • justify-content-around

    Previous

  • 1
  • 2
  • 3
  • Next
  • .pagination .justify-content-end

    
    .pagination .justify-content-end
    
    
       
    • Previous
    • 1
    • 2
    • 3
    • Next

    Chủ Đề