ブートストラップ4ページ付け
基本的なページ付け
たくさんのページがあるWebサイトがある場合は、各ページに何らかのページ付けを追加することをお勧めします。
基本的なページ付けを作成するには、.paginationクラスを<ul>要素に追加します。次に、.page-itemを各<li>要素に追加し、.page-linkクラスを内部の各リンクに追加し<li>ます。
例
<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>
ページネーションの調整
ユーティリティクラスを使用して、ページネーションの配置を変更します。
例
<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px
0">
<li class="page-item">...</li>
</ul>
<!--
Center-aligned -->
<ul class="pagination justify-content-center"
style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!-- Right-aligned -->
<ul
class="pagination justify-content-end" style="margin:20px 0">
<li
class="page-item">...</li>
</ul>
ヒント：ブートストラップ4ユーティリティ/ヘルパークラスの詳細については、BS4ユーティリティの章を参照してください。
パン粉
ページ付けのもう1つの形式は、ブレッドクラムです。
.breadcrumband.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>