基于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 相关文章推荐
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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获取url参数方法总结
2014/11/13 PHP
js树形控件脚本代码
2008/07/24 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
详解vue-router基本使用
2017/04/18 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python读写文件基础知识点
2019/06/10 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python中class的定义及使用教程
2019/09/18 Python
Python分类测试代码实例汇总
2020/07/23 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
毕业生简单求职信
2013/11/19 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
伏羲庙导游词
2015/02/09 职场文书