để có được ý nghĩa tương tự.
<nav aria-label="Search results pages">
...
</nav>
<div role="nav" aria-label="Search results pages">
...
</div>
Icon
Các phần tử "Next" hoặc "Previous" bạn có thể thay chúng bởi biểu tượng, nhưng nên có các gợi ý cho Screen Reader bằng cách sử dụng ".sr-only", phần tử này ẩn hoàn toàn đối với tất cả các thiết bị ngoại trừ Screen Reader. "Next" hoặc
"Previous" bạn có thể thay chúng bởi biểu tượng, nhưng nên có các gợi ý cho Screen Reader bằng cách sử dụng ".sr-only", phần tử này ẩn hoàn toàn đối với tất cả các thiết bị ngoại trừ Screen Reader.
pagination-icon-example
<h4 class="mb-5">Pagination example:</h4>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
2- .disable & .active
Sử dụng lớp .active cho Pagination-item để làm nổi bật item này và nhấn mạnh rằng đây là trang mà người dùng đang xem (trang hiện thời). Và sử dụng lớp .disabled cho các liên kết (Link) nếu bạn muốn vô hiệu hóa nó, người dùng không thể nhấn vào liên kết này. .active cho Pagination-item để làm nổi bật
item này và nhấn mạnh rằng đây là trang mà người dùng đang xem (trang hiện thời). Và sử dụng lớp .disabled cho các liên kết (Link) nếu bạn muốn vô hiệu hóa nó, người dùng không thể nhấn vào liên kết này.
pagination-status-example
<h4 class="mb-5">Pagination (.active & .disabled):</h4>
<nav aria-label="Something..">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
3- Kích thước (Sizing)
Nếu bạn muốn thành phần Pagination to hơn một chút hãy sử dụng lớp .pagination-lg: Pagination to hơn một chút hãy sử dụng lớp .pagination-lg:
.pagination .pagination-lg
<h5 class="mb-2">Pagination (.pagination .pagination-lg):</h5>
<nav aria-label="Something">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
Hoặc muốn có một Pagination nhỏ hơn một chút hãy sử dụng lớp .pagination-sm: Pagination nhỏ hơn một chút hãy sử dụng lớp .pagination-sm:
.pagination .pagination-sm
<h5 class="mb-2">Pagination (.pagination .pagination-sm):</h5>
<nav aria-label="Something">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
4- Justify (Căn chỉnh)
Bootstrap Pagination thực chất là một Flex Container, vì nó được thiết lập Css property {display: flex}. Vì vậy một vài lớp tiện ích của Bootstrap Flex có thể áp dụng được cho Pagination: thực chất là một Flex Container, vì nó
được thiết lập Css property {display: flex}. Vì vậy một vài lớp tiện ích của Bootstrap Flex có thể áp dụng được cho Pagination:
- justify-content-start
- justify-content-center
- justify-content-end
- justify-content-between
- justify-content-around
.pagination .justify-content-center
<h6 class="mb-3">.pagination .justify-content-center</h6>
<nav aria-label="Something">
<ul class="pagination justify-content-center bg-light">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
.pagination .justify-content-end
<h6 class="mb-3">.pagination .justify-content-end</h6>
<nav aria-label="Something">
<ul class="pagination justify-content-end bg-light">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>