Bootstrap5 ページネーション
Web開発では、コンテンツが多すぎる場合は、通常ページネーション処理を行います。
Bootstrap 5 を使うと、ページネーション効果をとても簡単に実現できます。
基本的なページネーションを作成するには、<ul>要素に.paginationクラスを追加できます。次に、<li>要素に.page-itemクラスを追加し、<li>要素の<a>タグに.page-linkクラスを追加します：
例
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</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>
試してみる »
現在のページ番号の状態
現在のページでは、.activeクラスを使ってハイライト表示できます：
例
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><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>
試してみる »
クリックできないページネーションリンク
.disabledクラスを使用すると、ページネーションリンクをクリック不可に設定できます：
例
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#">Previous</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>
試してみる »
ページネーションのサイズ
ページネーション項目を異なるサイズに設定できます。
.pagination-lgクラスは大きなフォントのページネーション項目を設定し、.pagination-smクラスは小さなフォントのページネーション項目を設定します：
例
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">Previous</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>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">Previous</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>
試してみる »
ページネーションの整列
ユーティリティクラスを使用して、ページネーションの整列を設定できます：
例
<!--デフォルト（左揃え）-->
<ul class="pagination" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!--中央揃え-->
<ul class="pagination justify-content-center" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!--右揃え-->
<ul class="pagination justify-content-end" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
試してみる »
パンくずリスト
.breadcrumbと.breadcrumb-itemクラスはパンくずリストの設定に使用されます：
例
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
試してみる »