如何制作响应式 Bootstrap 3 分页

Posted 2023-03-06

【中文标题】如何制作响应式 Bootstrap 3 分页

【英文标题】：How to Make Responsive Bootstrap 3 Pagination

【发布时间】：2014-11-08 09:28:16

【问题描述】：

这个：

在较小的视口上变成这样：

我觉得它看起来很糟糕，而且也占用了很多空间。

这是标准分页html：

<div class="container">
       <div class="text-center">
          <ul class="pagination pagination-lg">
             <li><a href="#">&laquo;</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="#">&raquo;</a></li>
          </ul>
       </div>
    </div>

现在，我可以在它们提供的类中使用较小的版本，但是一切（无论如何）都应该对胖手指友好，因为某些触摸设备与桌面设备一样大。

【问题讨论】：

你好女士这是什么？你为什么要回答你自己的（问题）它是一种教程吗？

@Tambo ***.com/help/self-answer

@Christina 我知道我要问的是，您是在寻求帮助还是只是为了帮助他人？

@Tambo：回答自己的问题并不少见。我经常这样做，因为我比任何人都更关心。是的，是为了帮助别人。

相反，如果我知道答案，我会这样做，有时我不知道。

【参考方案1】：

演示：http://jsbin.com/cotopu/1

CSS：

/* pagination-responsive */
@media (min-width:0px) and (max-width:650px)  
    .toggle-pagination 
        display: block
    
    .toggle-pagination.active i:before 
        content: '\2212'
    
    .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：

<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="#">&laquo;</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="#">&raquo;</a></li>
      </ul>
   </div>
</div>

jQuery：

$(document).ready(function() 
// show-pagination
    $('.toggle-pagination').click(function(f) 
        $(this).next('.pagination-responsive').slideToggle();
        $(this).toggleClass('active');
        f.preventDefault()
    );
);

【讨论】：

我注意到将两个背靠背放在同一个容器中，它们会重叠。起初以为是 JS 问题，但最终需要在 css 中添加.pagination-responsive overflow: hidden; 。正在将两个放在页面上，看看是否可行，以防我曾经在顶部做过一个，另一个在底部。

【参考方案2】：

在我看来，切换分页是一种帮助，但不是最终解决方案。我找到了一个引导插件，它完全可以在较小的屏幕尺寸上完成我期望的分页 - 它缩小了分页 li 块的数量以匹配屏幕宽度，如下所示：

rPage - responsive bootstrap3 pagination plugin

【讨论】：

是的！这比我想出的要好得多。感谢分享。

功能很棒。但是，在移动设备上，这个插件对我来说造成了一些严重的滞后。

【参考方案3】：

你可以使用class="hidden-xs":

正常

< 1 2 3 4 [5] 6 7 8 9 10 >

小

< 4 [5] 6 >

php 中的示例

if($number != $page)  echo ' class="hidden-xs" '; 

【讨论】：

好例子 (hidden-xs) +1

【参考方案4】：

以下将解决问题。分页将在具有相同页面数量的所有设备上响应。

.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;

此外，您还可以使用.hidden-xs、.hidden-md 类或@media 查询以获得更大的灵活性。