この記事では、Bootstrap5 の Pagination コンポーネントの使用法を紹介します。皆様のお役に立てれば幸いです。
#[関連する推奨事項: 「
ブートストラップ チュートリアル」]
#1. 簡単な例
ページナビゲーションは記事一覧ページ、ダウンロードリスト、画像一覧などで一般的に使用されます データ量が多いため、1ページに表示することは不可能です 通常、ページナビゲーションには前ページ、次ページ、デジタルページが含まれますページ番号など 以下は簡単な例です:
2. アイコンの使用
アイコンまたはシンボルを使用して、特定のページング リンクを置き換えます。 .
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 サイトの他の関連記事を参照してください。