Bootstrap-grid-system
ブートストラップ-グリッドシステム
この章では、ブートストラップグリッドシステムについて説明します。
グリッドとは何ですか？
wikepediaによると-
'_グラフィックデザインでは、グリッドは、コンテンツの構造化に使用される一連の交差する直線（垂直、水平）で構成される構造（通常は2次元）です。 印刷デザインのレイアウトとコンテンツ構造の設計に広く使用されています。 Webデザインでは、HTMLとCSSを使用して一貫性のあるレイアウトを迅速かつ効果的に作成する非常に効果的な方法です。_
簡単に言えば、Webデザインのグリッドはコンテンツを整理および構造化し、Webサイトをスキャンしやすくし、ユーザーの認知的負荷を軽減します。
Bootstrap Grid Systemとは何ですか？
グリッドシステム用のBootstrapの公式ドキュメントによると-
'_ブートストラップには、デバイスまたはビューポートのサイズの増加に応じて最大12列まで適切にスケールする、応答性の高いモバイルの最初の流体グリッドシステムが含まれています。 簡単なレイアウトオプション用の定義済みクラスと、よりセマンティックレイアウトを生成するための強力なミックスインが含まれています。_
上記の声明を理解しましょう。 Bootstrap 3は、モバイルデバイス、タブレットなどの小さな画面を対象としてブートストラップのコードを開始し、ラップトップ、デスクトップなどの大きな画面のコンポーネントとグリッドを「拡張」するという意味で、最初にモバイルです。
モバイルファースト戦略
- コンテンツ
- 最も重要なものを決定します。
- レイアウト
- 最初に小さい幅に設計します。
- ベースCSSはモバイルデバイスを最初にアドレスします。タブレット、デスクトップのメディアクエリアドレス。
- プログレッシブエンハンスメント
- 画面サイズが大きくなるにつれて要素を追加します。
ブートストラップグリッドシステムの動作
グリッドシステムは、コンテンツを収容する一連の行と列を介してページレイアウトを作成するために使用されます。 ブートストラップグリッドシステムの仕組みは次のとおりです-
- 適切な配置とパディングのために、行は .container クラス内に配置する必要があります。
- 行を使用して、列の水平グループを作成します。
- コンテンツは列内に配置する必要があり、列のみが行の直接の子になります。
- グリッドレイアウトをすばやく作成するために、。rowや .col-xs-4 などの事前定義されたグリッドクラスを使用できます。 LESSミックスインは、よりセマンティックなレイアウトにも使用できます。
- 列は、パディングによって溝（列のコンテンツ間のギャップ）を作成します。 そのパディングは、*。rows *の負のマージンを介して最初と最後の列の行にオフセットされます。
- グリッド列は、スパンする12の使用可能な列の数を指定することにより作成されます。 たとえば、3つの等しい列は3つの .col-xs-4 を使用します。
メディアクエリ
メディアクエリは、「条件付きCSSルール」の非常に洗練された用語です。 指定された特定の条件に基づいて、CSSを単に適用します。 これらの条件が満たされると、スタイルが適用されます。
Bootstrapのメディアクエリを使用すると、ビューポートサイズに基づいてコンテンツを移動、表示、非表示できます。 ブートストラップグリッドシステムにキーブレークポイントを作成するために、LESSファイルで次のメディアクエリが使用されます。
時折、これらは max-width を含むように拡張され、CSSをより狭いデバイスセットに制限します。
メディアクエリには、デバイス仕様とサイズルールの2つの部分があります。 上記の場合、次のルールが設定されています-
この行を考えてみましょう-
すべてのデバイスで、min-widthの種類に関係なく：@ screen-sm-min_画面の幅が @ screen-sm-max_より小さくなった場合は、それから何かを実行します。
グリッドオプション
次の表は、Bootstrapグリッドシステムが複数のデバイス間でどのように機能するかの側面をまとめたものです-
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Max container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # of columns | 12 | 12 | 12 | 12 |
| Max column width | Auto | 60px | 78px | 95px |
| Gutter width |
30px （列の両側に15ピクセル） a |
30px （列の両側に15ピクセル） a |
30px （列の両側に15ピクセル） a |
30px （列の両側に15ピクセル） |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
基本的なグリッド構造
以下は、Bootstrapグリッドの基本構造です-
いくつかの簡単なグリッドの例を見てみましょう-
- link：/bootstrap/bootstrap_grid_system_example1 [例-水平に積み上げ]
- link：/bootstrap/bootstrap_grid_system_example2 [例-中規模および大規模デバイス]
- リンク：/bootstrap/bootstrap_grid_system_example3 [例-モバイル、タブレット、デスクトップ]
応答列のリセット
4層のグリッドを使用できるため、特定のブレークポイントで、一方が他方よりも高いために列が完全にクリアされないという問題が発生します。 これを修正するには、次の例に示すように、クラス .clearfix とリンクの組み合わせを使用します。/bootstrap/bootstrap_sensitive_utilities[応答ユーティリティクラス]-
これは、次の結果を生成します-
'_ビューポートのサイズを変更するか、この例の望ましい結果を得るために携帯電話で確認してください。_
オフセット列
オフセットは、より特殊なレイアウトに役立つ機能です。 これらを使用して、列を押して間隔を広げることができます（たとえば）。 .col-xs = *クラスはオフセットをサポートしていませんが、空のセルを使用して簡単に複製できます。
大きなディスプレイでオフセットを使用するには、。col-md-offset-クラスを使用します。 これらのクラスは、 *1 から 11 の範囲の*列だけ列の左マージンを増やします。
次の例では、<div class = "col-md-6"> .. </div>があります。これをクラス .col-md-offset-3 を使用して中央揃えします。
これは、次の結果を生成します-
ネスト列
デフォルトのグリッドでコンテンツをネストするには、既存の* .col-md-列内に新しい .row および* .col-md-列のセットを追加します。 入れ子になった行には、合計12個の列のセットを含める必要があります。
次の例では、レイアウトに2つの列があり、2番目の列は2つの行で4つのボックスに分割されています。
これは、次の結果を生成します-
列の順序
Bootstrapグリッドシステムのもう1つの優れた機能は、列を順番に簡単に記述し、別の列に表示できることです。 * .col-md-push-および* .col-md-pull-修飾子クラスを使用して、 1 から 11 の範囲の組み込みグリッド列の順序を簡単に変更できます。
次の例では、左側の列が最も狭く、サイドバーとして機能する2列のレイアウトがあります。 * .col-md-push-および* .col-md-pull-クラスを使用して、これらの列の順序を入れ替えます。
これは、次の結果を生成します-
