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


Posted in Javascript onDecember 17, 2016

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
对xmlHttp对象的理解
Jan 17 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 #Javascript
Bootstrap CSS布局之图像
Dec 17 #Javascript
Bootstrap CSS布局之按钮
Dec 17 #Javascript
Bootstrap CSS布局之表单
Dec 17 #Javascript
Bootstrap CSS布局之表格
Dec 17 #Javascript
Bootstrap CSS布局之代码
Dec 17 #Javascript
基于js实现二级下拉联动
Dec 17 #Javascript
You might like
php文件缓存类用法实例分析
2015/04/22 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
JavaScript中this详解
2015/09/01 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
深入解析神经网络从原理到实现
2019/07/26 Python
python 操作hive pyhs2方式
2019/12/21 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
给国外客户的邀请函
2014/01/30 职场文书
高中打架检讨书
2014/02/13 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
毕业实习计划书
2015/01/16 职场文书
关于教师节的广播稿
2015/08/19 职场文书
外出学习心得体会范文
2016/01/18 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang