ぱそくま ろご
開発 > Bootstrap > Bootstrap ペジネーション(ページャー)

Bootstrap ペジネーション(ページャー)

Bootstrap ペジネーション 基礎

Bootstrapではペジネーション(ページャー)が簡単に設置できます。

  1. スクリーンリーダを考慮し、ペジネーションの大枠はnavタグを記述します。
  2. その中にペジネーションの枠としてclass="pagination">を持ったulタグを記述します。
  3. ulタグの中にclass="page-item">を持つliを記述し、ページ遷移用の箱を用意します。
  4. そのliタグの中にclass="page-link">を持つaタグを記述します。これがページ番号用にます。

ペジネーションのサンプルは以下の通りです。なお、以下のサンプルにはスクリーンリーダーを考慮して、aria-xxx属性も付加しています。

例:Bootstrap ペジネーション

<!-- ペジネーションだということを明記(スクリーンリーダー用) -->
<nav aria-label="○○の検索結果 ">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="前へ">
        <!-- aria-hiddenをtrueにするとスクリーンリーダー用ブラウザには対象外のタグになります。-->
        <span aria-hidden="true">&laquo;</span>
        <!-- .sr-onlyはスクリーンリーダー用で通常のブラウザには表示されないようにしています。-->
        <span class="sr-only">前へ</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="次へ">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">次へ</span>
      </a>
    </li>
  </ul>
</nav>

例:Bootstrap ペジネーションの表示



カレントページや使用不可のページの表示

ペジネーションのカレントページを表すために色が反転しているページ番号がありますが、 これをBootstrapで行うには、.page-itemのliに.activeを追加するだけです。 使用不可にするには.disabledを追加します。ただし、.disabledにしてもタブ移動は可能になるので、 tabindex="-1"を付けたほうがよいでしょう。

例:Bootstrap ペジネーションのカレントページおよび使用不可


<nav aria-label="○○の検結果">
  <ul class="pagination">

    <!-- 1つ前に移動を使用不可にします。-->
    <li class="page-item disabled">
      <!-- aタグにtabキーでフォーカスが移動しないようにtabindex=-1を付けています。。-->
      <a class="page-link" href="#" aria-label="前へ" tabindex="-1">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">前へ</span>
      </a>
    </li>
    <!-- 1ページ目をアクティブにします。-->
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="次へ">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">次へ</span>
      </a>
    </li>
  </ul>
</nav>

ペジネーションのカレントページおよび使用不可

ペジネーションの文字サイズを変更する。

Bootstrapでは文字の大きさが2つのクラスが用意されていて、.pagination-lg(大きめ)と.pagination-sm(小さめ)です。 ペジネーションの.paginationのulタグにどちらかを追加してください。

例:Bootstrap ペジネーションの文字サイズの変更


<nav aria-label="○○の検結果">

    <!-- 文字を大きくする場合-->
    <ul class="pagination pagination-lg">
.
.
.
    <!-- 文字を小さくする場合-->
    <ul class="pagination pagination-sm">
.
.
.

例:Bootstrap ペジネーションの文字サイズの変更表示例

大きいペジネーション

小さいペジネーション