とほほの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>