Bootstrap5 ページネーション

Bootstrap 5 ページネーション

この記事では、Bootstrap 5 でページネーションコンポーネントを使用する方法について説明します。このコンポーネントは、Web サイト上で大量のコンテンツを分割し、閲覧やナビゲーションを容易にするために使用されます。

---

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

基本的なページネーション構造を作成するには、<nav aria-label="Page navigation"> と <ul class="pagination"> を使用します。個々のページネーションリンクを作成するには、<li class="page-item"><a class="page-link" href="#">...</a></li> を使用します。 .active クラスを使用して、現在アクティブなページを示します。 .disabled クラスを使用して、リンクを無効にします（例：前のページと次のページ）。

2. ページネーションのサイズ

.pagination-lg クラスを使用して、より大きなページネーションを作成します。 .pagination-sm クラスを使用して、より小さなページネーションを作成します。

3. 配置

デフォルトでは、ページネーションは左揃えです。 .justify-content-center クラスを使用して、ページネーションを中央揃えにします。 .justify-content-end クラスを使用して、ページネーションを右揃えにします。

4. 無効状態

.disabled クラスを使用して、ページネーションコンポーネント全体を無効にします。

5. 支援技術

ARIA 属性（aria-label、aria-current、aria-disabled など）を使用して、ページネーションコンポーネントのアクセシビリティを強化します。

6. サンプルコード

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


<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 active" aria-current="page">
      <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>

異なるサイズのページネーション


<nav aria-label="Page navigation">
  <ul class="pagination pagination-lg">
    <!-- 大きなページネーション -->
  </ul>
</nav>

<nav aria-label="Page navigation">
  <ul class="pagination pagination-sm">
    <!-- 小さなページネーション -->
  </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>

無効化されたページネーション


<nav aria-label="Page navigation">
  <ul class="pagination disabled">
    <!-- 無効化されたページネーション -->
  </ul>
</nav>

よくある質問

1. ページネーションのリンクを動的に生成するにはどうすればよいですか？

サーバーサイドのスクリプトを使用して、ページネーションリンクを動的に生成し、JavaScriptを使用してページコンテンツを更新できます。

2. ページネーションのスタイルをカスタマイズするにはどうすればよいですか？

Bootstrap のクラスをオーバーライドする独自のCSSルールを作成するか、Bootstrap の変数を変更して、ページネーションのスタイルをカスタマイズできます。

3. ページネーションにJavaScriptプラグインを使用できますか？

はい、ページネーションの機能を拡張するために、DataTablesなどのJavaScriptプラグインを使用できます。ただし、Bootstrapの組み込みページネーション機能で十分な場合もあります。

その他の参考記事:ページネーション css