jQuery 如何制作响应式 Bootstrap 3 分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25838135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Make Responsive Bootstrap 3 Pagination
提问by Christina
This:
这个：
Turns in to this on smaller viewports:
在较小的视口上变成这个：
I think it looks yucky and it takes up a lot of space too.
我认为它看起来很恶心，而且占用了很多空间。
This is standard pagination html:
这是标准的分页 html：
<div class="container">
<div class="text-center">
<ul class="pagination pagination-lg">
<li><a href="#">«</a></li>
<li><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 class="disabled"><span>...</span></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
Now, I could use smaller versions with the classes they provide, however everything -- no matter what -- should be friendly for fat fingersbecause some touch devices just as big as desktop devices.
现在，我可以使用它们提供的类的较小版本，但是所有东西——不管怎样——都应该对胖手指友好，因为有些触摸设备和桌面设备一样大。
采纳答案by Hexodus
In my opinion toggling the pagination is a helper but not the final solution. I found a bootstrap plugin that does exactly what I expect pagination to do at smaller screen sizes - it shrinks the number of paginated li chunks to match the screen width like this:
在我看来，切换分页是一个帮手，但不是最终的解决方案。我找到了一个 bootstrap 插件，它完全符合我期望在较小屏幕尺寸下分页所做的事情 - 它缩小了分页 li 块的数量以匹配屏幕宽度，如下所示：
回答by Carles Campi Areny
You can use class="hidden-xs":
您可以使用class="hidden-xs"：
Normal
普通的
< 1 2 3 4 [5] 6 7 8 9 10 >
Small
小的
< 4 [5] 6 >
Example in php
php中的例子
if($number != $page) { echo ' class="hidden-xs" '; }
回答by Christina
DEMO: http://jsbin.com/cotopu/1
演示：http: //jsbin.com/cotopu/1
CSS:
CSS：
/* pagination-responsive */
@media (min-width:0px) and (max-width:650px) {
.toggle-pagination {
display: block
}
.toggle-pagination.active i:before {
content: '12'
}
.pagination-responsive {
width: 100%;
margin-top: 10px;
display: none;
}
.pagination-responsive > li > a,
.pagination-responsive > li > span {
width: 100%;
margin: 0;
line-height: 40px;
padding: 0;
border-radius: 0px!important;
}
.pagination-responsive > li {
float: left;
width: 20%;
margin-top: -1px;
text-align: center;
}
}
@media (max-width:480px) {
.pagination-responsive > li {
width: 33%
}
}
@media (max-width:320px) {
.pagination-responsive > li {
width: 50%
}
}
@media (min-width:651px) {
.toggle-pagination {
display: none
}
.pagination-responsive {
display: inline-block!important
}
}
HTML:
HTML：
<div class="container">
<div class="text-center">
<a class="btn btn-default btn-block toggle-pagination"><i class="glyphicon glyphicon-plus"></i> Toggle Pagination</a>
<ul class="pagination pagination-responsive pagination-lg">
<li><a href="#">«</a></li>
<li><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 class="disabled"><span>...</span></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
jQuery:
jQuery：
$(document).ready(function() {
// show-pagination
$('.toggle-pagination').click(function(f) {
$(this).next('.pagination-responsive').slideToggle();
$(this).toggleClass('active');
f.preventDefault()
});
});
回答by Alliswell
The following will do the trick. Pagination will be responsive on all devices with same amount of pages.
以下将解决问题。分页将在所有页面数量相同的设备上响应。
.pagination {
display: table;
width: 100%;
}
.pager li, .pagination>li {
display: inline;
display: table-cell;
}
.pagination>li>a,
.pagination>li>span {
width: 100%;
text-align: center;
}
Additionally you can play with .hidden-xs, .hidden-mdclasses or with @mediaqueries to get more flexibility.
此外，您可以使用.hidden-xs,.hidden-md类或@media查询来获得更大的灵活性。
