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 使td内容不换行不撑开
Nov 29 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
Bootstrap多级菜单的实现代码
May 23 Javascript
微信小程序实现评论功能
Nov 28 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
Python合并多个Excel数据的方法
2018/07/16 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
Python定义一个函数的方法
2020/06/15 Python
Python wordcloud库安装方法总结
2020/12/31 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
乐观大学生的自我评价
2014/01/10 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
合同范本之电脑出租
2019/08/13 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
选购到合适的激光打印机
2022/04/21 数码科技
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技