ブートストラップページネーションの使用方法

ブートストラップページングコンポーネントを使用して、ユーザーが簡単にナビゲートできるように、多くのコンテンツを小さなセクションに分割できます。ページングを追加する手順には、ページングコンテナの作成、ページングプロジェクトの作成、コンテンツの設定、アクティブページの設定、障害のあるページングの追加が含まれます。コンポーネントは、サイズ変更、アラインメント、テーマ、カスタムスタイルもサポートします。

ブートストラップページネーション

Bootstrapのページングコンポーネントを使用すると、大量のコンテンツを小さくて管理可能なセクションに分割して、ユーザーが簡単にナビゲートして情報にアクセスできるようにすることができます。

ブートストラップページネーションの使用方法

HTMLドキュメントにページングを追加するには、次の手順に従ってください。

<li> bootstrap.cssとbootstrap.jsファイルを追加： HTMLドキュメントがBootstrapのCSSおよびJavaScriptファイルにリンクされていることを確認してください。 <li> ページング容器を作成します：ページング容器として<nav></nav>要素を作成し、 paginationクラスを追加します。 <li> ページングプロジェクトの作成： <nav></nav>要素で、ページングプロジェクトとして<li>要素を作成します。ページングプロジェクトごとにpage-itemクラスを追加します。 <li> ページングプロジェクトのコンテンツを設定します。各ページングプロジェクトに、リンク要素を含めて、そのhref属性を対応するページに設定します。リンクごとにpage-linkクラスを追加します。 <li> アクティブページングの設定：現在のアクティブページの<li>にactiveクラスを追加します。 <li> 無効なページングを追加：ページネーションを無効にする<li>要素にdisabledクラスを追加します。

コード例：

 <code class="html"><nav class="pagination"> <li class="page-item disabled"> <a class="page-link" href="#">«</a> </li> <li class="page-item active"> <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> </nav></code>

その他のオプション：

<li> サイズ： pagination-lgまたはpagination-smクラスを追加することで、ページングをサイズ変更できます。 <li> アラインメント： justify-content-centerまたはjustify-content-endクラスを追加して、ページを整列させることができます。 <li> トピック： pagination-primary 、 pagination-secondaryなどのクラスを追加することにより、ページネーションのテーマを変更できます。 <li> カスタムスタイル：フォントサイズ、色、ボーダースタイルなど、ページングの外観をカスタマイズできます。

以上がブートストラップページネーションの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。