Bootstrap - Phân trang

Nếu như bạn có một website với nhiều nội dung được hiển thị, khi đó cần phân trang cho các nội dung đó, tránh việc hiển thị quá nhiều nội dung trên cùng một trang.
Một .pagination của bootstrap được cung cấp để tạo ra giao diện phân trang đẹp mắt.

  
1
  
2
  
3
  
4
  
5

• 1
• 2
• 3
• 4
• 5

---

Active State

Khi thêm .active để xác định cho người dung biết mình đang ở trang thứ mấy :

  
1
  
2
  
3
  
4
  
5

• 1
• 2
• 3
• 4
• 5

---

Disabled State

Khi thêm .disabled để vô hiệu hóa link tương ứng được gắn :

  
1
  
2
  
3
  
4
  
5

• 1
• 2
• 3
• 4
• 5

---

Pagination Sizing

Khi thêm .pagination-lg để có kích thước lớn hơn hoặc .pagination-sm để có kích thước nhỏ hơn.

  
1
  
2
  
3
  
4
  
5



  
1
  
2
  
3
  
4
  
5

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

---

Tạo nút previous/next

Nút previous/next giúp người dùng di chuyển về trang trước đó hoặc đi đến trang kế tiếp trong danh sách phân trang.

  
Previous
  
Next

• Previous
• Next

Nếu bạn muốn đặt danh sách phân trang nằm giữa 2 nút previous/next, thì cần thêm .previous và .next

  
Previous
  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
Next

• Previous
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• Next

Như vậy, chỉ cần vài class là bạn có thể tạo ra một dãy số với khung và hiệu ứng đẹp mắt.

Share on Google Plus

Về tôi

Chào bạn ! Mình là Unknown, rất mê phim kiếm hiệp và vẫn FA. Bạn có thể tìm mình qua :