基于BootStrap的前端分页带省略号和上下页效果


Posted in Javascript onMay 18, 2017

bootstrap前端分页 自带效果。

首先是百度下获得资源

http://blog.csdn.net/u013025627/article/details/50485327

其实15年的时候我师兄给过我一个文档不知道在哪儿搞得,我靠那是示例之多。现在嘛只有找代码片段自己写

好了好了这个东西也就是没有上一页 下一页的。于是我加了而且修改了下源代码。扯淡的是我不能用bootstrap的效果,为什么?因为我们有自己的样式,so我得有个下过自己写

首先看看源代码我修改注释的部分

基于BootStrap的前端分页带省略号和上下页效果

这个now是UI做的效果也就是选中显示一个绿色。

前端的样式修改我会加入类似表格分页的样式类型,

基于BootStrap的前端分页带省略号和上下页效果

基于BootStrap的前端分页带省略号和上下页效果

前端的样式其实差不多都是每一个li 包含一个a标签 所以直接写死

基于BootStrap的前端分页带省略号和上下页效果

基于BootStrap的前端分页带省略号和上下页效果

就整体来说基本满足我所需要的样式,也还行。剩下的就是写好ajax方法 供给回调函数就行了。

效果图大致是这样

基于BootStrap的前端分页带省略号和上下页效果

基于BootStrap的前端分页带省略号和上下页效果

点击上一页:

基于BootStrap的前端分页带省略号和上下页效果

基于BootStrap的前端分页带省略号和上下页效果

点击下一页

基于BootStrap的前端分页带省略号和上下页效果基于BootStrap的前端分页带省略号和上下页效果

以上所述是小编给大家介绍的基于BootStrap的前端分页带省略号和上下页效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
网上抓的一个特效
May 11 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
微信小程序网络请求wx.request详解及实例
May 18 #Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 #Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 #Javascript
AngularJS折叠菜单实现方法示例
May 18 #Javascript
jQuery Validate 校验多个相同name的方法
May 18 #jQuery
easyUI下拉列表点击事件使用方法
May 18 #Javascript
AngularJS自定义指令之复制指令实现方法
May 18 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
python在不同层级目录import模块的方法
2016/01/31 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python各类经纬度转换的实例代码
2019/08/08 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
.NET面试问题集
2015/12/08 面试题
人事部专员岗位职责
2014/03/04 职场文书
小学生期末评语
2014/04/21 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
商铺门前三包责任书
2014/07/25 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
党员民主生活会材料
2014/12/15 职场文书
初中信息技术教学反思
2016/02/16 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL