bootstrap导航条、分页导航学习笔记6-9(分页导航-带页码的分页导航)
2015-12-21 15:14
706 查看
分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航:
☑ 带页码的分页导航
☑ 带翻页的分页导航
Bootstrap框架为开发者提供不同的版本:
☑ LESS版本:对应的源文件pagination.less
☑ Sass版本:对应的源文件_pagination.scss
☑ 编译后版本:对应bootstrap.css文件第4130行~第4222行
在ul标签上加入pagination方法:
运行效果:
/*bootstrap.css文件第4170行~第4192行*/
注意:要禁用当前状态和禁用状态不能点击,我们还要依靠js来实现,或者将这两状态下的a标签换成span标签。
大小设置:
在Bootstrap框架中,也可以通过几个不同的情况来设置其大小。类似于按钮一样:
1、通过“pagination-lg”让分页导航变大;
2、通过“pagination-sm”让分页导航变小:
☑ 带页码的分页导航
☑ 带翻页的分页导航
带页码的分页导航
带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式。在Bootstrap框架为开发者提供不同的版本:
☑ LESS版本:对应的源文件pagination.less
☑ Sass版本:对应的源文件_pagination.scss
☑ 编译后版本:对应bootstrap.css文件第4130行~第4222行
使用方法:
平时很多同学喜欢用div>a和div>span结构来***带页码的分页导航。不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法:
<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>
运行效果:
实现原理:
从效果中可以看出,当前状态页码会高亮显示,而且不能点击。而最后一页是禁用状态,也不能点击。实现样式:/*bootstrap.css文件第4170行~第4192行*/
.pagination> .active > a, .pagination> .active > span, .pagination> .active >a:hover, .pagination> .active >span:hover, .pagination> .active >a:focus, .pagination> .active >span:focus { z-index: 2; color: #fff; cursor: default; background-color: #428bca; border-color: #428bca; } .pagination> .disabled > span, .pagination> .disabled >span:hover, .pagination> .disabled >span:focus, .pagination> .disabled > a, .pagination> .disabled >a:hover, .pagination> .disabled >a:focus { color: #999; cursor: not-allowed; background-color: #fff; border-color: #ddd; }
注意:要禁用当前状态和禁用状态不能点击,我们还要依靠js来实现,或者将这两状态下的a标签换成span标签。
大小设置:
在Bootstrap框架中,也可以通过几个不同的情况来设置其大小。类似于按钮一样:
1、通过“pagination-lg”让分页导航变大;
2、通过“pagination-sm”让分页导航变小:
相关文章推荐
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 .
- netty5笔记-总体流程分析1-ServerBootstrap启动
- netty5笔记-总体流程分析1-ServerBootstrap启动
- bootstrap+angular关于js常见的一些问题
- bootstrap弹出登录框【带合法性检查】
- Bootstrap快速学习笔记(2)表单系列之一
- Bootstrap快速学习笔记(1)排版系列之二
- EF+MVC+Bootstrap 项目实践 Day12
- Bootstrap 小技巧以及相关资源整理
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)
- 用于 Bootstrap (listing2.html) 的HTML 文件
- [实战]MVC5+EF6+MySql企业网盘实战(20)——Bootstrap Paginator
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)
- Bootstrap-栅格布局实例
- Bootstrap-栅格系统自适应布局
- EF+MVC+Bootstrap 项目实践 Day11
- Bootstrap快速学习笔记(1)排版系列之一
- bootstrap表单校验之bootstrapvalidator
- Bootstrap采样方法的python实现
- bootstrap-datetimepicker和uploadify应用总结