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 相关文章推荐
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 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函数utf8转gb2312编码
2006/12/21 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
PHP中文乱码解决方案
2015/03/05 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
简单说明Python中的装饰器的用法
2015/04/24 Python
详解Python Socket网络编程
2016/01/05 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
传播学专业毕业生自荐信
2013/11/04 职场文书
干部鉴定材料
2014/05/18 职场文书
高中教师个人总结
2015/02/10 职场文书
会议通知格式范文
2015/04/15 职场文书
战马观后感
2015/06/08 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android