Bootstrap CSS组件之分页(pagination)和翻页(pager)

几乎所有网站内容都需要分页显示,一个用户体验良好的分页组件会得到访问用户的良好评价。

//源码
.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;
}

普通的分页

 
«
 
1
 
2
 
3
 
4
 
5
 
»

分页的状态-disabled active

 
«
 
1
 
2
 
3
 
4
 
5
 
»

分页的大小-pagination-lg，pagination-sm

«
 
1
 
2
 
3
 
4
 
5
 
»

翻页(pager)

 
Previous
 
Next


 
← Older
 
Newer →

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。