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; }
普通的分页
<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>
分页的状态-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>
分页的大小-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>
翻页(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>
相关推荐
amberom 2020-01-06
时光如瑾雨微凉 2020-03-04
luadenis0 2019-08-30
Lius 2019-06-19
zhanggang 2018-10-23
82473264 2015-05-12
zh000 2015-07-22
人心 2019-06-27
OpsDevOps 2019-06-25
88304694 2019-06-25
SeekerTime 2019-06-21
yyzhu 2012-03-18
DHCliaozheng 2017-03-12
spb 2017-12-28
程序员哦 2016-12-23
Chinahdy 2016-12-23
Wmeng0 2018-01-26
genglang 2016-06-03