如何做出响应式Bootstrap 3分页

Question

此：

在较小的视口上转到此处：

我觉得它看起来很难吃，也占用了很多空间。

这是标准分页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>

现在，我可以使用它们提供的类的较小版本，但无论如何，所有内容都应该对胖手指友好，因为有些触摸设备与桌面设备一样大。< / p>

Answer 1

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

rPage - responsive bootstrap3 pagination plugin

Answer 2

您可以使用class="hidden-xs"：

正常

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

小

< 4 [5] 6 >

php

中的示例

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

Answer 3

DEMO：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()
    });
});

Answer 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个查询来获得更多灵活性。