如何做出响应式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>

现在,我可以使用它们提供的类的较小版本,但是所有东西 - 无论如何 - 都应该对胖手指友好,因为有些触摸设备和桌面设备一样大.

Answer 1

在我看来,切换分页是一个帮助,但不是最终的解决方案.我找到了一个引导程序插件,它完全按照我期望的分页在较小的屏幕尺寸上执行 - 它缩小了分页的li块的数量以匹配屏幕宽度,如下所示:

rPage - 响应式bootstrap3分页插件

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

演示: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()
    });
});