bootstrap下拉分页样式 带跳转页码


Posted in Javascript onDecember 29, 2018

本文实例为大家分享了bootstrap实现带跳转页码的下拉分页样式,供大家参考,具体内容如下

bootstrap 默认页码是没有下拉页码和分页页码跳转效果的,实际开发中需要对样式进行修改

<!--/分页-->
  <div class="container"> 
 <div class="row myCenter"> 
  <div class="col-xs-6 col-md-12 col-center-block"> 
  <ul class="pagination col-md-5 col-center-block">
  <li><a href="#" >«</a></li>
 <li class="active"><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>
  <li><label>
 <select id="pageSize" onchange="research()"
 aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length" class="g-pages">
 <option selected="selected" value="5">5条/页</option>
 <option value="10">10条/页</option>
 <option value="20">20条/页</option>
 <option value="30">30条/页</option>
 </select>
 </label>
 </li> 
 <li>跳至<input type="text" class="g-input">页<input type="button" onclick="" value="GO"></input></li>
  </ul>
  </div> 
 </div> 
 </div> 
<!--分页/-->

参考了完美实现bootstrap分页查询文章中的样式进行更改

修改后的样式效果图

bootstrap下拉分页样式 带跳转页码

为您的网站或应用提供带有展示页码的分页组件,或者可以使用简单的翻页组件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript面向对象之对象的深入理解
Jan 13 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
详解vue 兼容IE报错解决方案
Dec 29 #Javascript
玩转Koa之koa-router原理解析
Dec 29 #Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 #Javascript
玩转Koa之核心原理分析
Dec 29 #Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 #Javascript
bootstrap与pagehelper实现分页效果
Dec 29 #Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 #Javascript
You might like
PHP4中session登录页面的应用
2008/07/25 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
基于jquery的模态div层弹出效果
2010/08/21 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
Python @property原理解析和用法实例
2020/02/11 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
Python常用外部指令执行代码实例
2020/11/05 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
苹果香港官方商城:Apple香港
2016/09/14 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
会话Bean的种类
2013/11/07 面试题
新员工培训个人的自我评价
2013/10/09 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers