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

时间:2022-11-09 18:07:46

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>
<!--分页/-->

参考了http://www.jb51.net/article/76093.htm 文章中的样式进行更改

修改后的样式效果图

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

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

默认分页

受 Rdio 的启发,我们提供了这个简单的分页组件,用在应用或搜索结果中超级棒。组件中的每个部分都很大,优点是容易点击、易缩放、点击区域大。