Bootstrap4 ページネーション

この記事では、Bootstrap4でページネーションコンポーネントを使用する方法について説明します。

1. 基本的なページネーション

最も基本的なページネーションを作成するには、<ul>要素と<li>要素を使用し、それぞれに.page-itemクラスと.page-linkクラスを適用します。


<nav aria-label="ページネーション">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">前へ</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="#">次へ</a></li>
  </ul>
</nav>

2. 無効化とアクティブ状態

ページネーションリンクを無効にするには、.disabledクラスを<li>要素に追加します。現在アクティブなページを示すには、.activeクラスを使用します。


<nav aria-label="ページネーション">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">前へ</a></li>
    <li class="page-item active" aria-current="page"><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="#">次へ</a></li>
  </ul>
</nav>

3. 配置

ページネーションコンポーネントの配置を制御するには、.justify-content-centerクラスを使用して中央揃えに、または.justify-content-endクラスを使用して右揃えにします。


<nav aria-label="ページネーション">
  <ul class="pagination justify-content-center">
    <!-- ページネーションの項目 -->
  </ul>
</nav>

<nav aria-label="ページネーション">
  <ul class="pagination justify-content-end">
    <!-- ページネーションの項目 -->
  </ul>
</nav>

4. サイズ

ページネーションコンポーネントのサイズを変更するには、.pagination-smクラスを使用して小さいサイズに、または.pagination-lgクラスを使用して大きいサイズにします。


<nav aria-label="ページネーション">
  <ul class="pagination pagination-sm">
    <!-- ページネーションの項目 -->
  </ul>
</nav>

<nav aria-label="ページネーション">
  <ul class="pagination pagination-lg">
    <!-- ページネーションの項目 -->
  </ul>
</nav>

参考資料

Bootstrap4公式ドキュメント - ページネーション

よくある質問

質問: ページネーションの項目数を動的に変更するにはどうすればよいですか？
回答: JavaScriptを使用して、ページネーションコンテナ(<ul>要素)内に必要な数の<li>要素を動的に作成します。
質問: ページネーションをクリックしたときに別のページに移動するにはどうすればよいですか？
回答: 各ページネーションリンクのhref属性を、対応するページのURLに設定します。または、JavaScriptを使用してリンクのクリックイベントを処理し、必要なページにリダイレクトします。
質問: ページネーションのスタイルをカスタマイズするにはどうすればよいですか？
回答: カスタムCSSを使用して、Bootstrapのデフォルトスタイルをオーバーライドできます。たとえば、.page-linkクラスにスタイルを追加して、リンクの色、背景色、パディングなどを変更できます。