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分页查询文章中的样式进行更改

修改后的样式效果图

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

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

相关文章

  • 多个checkbox被选中时如何判断是否有自己想要的

    多个checkbox被选中时如何判断是否有自己想要的

    当多个checkbox被选中时如何判断是否有自己想要的,下面有段代码,大家可以看看
    2014-09-09
  • 深入学习 JavaScript中的函数调用

    深入学习 JavaScript中的函数调用

    可能很多人在学习 JavaScript 过程中碰到过函数参数传递方式的迷惑,本着深入的精神,我给大家分享了一篇教程关于javascript中的函数调用知识,感兴趣的朋友一起学习吧
    2017-03-03
  • 用cssText批量修改样式

    用cssText批量修改样式

    一般情况下我们用js设置元素对象的样式会使用这样的形式
    2009-08-08
  • JS清除选择内容的方法

    JS清除选择内容的方法

    这篇文章主要介绍了JS清除选择内容的方法,较为详细的分析了js操作文本的技巧,需要的朋友可以参考下
    2015-01-01
  • javascript 子窗体父窗体相互传值方法

    javascript 子窗体父窗体相互传值方法

    javascript 子窗体父窗体相互传值方法,一般都是用window.open函数,下面脚本之家给出具体的代码。
    2010-05-05
  • 浅谈javascript中的作用域

    浅谈javascript中的作用域

    首先说明一下:Js中的作用域不同于其他语言的作用域,要特别注意
    2012-04-04
  • 12个非常有用的JavaScript技巧

    12个非常有用的JavaScript技巧

    在这篇文章中,我将分享12个非常有用的JavaScript技巧。这些技巧可以帮助你减少并优化代码,需要的朋友参考下本文吧
    2017-05-05
  • JS实现鼠标单击与双击事件共存

    JS实现鼠标单击与双击事件共存

    本篇文章主要是对JS实现鼠标单击与双击事件共存的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • 浅谈React 服务器端渲染的使用

    浅谈React 服务器端渲染的使用

    本篇文章主要介绍了浅谈React 服务器端渲染的使用,React是最受欢迎的客户端 JavaScript 框架,在本教程中,我们将逐步向您介绍服务器端的渲染示例
    2018-05-05
  • 关于微信中a链接无法跳转问题

    关于微信中a链接无法跳转问题

    微信页面开发时,各个主页之间的跳转,完全是通过a链接进行的,但是来回跳转几次,再次从其他主页面跳回首页的时候,微信头部出现了跳转加载进度条,但是就是不跳转,也没有任何反应,怎么回事呢?下面小编给大家解答下
    2016-08-08

最新评论