Bootstrap の一部として提供されるデフォルトのグリッド システムは、幅 940 ピクセル、12 列のグリッドです。

また、さまざまなデバイスと解像度に対応する 4 つの応答バリエーションがあります: 電話、タブレットの縦向き、テーブルの横向き、小さなデスクトップ、および大きなワイドスクリーンのデスクトップです。

<divクラス= "行" > 
  <divクラス= "span4" > ... </div> 
  <divクラス= "span8" > ... </div> 
</div>

ここに示すように、基本的なレイアウトは 2 つの「列」で作成できます。各列は、グリッド システムの一部として定義した 12 の基本的な列にまたがっています。

Bootstrap の静的 (非流体) グリッド システムを使用すると、ネスティングが簡単になります。コンテンツをネストするには、既存の列内に新しい.row一連の列を追加するだけです。.span*.span*

例

<divクラス= "行" > 
  <divクラス= "span12" > 
    列のレベル 1
    <divクラス= "行" > 
      <div class = "span6" >レベル 2 </div> 
      <div class = "span6" >レベル 2 </div> 
    </div>
  </div>
</div>

LESS の変数

Bootstrap には、上記のデフォルトの 940px グリッド システムをカスタマイズするためのいくつかの変数が組み込まれています。グリッドのすべての変数は、variables.less に保存されます。

カスタマイズ方法

グリッドを変更する@grid*と、3 つの変数が変更され、Bootstrap が再コンパイルされます。variables.less のグリッド変数を変更し、ドキュメントに記載されている 4 つの方法のいずれかを使用して再コンパイルします。さらに列を追加する場合は、それらの CSS を grid.less に必ず追加してください。

応答性の維持

グリッドのカスタマイズは、デフォルト レベルの 940px グリッドでのみ機能します。Bootstrap のレスポンシブな側面を維持するには、responsive.less のグリッドもカスタマイズする必要があります。

固定レイアウト

単一の<div class="container">.

<本体>
  <divクラス= "コンテナ" > 
    ...
  </div>
</body>

流動的なレイアウト

<div class="container-fluid">柔軟なページ構造、最小幅と最大幅、左側のサイドバーを提供します。アプリやドキュメントに最適です。

<div class = "コンテナ流体" > 
  <div class = "row-fluid" > 
    <divクラス= "span2" > 
      <!--サイドバーの内容-->
    </div>
    <divクラス= "span10" > 
      <!--本文内容-->
    </div>
  </div>
</div>

サポートされているデバイス

Bootstrap は、さまざまなデバイスや画面解像度でプロジェクトをより適切にするために、いくつかのメディア クエリをサポートしています。含まれるものは次のとおりです。

彼らは何をやる

メディア クエリでは、さまざまな条件 (比率、幅、表示タイプなど) に基づいてカスタム CSS を使用できますが、通常はmin-widthとmax-width.

• グリッドの列の幅を変更します
• 必要に応じて float ではなく要素を積み重ねる
• デバイスに合わせて見出しとテキストのサイズを変更する

Bootstrap はこれらのメディア クエリを自動的に含めませんが、それらを理解して追加することは非常に簡単で、最小限の設定で済みます。Bootstrap のレスポンシブ機能を含めるには、いくつかのオプションがあります。

1. コンパイル済みのレスポンシブ バージョン、bootstrap-responsive.css を使用する
2. @import "responsive.less" を追加して Bootstrap を再コンパイルする
3. Respond.less を個別に変更して再コンパイルする

なぜそれを含めないのですか？正直なところ、すべてがレスポンシブである必要はありません。開発者にこの機能を削除するよう促すのではなく、有効にするのが最善であると考えています。

  // 横向きの電話と下向き
  @media (最大-幅: 480px ) { ... }     
 
  // 横向きのスマートフォンから縦向きのタブレットへ
  @media (最大-幅: 768px ) { ... }     
 
  // 縦長のタブレットから横長およびデスクトップへ
  @media (最小-幅: 768px )および(最大-幅: 940px ) { ... }        
 
  // 大きなデスクトップ
  @media (最小-幅: 1200px ) { .. }