基于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滚动字幕效果实现代码
Jun 22 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
浅谈TypeScript的类型保护机制
Feb 23 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
虫族 ZERG 概述
2020/03/14 星际争霸
PHP将XML转数组过程详解
2013/11/13 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
Yii2如何批量添加数据
2016/05/17 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
详解php中 === 的使用
2016/10/24 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python批量下载图片的三种方法
2013/04/22 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
教师节活动主持词
2014/04/02 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
放牛班的春天观后感
2015/06/01 职场文书
田径运动会通讯稿
2015/07/18 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers