Bootstrap CSS component pagination (pagination) and paging (pager) _javascript tips

Almost all site content needs to be paged out, and a user-experienced paging component gets a good rating from the user who accesses it.

Source code
. pagination {
 display:inline-block;
 padding-left:0;
 margin:20px 0;
 Border-radius:4px
}
. Pagination > Li {
 display:inline
}
. Pagination > li > A,
. Pagination > li > Span {
 position:relative;
 Float:left;
 PADDING:6PX 12px;
 Margin-left: -1px;
 line-height:1.42857143;
 Color: #337ab7;
 Text-decoration:none;
 Background-color: #fff;
 border:1px solid #ddd;
Pagination > Li:first-child > A,
. Pagination > Li:first-child > span {
 margin-left:0;
 border-top-left-radius:4px;
 Border-bottom-left-radius:4px
}
. Pagination > Li:last-child > A,
. Pagination > Li:last-child > span {
 border-top-right-radius:4px;
 border-bottom-right-radius:4px;
}

Regular Paging

<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>

Paging Status-disabled active

<ul class= "pagination" >
 <li><a href= "#" >«</a></li>
 <li class= "Active" ><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 class= "disabled" ><a href= "#" >»</a></li >
</ul>

Paging size-PAGINATION-LG,PAGINATION-SM

<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>

Flip page (pager)

<ul class= "Pager" >
 <li><a href= "#" >Previous</a></li>
 <li><a href = "#" >Next</a></li>
</ul>
<ul class= "Pager" >
 <li class= "Previous" ><a href= "#" >←Older</a></li>
 <li class= "Next" ><a href= "#" >Newer→</a> </li>
</ul>

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.