web-dev-qa-db-ja.com

レスポンシブにする方法Bootstrap 3ページネーション

この： enter image description here

小さなビューポートでこれに変わります：

enter image description here

私はそれが不快に見え、それもたくさんのスペースをとると思います。

これは標準のページネーション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>

今、私はそれらが提供するクラスでより小さなバージョンを使用することができましたが、すべてに-何に関係なくfat fingersに適したものである必要があります。

jquerycsstwitter-bootstraptwitter-bootstrap-3
19
Christina

私の意見では、ページ付けの切り替えはヘルパーですが、最終的な解決策ではありません。私はbootstrapプラグインを見つけました。このプラグインは、小さい画面サイズでページ分割が行うと期待することを正確に実行します。次のように、ページ分割されたliチャンクの数を縮小して画面の幅に一致させます。

wide screen sizemedium screen sizesmall screen size

rPage-応答性の高いbootstrap3ページネーションプラグイン

14
Hexodus

class="hidden-xs"を使用できます。

正常

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

小さい

< 4 [5] 6 >

PHPの例

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

デモ： http://jsbin.com/cotopu/1

enter image description here

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()
    });
});
5
Christina

以下はトリックを行います。ページ数は、同じページ数のすべてのデバイスで応答します。

.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より多くの柔軟性を得るためのクエリ。

0
Alliswell