Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Bootstrap Pagination Phân trang trong bootstrap

5/5 - (8 bình chọn)

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

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Bạn đang mong muốn có nhiều lượt khách truy cập tìm kiếm trang web của bạn? Từ khóa đuôi dài...
    7 giây trước
  2. Google đã phát hành phiên bản sửa đổi của 164 trang để cập nhật nguyên tắc xếp hạng chất lượng...
    11 giây trước
  3. Bạn đã tìm ra cho mình một từ khóa thỏa mãn với yêu cầu và mục đích thương mại của...
    11 giây trước
  4. Hiện nay, sự phát triển như vũ bão của hệ thống mạng toàn cầu internet đã làm thay đổi hoàn...
    9 giây trước
  5. Một website tạo được trải nghiệm người dùng tốt luôn là điều mà các chủ sở hữu mong muốn. Điều...
    20 giây trước
  6. Nếu bạn là người kiếm tiền bằng Blog, hoặc Website sử dụng Google Adsense là một trong những cách nhanh...
    11 giây trước
  7. Sau khi đầu tư một loạt thời gian trong việc học những điều cơ bản về SEO. Các chiến thuật mà...
    14 giây trước
  8. Có thêm lượt tương tác cho bài viết là một trong những yếu tố quan trọng giúp bạn biết được...
    28 giây trước
  9. Một trong những điều khó chịu nhất về SEO là kết hợp mọi thứ lại với nhau như nó cần. Nếu...
    19 giây trước
  10. Việc phân biệt sự khác nhau giữa trang chủ và trang đích của một trang web là cần thiết hiện...
    14 giây trước