Как сделать отзывчивый Bootstrap 3 Pagination

Это:

Входит в это при меньших видовых экранах:

Я думаю, что он выглядит yucky, и он тоже занимает много места.

Это стандартная разбивка на страницы 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>

Теперь я мог бы использовать меньшие версии с классами, которые они предоставляют, однако все - независимо от того, что - должно быть дружественным для жирных пальцев, потому что некоторые сенсорные устройства так же велики, как настольные устройства.

Ответ 1

По-моему, переключение страницы - это помощник, но не окончательное решение. Я нашел загрузочный плагин, который делает именно то, что я ожидаю от постраничного изображения при меньших размерах экрана - он уменьшает количество разбитых на куски строк в соответствии с шириной экрана следующим образом:

rPage - отзывчивый бутстрап3 плагин для разбивки на страницы

Ответ 2

Вы можете использовать class="hidden-xs":

Normal

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

Малый

< 4 [5] 6 >

Пример в php

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

Ответ 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()
    });
});

Ответ 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, чтобы получить большую гибкость.