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脚本性能的优化方法
Feb 02 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
详解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个人网站架设连环讲(二)
2006/10/09 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
PHP排序算法类实例
2015/06/17 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
一个javascript参数的小问题
2008/03/02 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
js实现车辆管理系统
2020/08/26 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
Windows下python3.6.4安装教程
2018/07/31 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
帮一个朋友写的求职信
2014/08/09 职场文书
在校学生证明格式
2015/06/24 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
python+opencv实现目标跟踪过程
2022/06/21 Python