Bootstrap 4 でページネーションを揃えるにはどうすればよいですか?

Bootstrap 4 は、応答性の高いモバイルファースト Web サイトを作成するための人気のあるフロントエンド プログラミング フレームワークです。ナビゲーション バー、フォーム、ボタン、モーダルなど、モダンで美しい外観の Web サイトを迅速に構築するために使用できるさまざまな CSS および JavaScript 要素が提供されます。

Bootstrap 4 のページネーションの配置とは、Web ページのページネーション コンポーネントが配置される方法を指します。ただし、ページネーションは通常中央に配置されます。 justify-content-* クラスでは、左揃えまたは右揃えが可能です。

Bootstrap 4 でページネーションを揃える方法はたくさんあります -

.justify-content-* クラスを使用する
text-* クラスを使用する
次に、例を挙げて各方法を詳しく理解しましょう。

方法 1: 「.justify-content-* クラス」を使用する

Bootstrap 4 でページネーションを揃える最初の方法は、「.justify-content-* クラスを使用する」です。

ここでは、ステップバイステップの例を使用してこのメ​​ソッドを実装します -

- Bootstrap 4 JavaScript および CSS ファイルが HTML ドキュメントの先頭に含まれていることを確認します。

ステップ 2 - ページネーション コンポーネントを構築するには、ページネーション クラスを使用して

要素を作成します。ページごとに、ページのようなリンクを持つ 要素と、ページのような項目を持つ
• 要素を
  要素内に追加します。

  ステップ 3 - ページネーション コンポーネントを左、中央、または右に揃えるには、次のクラスのいずれかを

  要素に追加する必要があります -

  ページング コンポーネントは、.justify-content-start スタイルを使用して左揃えにします。

  • justify-content-center スタイルを使用すると、ページネーション コンポーネントが中央に配置されます。

  • align-pagination-end: ページネーション要素を右に移動します

  • ステップ 4
  - これは、ページネーションが左揃えの場合に HTML コードがどのように表示されるかを示す例です -
  リーリー

  ステップ 5 - 必要なクラスを追加すると、ページネーション コンポーネントが期待どおりに配置されるはずです。

  ステップ 6 - 最終的なコードは次のようになります -

  リーリー

  方法 2: text-* クラスを使用する ページネーション コンポーネントをそれぞれ左、中央、右に揃えるには、 を使用します。テキスト左、テキスト中央、および。テキスト右クラス。

  ＃＃＃例＃＃＃

  次に、このメソッドの実装例を段階的に見ていきます -

  ステップ 1

  - コンテナー div 要素を作成し、それにクラス justify-content-center を割り当てます。その結果、ページネーションはコンテナ内の中央に配置されます。

  リーリー
  ステップ 2

  - コンテナ div 内に

  要素を作成し、クラスのページネーションと align-pagination-links-to-desired-side (例: text-center、text-left、本文右) ) リーリー
  ステップ 3

  - 各ページ番号の

  • 要素、または
    要素内の「前へ」ボタンと「次へ」ボタンを作成します。 li 要素ごとに「page-item」クラスを指定します。 リーリー
    ステップ 4

    - 各

    • 要素内にボタンまたはページ番号の 要素を作成します。 要素にクラス「page-link」を割り当てます。 リーリー
      ステップ 5

      - 最終的なコードは次のようになります - リーリー ＃＃＃結論は＃＃＃ フレームワークによって提供される組み込みクラスを使用すると、Bootstrap 4 でのページの配置が簡単になります。上記の段階的なプロセスを使用すると、完全に機能し、視覚的にページ中心のページネーション コンポーネントを作成できます。プロジェクトに Bootstrap CSS ファイルと JavaScript ファイルを含め、aria-label 属性を持つ nav 要素を作成し、ページネーション リンクを含む順序なしリスト要素を提供します。 textcenter クラスがこれを行います。この戦略により、独自の CSS を大量に作成することなく、ページネーションの色と方向を簡単に変更できます。

      以上がBootstrap 4 でページネーションを揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。