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

更新时间：2018年12月29日 15:54:01 作者：我不是法海

这篇文章主要为大家详细介绍了bootstrap下拉分页样式，带跳转页码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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分页查询文章中的样式进行更改

修改后的样式效果图

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js实现碰撞检测
这篇文章主要为大家详细介绍了js实现碰撞检测，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
js原生Ajax的封装和原理详解
这篇文章主要为大家详细介绍了js原生Ajax的封装和原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
JS实现的简洁纵向滑动菜单(滑动门)效果
这篇文章主要介绍了JS实现的简洁纵向滑动菜单(滑动门)效果,通过简单的页面元素遍历实现华东切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
学习JavaScript编程语言的8张思维导图分享
这篇文章主要介绍了学习JavaScript编程语言的8张思维导图分享,本文给出了javascript变量、javascript运算符、javascript数组、javascript流程语句、javascript字符串函数、javascript函数基础、javascript基础DOM操作、javascript正则表达式的思维导图,需要的可以参考下
2015-03-03
JS选取DOM元素的简单方法
下面小编就为大家带来一篇JS选取DOM元素的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
asp.net中System.Timers.Timer的使用方法
asp.net中System.Timers.Timer的使用方法，需要的朋友可以参考一下
2013-03-03
JS中DOM元素的attribute与property属性示例详解
这篇文章主要给大家介绍了关于JS中DOM元素的attribute与property属性的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧
2018-09-09
Draggable Elements 元素拖拽功能实现代码
虽说js框架到处都是, 都封装了很多实用的功能,能快速的让我们实现如动画,元素拖拽等功能, 不过由于好奇心的驱使, 有时想一探究竟, 看看一些功能是如何实现的
2011-03-03
javascript设计模式之中介者模式学习笔记
这篇文章主要为大家详细介绍了javascript设计模式之中介者模式学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
这篇文章主要介绍了JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的一种解决办法，本文还给大家介绍了js快速获取数组中最大值和最小值的方法，非常不错,需要的朋友可以参考下
2016-07-07