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 表单验证大全
Nov 23 Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
浅谈在node.js进入文件目录的问题
May 13 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
解决layUI的页面显示不全的问题
Sep 20 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小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
php图像验证码生成代码
2017/06/08 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
人生苦短我用python python如何快速入门?
2018/03/12 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
python爬取天气数据的实例详解
2020/11/20 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
求职简历中个人的自我评价
2013/12/25 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
办公用房租赁协议书
2014/11/29 职场文书
党员进社区活动总结
2015/05/07 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技