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

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

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

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

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

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

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

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

4. サイズ

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

#5. 配置

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

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

をご覧ください。 ！

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