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

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. Thiết Kế Website Trung tâm Ngoại Ngữ đang nhận được rất nhiều sự quan tâm của quý khách hàng. Với...
    3 giây trước
  2. Google KeyWord Planner là công cụ dành cho các nhà quảng cáo Google Adword. Theo lý thuyết, bạn phải trở...
    16 giây trước
  3. Các chuyên gia SEO đã làm rất tốt hai việc: Họ xác định kỹ thuật SEO một cách chính xác...
    11 giây trước
  4. Năm 2019 đang đến rất gần và bạn đã xây dựng những kế hoạch marketing sản phẩm của mình cũng...
    16 giây trước
  5. Thế giới ngày càng phát triển, con người ngày càng sống hiện đại hơn. Công nghệ thông tin cũng nhờ...
    2 giây trước
  6. Vị trí xếp hạng trên công cụ tìm kiếm đã mở ra một khái niệm cho ngành mới đó là...
    4 giây trước
  7. Hãy viết bài cho chúng tôi để kiếm thêm thu nhập và kiếm Back link chất lượng cho SEO Bạn...
    18 giây trước
  8. Xây dựng Backlink là một yếu tố quan trọng trong SEO mà mỗi Blogger đều đang cố gắng tạo ra...
    17 giây trước
  9. Hiện nay trên thế giới có rất nhiều nền tảng mạng xã hội thu hút được người dùng từ mọi...
    25 giây trước
  10. Hai cô người mẫu đang làm khuấy đảo cộng đồng mạng mấy hôm nay với bộ ảnh mát mẻ chụp...
    30 giây trước