Bootstrap Pagination
This chapter discusses about pagination feature Bootstrap supports. Pagination, an unordered list is handled by Bootstrap like a lot of other interface elements.
Pagination
The following table lists the classes Bootstrap provides to handle pagination.
Class
Description
Sample code
.pagination
Add this class to get the pagination on your page.
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
.......
</ul>
.disabled, .active
You can customize links by using.disabledfor unclickable links and.active to indicate the current page.
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
.......
</ul>
.pagination-lg, .pagination-sm
Use these classes to get different size items.
<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>
Default Pagination
Following example demonstrates the use of class.pagination discussed in the above table:
<ul class="pagination">
<li><a href="#">«</a></li>
<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>
<li><a href="#">»</a></li>
</ul>
States
Following example demonstrates the use of class.disabled, .active discussed in the above table:
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
Sizing
Following example demonstrates the use of classes for sizing, .pagination-* discussed in the above table:
<ul class="pagination pagination-lg">
<li><a href="#">«</a></li>
<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>
<li><a href="#">»</a></li>
</ul><br>
<ul class="pagination">
<li><a href="#">«</a></li>
<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>
<li><a href="#">»</a></li>
</ul><br>
<ul class="pagination pagination-sm">
<li><a href="#">«</a></li>
<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>
<li><a href="#">»</a></li>
</ul>
Pager
If you need to create simple pagination links that go beyond text, the pager can work quite well. Like the pagination links, the pager is an unordered list. By default the links are centered. The following table lists the classes Bootstrap provides for pager.
Class
Description
Sample code
.pager
Add this class to get the pager links.
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
.previous, .next
Use class.previousto left align and .next to right-align the links.
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
.disabled
Add this class to get a muted look.
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
Default Pager
Following example demonstrates the use of class.pager discussed in the above table:
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
Aligned Links
Following example demonstrates the use of classes for alignment, .previous, .next discussed in the above table:
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
States
Following example demonstrates the use of class.disabled discussed in the above table:
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
ليست هناك تعليقات:
إرسال تعليق