Bootstrapグリッドシステム
Bootstrap'sグリッド・システムは、ページ全体で12列まで使用できます。
あなたが個別にすべての12の列を使用したくない場合は、グループ化列は、より広い列を作成することができます。
| スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 | スパン1 |
| スパン4 | スパン4 | スパン4 | |||||||||
| スパン4 | スパン8 | ||||||||||
| スパン6 | スパン6 | ||||||||||
| スパン12 | |||||||||||
Bootstrap'sグリッドシステムが応答して、列を再配置する画面サイズに応じます：大画面でそれは3つの列に編成内容と良く見えるかもしれないが、コンテンツ項目を積層した場合には、小さい画面にそれが良いだろう互いの上に。
ヒント：グリッド列は、行のために12まで追加する必要があることを覚えておいてください。 それ以上に、列はどんなににスタックしますviewport 。
グリッドクラス
Bootstrapグリッドシステムは、4つのクラスがあります。
- xs （携帯電話用）
- sm （タブレット用）
- md （デスクトップ用）
- lg （大きいデスクトップ用）
クラスは、上記のより動的で柔軟なレイアウトを作成するために組み合わせることができます。
ヒント：各クラスは、スケールアップするので、あなたが同じ幅を設定したい場合はxsとsm 、あなただけ指定する必要がxs 。
グリッドシステムのルール
一部のBootstrapグリッドシステムルール：
- 行が内に配置されている必要があり
.container（固定幅）または.container-fluid適切なアライメントとパディングのために（全角） - 列の水平方向のグループを作成する行を使用します
- コンテンツは、列内に配置されるべきであり、唯一の列は、行の直下の子であってもよいです
- 以下のような事前定義されたクラス
.rowと.col-sm-4速やかに、グリッドレイアウトを作成するために利用可能です - 列はパディングを介し雨どい（列の内容との間の隙間）を作成します。 そのパディングは上の負のマージンを経由して、最初と最後の列の行で相殺され
.rows - グリッド列は、あなたが及ぶことを望む12利用可能な列の数を指定して作成されます。 例えば、3つの等しい列三使用する
.col-sm-4
基本構造Bootstrapグリッド
以下は、基本的な構造であるBootstrapグリッド：
<div class="container">
<div
class="row">
<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> だから、あなたがしたいレイアウトを作成するために、容器（作成<div class="container"> 次に、行（作成<div class="row"> そして、（適切にタグ列の所望の数を追加.col-*-*クラス）。 内の数字ことに注意してください.col-*-*常に行ごとに12まで追加する必要があります。
グリッドオプション
次の表は、どのようにまとめたBootstrapグリッドシステムは、複数のデバイス間で動作します。
| Extra small devices Phones (<768px) |
Small devices Tablets (>=768px) |
Medium devices Desktops (>=992px) |
Large devices Desktops (>=1200px) |
|
|---|---|---|---|---|
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
例
次の章では、さまざまなデバイスのためのグリッドシステムの例を示しています。