Bootstrap3 PaginationとPagerの使い方

Pocket

Bootstrap3のPaginationとPagerの使い方まとめ。

ページネーションは複数のページにまたがる場合に使われるコンポーネント。ulタグにclassをつけるだけで簡単に使えます。ページャーは前後のページへのリンクをボタン風に表示するコンポーネントです。こちらも同じ方法で簡単に使えるので、機会があればどしどし使っていきましょう。

Bootstrap3のPaginationの使い方

Paginationのclass

ページネーションはulタグに.paginationclassをつけて、liタグの中にページ番号を入れるだけのシンプルな構造。特に難しいところはありません。

現在のページは.active、リンクの無効化は.disabledを追加することで作ることができます。

Class名 概要
ul.pagination ページネーションclass
li.active 現在のページを表すclass
li.disabled リンクの無効化
<ul class="pagination">
  <li class="disabled">
    <a href="#" aria-label="Previous">
      <span aria-hidden="true">«</span>
    </a>
  </li>
  <li class="active">
    <a href="#">
      1 <span class="sr-only">(current)</span>
    </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>
    <a href="#" aria-label="Next">
      <span aria-hidden="true">»</span>
    </a>
  </li>
</ul>

Paginationのサイズを変更

ページネーションコンポーネントはサイズを変更することが可能です。paginationclassの横に-lgを追加すれば、大きいサイズ。-smを追加すれば小さいサイズに変更可能。

Class名 概要
.pagination.pagination-lg 大きいサイズに変更
.pagination.pagination-sm 小さいサイズに変更
<!-- 大きいサイズ -->
<ul class="pagination pagination-lg">
  ...
</ul>

<!-- 小さいサイズ -->
<ul class="pagination pagination-sm">
  ...
</ul>

デモページはこちら

Bootstrap3 Pagerの使い方

pagerのclass

ページャーはページネーションと異なり、前後のページへのリンクを作るもの。ulタグにpagerclassをつけるだけでOK。リンクを両端に揃えたい場合は、.previousnextを付け加えます。

Class名 概要
ul.pager ページャーclass
li.previous リンクを左端にセット
li.next リンクを右端にセット
li.disabled リンクを無効化
<ul class="pager">
  <li class="previous disabled">
    <a href="#"><span aria-hidden="true">←</span> Older</a>
  </li>
  <li class="next">
    <a href="#">Newer <span aria-hidden="true">→</span></a>
  </li>
</ul>

デモページはこちら