目次

    ブートストラップ 5 グリッド システム

    ブートストラップ グリッドは、モバイル ファーストのレイアウトを構築するための強力なシステムです。多数のオプションを備えた非常に広範なツールです。以下に、基本的な知識を紹介します。これは、最も一般的に使用される例の簡単な概要です。
    Bootstrap のグリッド システムでは、ページ全体で最大 12 列を使用できます。12 列すべてを個別に使用したくない場合は、列をグループ化して幅の広い列を作成できます。
    Bootstrap のグリッド システムはレスポンシブで、画面サイズに応じて列が再配置されます。大画面では、コンテンツが 3 つの列に編成された方が見栄えがよい場合があります。

    グリッド クラス

    Bootstrap グリッド システムには 4 つのクラスがあります。
    1. xs (スマートフォン用 - 幅 768 ピクセル未満の画面)
    2. sm (タブレット用 - 幅 768px 以上の画面)
    3. md (小型ラップトップ用 - 幅 992 ピクセル以上の画面)
    4. lg (ラップトップおよびデスクトップの場合 - 幅が 1200px 以上の画面)

    グリッドシステムのルール

    いくつかの Bootstrap グリッド システム ルール:

    • 適切な配置とパディングのために、行は .container (固定幅) または .container-fluid (全幅) 内に配置する必要があります
    • 行を使用して列の水平グループを作成する
    • コンテンツは列内に配置する必要があり、列のみが行の直接の子になることができます
    • .row や .col-sm-4 などの事前定義されたクラスを使用して、グリッド レイアウトをすばやく作成できます
    • 列は、パディングによってガター (列のコンテンツ間のギャップ) を作成します。そのパディングは、.rows の負のマージンを介して、最初と最後の列の行でオフセットされます
    • グリッド列は、スパンする使用可能な 12 列の数を指定することによって作成されます。たとえば、3 つの等しい列は 3 つの .col-sm-4 を使用します。
    • 列幅はパーセンテージであるため、親要素に対して常に流動的でサイズが大きくなります

    ブートストラップ グリッドの基本構造

    <div class="container">
      <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>
      </div>
      <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>
      </div>
      <div class="row">
        ...
      </div>
    </div>

    したがって、必要なレイアウトを作成するには、コンテナー (<div class="container">) を作成します。次に、行を作成します (<div class="row">)。次に、必要な数の列 (適切な .col-*-* クラスのタグ) を追加します。 .col-*-* の数値は、常に各行の合計が 12 になることに注意してください。
    Bootstrap を使って楽しみましょう..

    PREV
    2022.08.12
    最新版Webpack入門 超快適なWebサイト制作の開発体験を【前編】
    NEXT
    2022.09.12
    PHPでCSVファイルを操る