Bootstrap Pagination là một thành phần có sẵn trong Bootstrap dùng để tạo phần đếm trang (Pager) dễ dàng cho website.
Sau đây là các ví dụ đơn giản về cách dùng Bootstrap Pagination:
1 - Kiểu cơ bản: Chỉ đơn giản bạn sử dụng class pagination với cấu trúc như sau
<ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul>
Demo:
2 - Kiểu Active: Dùng với class active để định vị trang đang truy cập
<ul class="pagination"> <li><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul>
Demo:
3 - Kiểu Disabled: Dùng để đặt một trang bất kì ở trạng thái bị khóa, dùng với class disabled
<ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="disabled"><a href="#">4</a></li> <li><a href="#">5</a></li> </ul>
Demo:
4 - Điều chỉnh kích thước: pagination-lg là kích thước lớn, pagination-sm là kích thước nhỏ
<ul class="pagination pagination-lg"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> <ul class="pagination pagination-sm"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul>
Demo:
Chúc các bạn thành công!
Xem thêm:
- Hướng dẫn sử dụng Grid System trong Bootstrap để phân chia cột ( Column)
- Hướng dẫn làm slider Bootstrap với hiệu ứng Fade in - Fade out
- Tạo menu dropdowns nhanh trong Bootstrap
- Top 5 Frontend Frameworks sử dụng phổ biến nhất hiện nay
- Tạo popup dễ dàng trong Bootstap với Bootstrap Modal Plugin
- Các kiểu styles button trong Bootstrap
- Tạo một slider trong Bootstrap bằng Bootstrap Carousel Plugin
