下雪了，先是小朵小朵的雪花，柳絮般轻轻地飘扬；然后越下越大，一阵紧似一阵。
几乎所有网站内容都需要分页显示,一个用户体验良好的分页组件会得到访问用户的良好评价。
//源码
.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;
}
普通的分页
<ul class="pagination"> <li><a rel="nofollow noopener noreferrer" href="#">«</a></li> <li><a rel="nofollow noopener noreferrer" href="#">1</a></li> <li><a rel="nofollow noopener noreferrer" href="#">2</a></li> <li><a rel="nofollow noopener noreferrer" href="#">3</a></li> <li><a rel="nofollow noopener noreferrer" href="#">4</a></li> <li><a rel="nofollow noopener noreferrer" href="#">5</a></li> <li><a rel="nofollow noopener noreferrer" href="#">»</a></li> </ul>
分页的状态-disabled active
<ul class="pagination"> <li><a rel="nofollow noopener noreferrer" href="#">«</a></li> <li class="active"><a rel="nofollow noopener noreferrer" href="#">1</a></li> <li><a rel="nofollow noopener noreferrer" href="#">2</a></li> <li><a rel="nofollow noopener noreferrer" href="#">3</a></li> <li><a rel="nofollow noopener noreferrer" href="#">4</a></li> <li><a rel="nofollow noopener noreferrer" href="#">5</a></li> <li class="disabled"><a rel="nofollow noopener noreferrer" href="#">»</a></li> </ul>
分页的大小-pagination-lg，pagination-sm
<ul class="pagination pagination-lg"> <li><a rel="nofollow noopener noreferrer" href="#">«</a></li> <li><a rel="nofollow noopener noreferrer" href="#">1</a></li> <li><a rel="nofollow noopener noreferrer" href="#">2</a></li> <li><a rel="nofollow noopener noreferrer" href="#">3</a></li> <li><a rel="nofollow noopener noreferrer" href="#">4</a></li> <li><a rel="nofollow noopener noreferrer" href="#">5</a></li> <li><a rel="nofollow noopener noreferrer" href="#">»</a></li> </ul>
翻页(pager)
<ul class="pager"> <li><a rel="nofollow noopener noreferrer" href="#">Previous</a></li> <li><a rel="nofollow noopener noreferrer" href="#">Next</a></li> </ul> <ul class="pager"> <li class="previous"><a rel="nofollow noopener noreferrer" href="#">← Older</a></li> <li class="next"><a rel="nofollow noopener noreferrer" href="#">Newer →</a></li> </ul>
以上就是Bootstrap CSS组件之分页(pagination)和翻页(pager)。孤单寂寞与被遗弃感是最可怕的贫穷。更多关于Bootstrap CSS组件之分页(pagination)和翻页(pager)请关注haodaima.com其它相关文章！
