ブートストラップグリッドシステムの単位は何ですか

1. Bootstrap とは

Bootstrap は、応答性の高い、モバイル デバイス優先の流体バリアのセットを提供します。システムでは、画面またはビューポートのサイズが大きくなると、システムは自動的に最大 12 列に分割します。シンプルなレイアウト オプション用の事前定義クラスと、よりセマンティックなレイアウトを生成するための強力なミックスイン クラスが含まれています。

この段落を理解して、最も重要な部分はモバイル デバイスの優先順位であることがわかります。それでは、モバイル デバイスの優先順位とは何でしょうか?

Bootstrap の基本的な CSS コードは、デフォルトで小さな画面デバイス (モバイル デバイス、タブレットなど) で開始され、メディア クエリを使用して大画面デバイス (ラップトップ、デスクトップ コンピュータなど) のコンポーネントおよびグリッドに拡張されます。

には次の戦略があります:

内容: 何が最も重要かを決定します。
レイアウト: 幅を小さく設計することを優先します。
プログレッシブ機能強化: 画面サイズが大きくなるにつれて要素を追加します。

関連する推奨事項: 「Bootstrap 入門チュートリアル 」

2. 動作原理

グリッド システムは、次の目的に使用されます。一連の行と列の組み合わせを使用してページ レイアウトを作成し、作成したこれらのレイアウトにコンテンツを配置できます。

次のように動作します:

「行」を適切な配置 (配置) にするためには、.container (固定幅) または .container-fluid (100% 幅) に含める必要があります。 )とパディング。

<div class="container"><!-- 水平居中，两边有margin，最小屏幕时，充满父元素 -->
 <div class="row"></div>
</div>
<!-- 或者 -->
<div class="container-fluid"><!-- 默认一直充满整个父元素 -->
 <div class="row"></div>
</div>

「行」を経由して横方向に「列」の集合を作成します。ただし、列数の合計は均等に分割された列の総数を超えることはできません（超えた場合は新しい行に表示されます）。デフォルトは 12 です。 (カスタマイズされた設定は、Less または Sass を使用して行うことができます)、次のように:

<div class="container">
 <div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-6"></div>
  <div class="col-md-4"></div>
 </div>
</div>

コンテンツは「列」に配置する必要があり、「列」のみを行として使用できます。 .

.row や .col-xs-4 などの定義済みクラスを使用して、グリッド レイアウトをすばやく作成できます。ブートストラップ ソース コードで定義されたミックスインを使用して、セマンティクス指向のレイアウトを作成することもできます。

「column」のpadding属性を設定することで、列間に隙間（ガター）を作成します。.row要素に負の値のマージンを設定することで、.containerをオフセットします。要素によって設定されたパディングは、「」のパディングを間接的にオフセットします。
次の例が外側にはみ出しているのは、負のマージンが原因です。 グリッド内 グリッド列の内容が行に配置されます。

グリッド内の列システムは、1 ～ 12 の値を指定することで範囲を表します。たとえば、3 つの等しい幅の列を作成するには、3 つの .col -xs-4 を使用できます。

「行」に 12 を超える値が含まれる場合"columns", 追加の "columns" が配置されている要素は全体として扱われます 新しい行に配置します。

グリッド クラスは、ブレークポイント サイズ以上の画面幅を持つデバイスに適用されます, 小さな画面デバイスではグリッド クラスがオーバーライドされるため、要素に .col-md- を適用します * グリッド クラスはブレークポイント サイズ以上の画面幅を持つデバイスに適用され、グリッド クラスはオーバーライドされますしたがって、要素に .col-lg-* を適用しても、大画面デバイスには影響しません。

以上がブートストラップグリッドシステムの単位は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。