Bootstrap5 の Pagination コンポーネントの使用方法に関する簡単な説明

この記事では、Bootstrap5 の Pagination コンポーネントの使用法を紹介します。皆様のお役に立てれば幸いです。

#[関連する推奨事項: 「

ブートストラップ チュートリアル」]

#1. 簡単な例

ページナビゲーションは記事一覧ページ、ダウンロードリスト、画像一覧などで一般的に使用されます データ量が多いため、1ページに表示することは不可能です 通常、ページナビゲーションには前ページ、次ページ、デジタルページが含まれますページ番号など 以下は簡単な例です:

      <nav aria-label="Page navigation">
        <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. アイコンの使用

アイコンまたはシンボルを使用して、特定のページング リンクを置き換えます。 .

<nav aria-label="Page navigation example">
<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>

3、無効およびアクティブなステータス

ページング リンクは、さまざまな状況に応じてカスタマイズできます。クリックできないように見えるリンクには無効を使用し、現在のページにあるように見えるリンクにはアクティブを使用します。

.disabled クラスは pointer-events: none を使用して a のリンク機能を無効にしようとしますが、CSS プロパティは標準化されておらず、キーボード ナビゲーションは考慮されていません。したがって、無効なリンクには常に tabindex="-1" を追加し、カスタム JavaScript を使用してその機能を完全に無効にする必要があります。

<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</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="#">Next</a>
</li>
</ul>
</nav>

4. サイズ

ページネーションを大きくするか小さくするか? pagination-lg または pagination-sm を追加するか、別のサイズを使用してください。

      <nav aria-label="...">
        <ul class="pagination pagination-lg">
        <li class="page-item active" aria-current="page">
        <span class="page-link">1</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>
        </ul>
       </nav>
       <nav aria-label="...">
        <ul class="pagination">
        <li class="page-item active" aria-current="page">
        <span class="page-link">1</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>
        </ul>
      </nav>

        <nav aria-label="...">
            <ul class="pagination pagination-sm">
            <li class="page-item active" aria-current="page">
            <span class="page-link">1</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>
            </ul>
        </nav>

#5. 配置

デフォルトのページング ナビゲーションは左揃えです。外国人は左揃えに慣れています。私たち中国人は中央揃えを好みます。あなたはフレキシブル ボックスの一般クラスを使用して、ページネーション コンポーネントの配置を変更できます。 justify-content-center を ul クラスに追加するだけです。もちろん、これはまれですが、justify-content-end を使用して右揃えにすることもできます。

<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>
</nav>

<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">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>
</nav>

この記事が役に立った場合は、ぜひ「いいね！」をしてください。

プログラミング関連の知識について詳しくは、

プログラミング ビデオ

をご覧ください。 ！

以上がBootstrap5 の Pagination コンポーネントの使用方法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。