ブートストラップグリッド
ブートストラップグリッドシステム
Bootstrapのグリッドシステムでは、ページ全体で最大12列を使用できます。
12列すべてを個別に使用したくない場合は、列をグループ化して、より幅の広い列を作成できます。
| スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 |
| スパン4 | スパン4 | スパン4 | |||||||||
| スパン4 | スパン8 | ||||||||||
| スパン6 | スパン6 | ||||||||||
| スパン12 | |||||||||||
Bootstrapのグリッドシステムは応答性が高く、画面サイズに応じて列が自動的に再配置されます。
グリッドクラス
ブートストラップグリッドシステムには、次の4つのクラスがあります。
xs（電話の場合-幅768px未満の画面）sm（タブレットの場合-幅768px以上の画面）md（小型ノートパソコンの場合-幅992px以上の画面）lg（ラップトップおよびデスクトップの場合-幅1200px以上の画面）
上記のクラスを組み合わせて、より動的で柔軟なレイアウトを作成できます。
ブートストラップグリッドの基本構造
ブートストラップグリッドの基本構造は次のとおりです。
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
初め; 行を作成します（<div
class="row">）。.col-*-*次に、必要な数の列（適切なクラスのタグ）を追加します
。の数値は、.col-*-*行ごとに常に最大12になる必要があることに注意してください。
以下に、基本的なBootstrapグリッドレイアウトの例をいくつか集めました。
3つの等しい列
.col-sm-4
.col-sm-4
.col-sm-4
次の例は、タブレットから始めて大きなデスクトップにスケーリングする3つの等しい幅の列を取得する方法を示しています。幅768px未満の 携帯電話または画面では、列は自動的にスタックされます。
例
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
2つの等しくない列
.col-sm-4
.col-sm-8
次の例は、タブレットから始めて大きなデスクトップにスケーリングする2つのさまざまな幅の列を取得する方法を示しています。
例
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
ヒント：このチュートリアルの後半で、ブートストラップグリッドについて詳しく学習します。