BOOTSTRAP--CSS Components--paging (pagination) and paging (pager)

Almost all site content needs to be paginated, and a user-friendly paging component gets a good rating from the user who accesses the page.

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= "#" >&laquo;</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= "#" >&raquo;</a></li>
</ul>

Paging status-disabled active

<ul class= "pagination" >
    <li><a href= "#" >&laquo;</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= "#" >&raquo; </a></li>
</ul>

Paging Size-PAGINATION-LG,PAGINATION-SM

<ul class= "Pagination Pagination-lg" >
<li><a href= "#" >&laquo;</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= "#" >&raquo;</a></li >
</ul>

page Flip (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= "#" >&larr; older</a></li>
    <li class= "Next" ><a href= "#" >newer &rarr;</a></li>
</ul>