とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. ページネーション

ページネーション

.pagination, .page-item, .page-link はページネーション(ページャー)を表示します。

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Prev</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="#">Next<</a></li>
  </ul>
</nav>

アクティブと無効化

無効なアイテムには .disabled をつけます。現在のページには .active をつけます。スクリーンリーダー等のために sr-only として付加情報をつけています。

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Prev</a></li>
    <li class="page-item active">
      <span class="page-link">
        1<span class="sr-only">(current)</span>
      </span>
    </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="#">Next</a></li>
  </ul>
</nav>

アイコン

Prev や Next はアイコンとして表示することもできます。スクリーンリーダー等のために aria-label で意味を示し、aria-hidden でアイコンを読み上げないようにしています。

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

サイズ

.pagination-{sm|lg} は表示サイズを指定できます。

<nav aria-label="Page navigation">
  <ul class="pagination pagination-sm">
    ...
  </ul>
</nav>
<nav aria-label="Page navigation">
  <ul class="pagination">
    ...
  </ul>
</nav>
<nav aria-label="Page navigation">
  <ul class="pagination pagination-lg">
    ...
  </ul>
</nav>

表示位置

.justify-content-{start|center|end} は横方向の表示位置を指定します。

<nav aria-label="Page navigation">
  <ul class="pagination justify-content-start">
    ...
  </ul>
</nav>
<nav aria-label="Page navigation">
  <ul class="pagination justify-content-center">
    ...
  </ul>
</nav>
<nav aria-label="Page navigation">
  <ul class="pagination justify-content-end">
    ...
  </ul>
</nav>