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í 17++ 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

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

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...

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. SEO đã từng là khái niệm thông dụng trong các phương tiện truyền thông kỹ thuật số trong một thời...
    8 giây trước
  2. Để có được một bài viết chuẩn SEO phải trải qua một số thao tác nhất định. Định dạng các...
    2 giây trước
  3. Bài viết (single post) là một thành phần quan trọng trong WordPress để hiển thị nội dung mà bạn muốn...
    2 giây trước
  4. Nội dung bài viết của bạn cần có liên kết để có được vị trí trong bảng xếp hạng. Google chỉ...
    15 giây trước
  5. Như chúng ta đã biết, công cụ tìm kiếm Google hiện đang giữ vị trí số một trong bảng xếp...
    27 giây trước
  6. Maggie Cassella là một người Mỹ - Canada nữ diễn viên, diễn viên hài và nhà văn, nổi tiếng nhất...
    5 giây trước
  7. Với một doanh nghiệp Star-Up non trẻ SEO có thể là một khái niệm mới mẻ và khó khăn. Dưới...
    18 giây trước
  8. Như bạn đã biết biết, một trang web muốn tồn tại thì không thể tách rời khỏi mạng internet. Điều đó...
    1 giây trước
  9. Header web hay còn gọi là tiêu đề website, đầu trang web là một trong những thành phần căn bản...
    5 giây trước
  10. Để được xếp top trong Google là mục đích của bất cứ trang web nào, bởi vậy Google đã đưa ra những...
    30 giây trước