Bootstrap CSS组件之分页(pagination)和翻页(pager)
几乎所有网站内容都需要分页显示,一个用户体验良好的分页组件会得到访问用户的良好评价。
//源码
.pagination{
display:inline-block;
padding-left:0;
margin:20px0;
border-radius:4px;
}
.pagination>li{
display:inline;
}
.pagination>li>a,
.pagination>li>span{
position:relative;
float:left;
padding:6px12px;
margin-left:-1px;
line-height:1.42857143;
color:#337ab7;
text-decoration:none;
background-color:#fff;
border:1pxsolid#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;
}
普通的分页
<ulclass="pagination"> <li><ahref="#">«</a></li> <li><ahref="#">1</a></li> <li><ahref="#">2</a></li> <li><ahref="#">3</a></li> <li><ahref="#">4</a></li> <li><ahref="#">5</a></li> <li><ahref="#">»</a></li> </ul>
分页的状态-disabledactive
<ulclass="pagination"> <li><ahref="#">«</a></li> <liclass="active"><ahref="#">1</a></li> <li><ahref="#">2</a></li> <li><ahref="#">3</a></li> <li><ahref="#">4</a></li> <li><ahref="#">5</a></li> <liclass="disabled"><ahref="#">»</a></li> </ul>
分页的大小-pagination-lg，pagination-sm
<ulclass="paginationpagination-lg"> <li><ahref="#">«</a></li> <li><ahref="#">1</a></li> <li><ahref="#">2</a></li> <li><ahref="#">3</a></li> <li><ahref="#">4</a></li> <li><ahref="#">5</a></li> <li><ahref="#">»</a></li> </ul>
翻页(pager)
<ulclass="pager"> <li><ahref="#">Previous</a></li> <li><ahref="#">Next</a></li> </ul> <ulclass="pager"> <liclass="previous"><ahref="#">←Older</a></li> <liclass="next"><ahref="#">Newer→</a></li> </ul>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。