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

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

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

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

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

例

ネストされた行には、その親の列数まで合計される一連の列が含まれている必要があります。たとえば、入れ子になった 2 つの.span3列は 内に配置する必要があります.span6。

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

ピクセルではなくパーセント

流体グリッド システムでは、列幅に固定ピクセルではなくパーセントが使用されます。また、固定グリッド システムと同じ反応のバリエーションがあり、主要な画面解像度とデバイスの適切な比率を保証します。

流動的な行

.rowに変更するだけで、行を流動的にし.row-fluidます。列はまったく同じままなので、固定レイアウトと流動レイアウトを簡単に切り替えることができます。

マークアップ

<div class = "row-fluid" > 
  <divクラス= "span4" > ... </div> 
  <divクラス= "span8" > ... </div> 
</div>

流動グリッドでのネストは少し異なります。ネストされた列の数は、親と一致する必要はありません。代わりに、各行が親列の 100% を占めるため、列は各レベルでリセットされます。

<div class = "row-fluid" > 
  <divクラス= "span12" > 
    列のレベル 1
    <div class = "row-fluid" > 
      <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 は、1 つのファイルで少数のメディア クエリをサポートし、さまざまなデバイスや画面解像度でプロジェクトをより適切なものにするのに役立ちます。含まれるものは次のとおりです。

メタタグが必要

デバイスがレスポンシブ ページを適切に表示するようにするには、viewport メタ タグを含めます。

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  

彼らは何をやる

メディア クエリでは、さまざまな条件 (比率、幅、表示タイプなど) に基づいてカスタム 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 )および(最大-幅: 980px ) { ... }        
 
  // 大きなデスクトップ
  @media (最小-幅: 1200px ) { .. }