twitter-bootstrap
グリッドシステム

前書き

備考

メディアクエリ

ブートストラップのMedia Queriesを使用すると、ビューポートのサイズに基づいてコンテンツを移動、表示、非表示にすることができます。ブートストラップグリッドシステムでキーブレークポイントを作成するには、以下のメディアクエリがLESSファイルで使用されます。

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

場合によっては、これらを拡張してCSSを狭いデバイスセットに制限するmax-widthを含めることができます。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

ブートストラップグリッド層（ブレークポイント）

ブートストラップには、 列単位の概念に加えて、階層として知られる異なるブレークポイントまたはグリッドサイズがあります。ブートストラップ3グリッドには、異なる画面（またはビューポート）幅に対応するために4つの層があります。ブートストラップ3層はxs 、 sm 、 md 、 lgです。ブートストラップのグリッド列は、異なるcol-{breakpoint}-{units} CSSクラスによって識別されます。

各グリッド層には、デスクトップ、ラップトップ、タブレット、スマートフォンなどの標準的なデバイスの画面幅に最適な範囲が含まれています 。

ブートストラップは、CSSメディアクエリーを使用して、各グリッドサイズの境界を設定する応答可能なブレークポイントを作成します。これらのグリッドサイズを使用すると、さまざまな画面幅やデバイスに最もよく一致するように列のレイアウトを変更することができます。

• col-xs-* - スマートフォンのような最小画面幅の場合は<768ピクセル
• col-sm-* - スマートフォンやタブレットのような小さな画面幅の場合> = 768 px
• col-md-* - タブレットやラップトップなどの中程度の画面幅の場合> = 992ピクセル
• col-lg-* - デスクトップなどの大画面幅の場合> = 1200 px

リファレンス： グリッドシステム

デバイスごとに同じ列幅

ビューポート幅の50％ （すべてのデバイス上）のカラムを作成するには、各ティアごとにcol-*-6を設定することができます。

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">..</div>

しかし、 col-xs-6はxs 6単位を意味するので、これは余分なマークアップではありません。設定した最小のティア（xs、sm、またはmd）も、画面の幅が大きい場合のサイズを定義します。すべてのティアの同じサイズの列については、最小のビューポートの幅を設定します。

より短いコード：

<div class="col-xs-6">..</div>

デバイスごとに異なる列幅（応答性の高いデザイン）

col-*-*クラスを組み合わせて、異なるグリッドサイズで列の幅を制御することができます。

たとえば、 sm階層に50％幅の列を作成し、 md層に25％幅の列を作成します。

<div class="col-md-3 col-sm-6">..</div>

sm 、 md 、およびlgグリッドは、768ピクセル未満のビューポート幅ですべて垂直に「スタック」します。これは、 xsグリッドが適合する場所です。col-xs- *クラスを使用する列は垂直に積み重ねられず、最小の画面で縮小し続けます。

ブートストラップの行と列

ブートストラップのグリッドシステムには、ビューポート全体にコンテンツを水平にレイアウトするために使用できる列として知られている12単位があります。

12単位グリッド（10,16などの代わりに）の理由は、12が6（半分）、4（四半期）と3（3/3）に均等に分かれているためです。これにより、さまざまなレイアウトに簡単に適応できます。ブートストラップのグリッド列は、異なるcol-{breakpoint}-{units} CSSクラスによって識別されます。 ビューポートの幅とブレークポイントの詳細（AKA Tier）

たとえば、 col-md-3は、幅（ md ）の幅のビューポートで12単位（または25％）のうち3単位を占める列を表します。レイアウトで列幅を使用するには、HTMLマークアップで適切なcol-{breakpoint}-{units}クラスを使用します。

<div class="col-{breakpoint}-{units}">

列の幅は流体（固定幅ではない）であるため、列はコンテナのパーセンテージを消費します。

ブートストラップ3の列単位

• col-*-1 ：1 of 12（8.33333333％幅）
• col-*-2 2：12 of 2（16.66666667％幅）
• col-*-3 （幅25％）
• col-*-4 4：12 of 4（33.3333333％幅）
• col-*-5 5：12 of 5（41.66666667％幅）
• col-*-6 ：6 of 12（幅50％）
• col-*-7 7：12 of 7（58.33333333％幅）
• col-*-8 8：12 of 8（66.66666667％幅）
• col-*-9 ：9 of 12（幅75％）
• col-*-10 10：10 of 10（83.33333333％幅）
• col-*-11 11：11 of 11（91.66666667％幅）
• col-*-12 of 12（100％幅）

デモ - ブートストラップの12列単位

ブートストラップ行

ブートストラップの.rowクラスは、列を格納するために使用されます。列は常に行に配置し、行は常にコンテナ（ containerまたはcontainer-fluid ）の内側に配置する必要があります。列の内容とブラウザの端の間の適切な間隔を確保するために、行は負のマージン（-15ピクセル）を使用します。列は、列を水平にグループ化するために使用されます。

<div class="container">
    <div class="row">
        <!-- one more columns -->
        <div class="col-{breakpoint}-{units}">..</div>
    </div>
</div>

列は左上から.rowを塗りつぶし、12列単位ごとに新しい行に折り返します。したがって、 .rowを使用して水平ブレークを作成するか、1つの.row要素に12以上の列単位を追加して、ビューポートを垂直方向に.row （またはスタックする） 列を持たせることができます 。

列の折り返し（ .row 12単位以上）を使用する場合は、 応答のないリセット（またはclearfixes）を使用して、不均一な列の内容を均等に折り返す必要があります。これは、列の内容の高さが異なる場合には不可欠です。

ブートストラップグリッドの列と行の詳細

ブートストラップ3流体グリッドレイアウトの問題？

ブートストラップ3 - ネストされた行は、最大12個までの列を追加できますか？

ブートストラップの行と列の説明

ブートストラップグリッドの仕組み（中）

コンテナ

ブートストラップでは、サイトのコンテンツをラップし、グリッドシステムを格納するために、要素が必要です。プロジェクトで使用する2つのコンテナのいずれかを選択できます。

応答のある固定幅のコンテナには.containerクラスを使用します。

<div class="container">
  ...
</div>

ビューポート全体の幅に渡って、フルコンテナの.container-fluidクラスを使用します。

<div class="container-fluid">
  ...
</div>

注意：コンテナは、 paddingなどのためにネスト可能ではありません（別のコンテナ内にコンテナを置くことはできません）。

列をオフセットする

これらのクラスは、列の左余白を*列だけ増加させます。たとえば、.col-md-offset-4は4列にわたって.col-md-4を移動します。

<div class="row">
  <div class="col-lg-4"></div>
  <div class="col-lg-4 col-lg-offset-4"></div>
</div>
<div class="row">
  <div class="col-lg-5 col-lg-offset-1"></div>
  <div class="col-lg-5 col-lg-offset-1"></div>
</div>

プッシュプルを使用した列の順序操作

<div class="container content">
    <div class="row">
        <!--Main Content-->
        <div class="col-lg-9 col-lg-push-3">
            Main Content
        </div>
        
        <!--Sidebar-->
        <div class="col-lg-3 col-lg-pull-9">
            Sidebar
        </div>
    </div>
</div>

これにより、組み込みのグリッド列の順序が変更されます。

構文：.col-md-push- *および.col-md-pull- *。

もっと：
Twitterのブートストラップ3でcol-lg-pushとcol-lg-pullを使用した列の順序の操作
ブートストラップ3：小さな画面サイズでのみ列をプッシュ/プルする
ブートストラップ3の列の順序とスタック