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

グリッド（グリッド）とは何ですか？

ウィキペディアから：

グラフィックデザインでは、グリッドは、（通常は2次元）からなる交差（垂直、水平）構造により、コンテンツを整理するために使用される一連の直線です。 これは、広くデザインプリントデザインレイアウトとコンテンツ構造で使用されています。 ウェブデザインでは、迅速にHTMLやCSSアプローチを使用して一貫して効果的なレイアウトを作成するために使用されます。

単にサイトがナビゲートしやすいであるように、コンテンツを整理するためのウェブデザイングリッドを入れて、クライアントの負荷を軽減します。

ブートストラップグリッドシステム（グリッドシステム）とは何ですか？

グリッドシステムの説明上の公式ドキュメントブートストラップ：

ブートストラップは、適切12に拡張機器またはビューポートのサイズの増大に応答して、モバイルデバイスの優先順位、固定されていないグリッドシステムを含みます。 また、クラスを混ぜ複数の意味のレイアウトを生成するための強力な含まれ、簡単にレイアウトオプションの定義済みのクラスが含まれています。

私たちはどのように上記のステートメントを理解しましょう。 3ブートストラップ、モバイルデバイスの優先順位は、この意味では、（モバイル、タブレットなど）小さな画面のデバイス用のブートストラップコードは、その後、コンポーネントおよびグリッド上（ラップトップ、デスクトップコンピュータなど）の大画面デバイスに拡張されます。

モバイル-最初の戦略

• コンテンツ
  • 最も重要であるかを決めます。
• レイアウト
  • 優先順位は小さい幅を設計しました。
  • CSSベースのモバイルデバイスは、メディアクエリは、タブレットコンピュータ、デスクトップコンピュータに送られ、優先事項です。
• プログレッシブ・エンハンスメント
  • 画面サイズの増加に伴いと要素を追加します。

増加画面やビューポート（ビューポート）サイズの応答グリッドシステムは、システムが自動的に12の最大値に分割されます。

ブートストラップグリッドシステム（グリッドシステム）の作品

ページレイアウトを作成するためのコンテンツを持つ行と列は一連のグリッドシステム。 それがどのように動作するかを以下に示しますブートストラップグリッドシステムは、次のとおりです。

• 行は、適切な位置合わせ（アライメント）とパディング（詰め物）を得るために、.containerクラスに配置する必要があります。
• 列の水平方向のセットを作成する行を使用します。
• コンテンツは、列に配置されるべきであり、カラムは、直接の子の行であることができます。
• 所定のグリッドクラス、例えば.rowと.COL-XS-4は、すぐにグリッドレイアウトを作成するために使用することができます。 LESS混合クラスでは、複数の意味のレイアウトを使用することができます。
• パディング（パディング）によって列の内容との間のギャップを作成するための列。 パディングは、外部（マージン）否定し、最後の行にを通じて.rowsから、最初の列はオフセットを示しています。
• グリッドシステムは、あなたがクロスを作成したい12の列を指定することで利用可能です。 例えば、3つの等しい列を作成するために、3.COL-XS-4を使用します。

メディアクエリ

メディアクエリは非常にシックな「条件付きCSSルール」です。 それだけでいくつかの所定の基準をCSSに基づいていくつかに適用されます。 これらの条件が満たされている場合には、適切なスタイルを適用します。

ブートストラップメディアクエリを使用すると、ビューポート、ショーと非表示コンテンツのサイズに基づいて移動することができます。 ブートストラップグリッドシステムの重要な境界点のしきい値を作成するために使用されるLESSファイルを使用して、次のメディアクエリ。

/ *超小型デバイス（携帯電話、未満768px）* /
/ *デフォルトでは、ブートストラップなしメディアクエリ* /

/ *小型デバイス（タブレット、以降768px）* /
@media（最小幅：画面-SM-分@）{ja.}

/ *ミディアムデバイス（デスクトップ、992px以降）* /
@media（最小幅：@画面-MD-分）{ja.}

/ *大型機器（大型デスクトップコンピュータ、以降1200px）* /
@media（最小幅：画面-LG-分@）{ja.}

私たちは時々 、画面サイズの小さい範囲内に閉じ込められたCSSに影響を与えるコード内のmax-widthメディアクエリーが含まれています。

@media（最大幅：@画面-XS-MAX）{ja.}
@media（幅分：画面-SM-分@）と（最大幅：画面-SM-MAX @）{ja.}
@media（最小幅：@画面-MD-分）及び（最大幅：@画面-MD-MAX）{ja.}
@media（最小幅：画面-LG-分@）{ja.}

メディアクエリは、二つの部分、第一のデバイスの仕様は、サイズルールを有します。 上記の場合、次のルールを設定します。

それでは、このコード行を見てみましょう：

@media（幅分：画面-SM-分@）と（最大幅：画面-SM-MAX @）{ja.}

分幅を持つすべての場合：画面の幅が@画面-SM-maxよりも小さい場合、画面-SM-分のデバイス@、それはいくつかの処理を行います。

グリッドオプション

次の表は、複数のデバイス間でブートストラップグリッドシステムがどのように動作するかを要約したものです。

グリッドの基本構造

ここで、ブートストラップ・グリッドの基本的な構造は次のとおりです。

<DIVクラス= "コンテナ">
   <DIVクラス= "行">
      <DIVクラス= "COL  -  *  -  *"> </ div>の
      <DIVクラス= "COL  -  *  -  *"> </ div>の      
   </ DIV>
   <DIVクラス= "行"> ja. </ DIV>
</ DIV>
<DIVクラス= "コンテナ"> jaja

我々はグリッドを見ていくつかの簡単な例をみましょう：

• 例：スタックレベル
• 例：中規模および大規模の設備
• 例：携帯電話、タブレットコンピュータ、デスクトップコンピュータ

応答列はリセット

次の例では、4つのグリッドが含まれていますが、我々はグリッドの位置が小さなデバイスの閲覧に表示されるかを決定することはできません。

この問題を解決するには、.clearfixクラスと使用使用することができます応答ユーティリティを次の例に示すように、解決するために：

ブラウザは、変更内容を確認するために、またはあなたの携帯電話への影響を表示するには、ウィンドウのサイズを変更します。

オフセット列

オフセットは、より専門的なレイアウトのために便利な機能です。 これらはカラムのためのより多くのスペースを作るために使用することができます。例えば、.COL-XSは= *クラスはオフセットをサポートしていませんが、彼らは単に効果を達成するために空のセルを使用してすることができます。

大画面ディスプレイ上のオフセットを使用するためには、.COL-MD-offset- *カテゴリを使用しています。 これらのクラスの外*範囲は1月11日からです（マージン）の増加*列から列をだろう残しました。

次の例では、我々はの<divクラス= "COL-MD持っ-6"> ja </ div>のを、私たちはこのdiv要素を中央に.COL-MD-オフセット-3クラスを使用します。

結果は以下の通りであります：

ネストした列

コンテンツ内のネストされたグリッドのデフォルトは、新しい.rowを追加し、既存の列.COL-MD-内*グループ.COL-MD-*列を追加します。 ネストされた行が12を超えることはできません列の数を設定する列のセットを、含まれている必要があります（実際には、あなたが12を埋めるために持っている必要はありません）。

以下の例では、レイアウトは、2つの列があり、第2列は、4つのボックスの二列に分割されます。

結果は以下の通りであります：

列のソート

別の完璧な機能へのブートストラップグリッドシステムでは、簡単に、注文が別の列に表示され、順番にコラムを書くことができるということです。

*範囲は1月11日からここであなたは簡単に、.COL-MD-プッシュ構築されたグリッド列*と.COL-MD-プル*クラスとの順序を変更することができます。

以下の例では、2列のレイアウトを持って、左の列は、サイドバーのように、非常に狭いです。 我々は2つの列の順序を交換する* .COL-MD-プッシュを使用し、.COL-MD-プル*クラスます。

結果は以下の通りであります：