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 相关文章推荐
比较搞笑的js陷阱题
Feb 07 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
小程序实现上传视频功能
Aug 18 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
PHP 简单日历实现代码
2009/10/28 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python之re操作方法(详解)
2017/06/14 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
简单介绍django提供的加密算法
2019/12/18 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
中餐厅主管的职责范文
2014/02/04 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
应用外语系自荐信
2014/06/26 职场文书
家庭教育的心得体会
2014/09/01 职场文书
人民调解协议书范本
2014/10/11 职场文书
商家认证委托书格式
2014/10/16 职场文书
夏洛特的网观后感
2015/06/15 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang