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)
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.
Để 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ụ:
Đầu ra của đoạn code trên sẽ như thế này:
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ụ:
Đầu ra sẽ trông như hình dưới:
Xem thêm: Bootstrap Collapse
Ở 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ụ:
Đầu ra sẽ trông như hình dưới:
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ỏ.
Đầu ra sẽ trông như hình dưới:
Xem thêm: Bootstrap Dropdowns
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ụ:
Đầu ra sẽ trông như hình dưới:
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ụ:
Đầu ra sẽ trông như hình dưới:
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
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...
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...