基于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 相关文章推荐
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
javascript实现随机抽奖功能
Dec 30 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的历史和优缺点
2006/10/09 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
php常量详细解析
2015/10/27 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
JS的数组迭代方法
2015/02/05 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
全面解读Python Web开发框架Django
2014/06/30 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
什么是Python中的顺序表
2020/06/02 Python
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
人事行政主管岗位职责
2013/12/22 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
CAD实训总结范文
2015/08/03 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
高中物理教学反思
2016/02/19 职场文书