原文:Grid system
12の列システム、5つのデフォルトのレスポンシブ層、Sass変数とmixinsと何十ものあらかじめ設定されたクラスのためのすべての形状と大きさのレイアウトを構築するために、私たちのパワフルなモバイル優先フレックスボックス・グリッドを使用します。
それは、どのように動作するか
Bootstrapのグリッド・システムは、一連のコンテナ、行と列を使用し、レイアウトするために内容を整列させます。これは、フレックスボックスで構築され、そして、完全にレスポンシブにです。以下は、どのように、グリッドが互いに組み合わされるかの例で、そして、外観の詳細です。
フレックスボックスに不慣れで、馴染みがありませんか?背景、用語、ガイドライン、コード・スニペットについては、このCSS Tricksフレックスボックス・ガイドをお読みください。
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
上記の例では、私たちのあらかじめ設定されたグリッド・クラスを使用して、small、medium、largeとextra largeデバイス上で、3つの同じ幅の列を作成します。それらの列は、親の .containerで、ページ内で中央揃えされます。
それを分割し、以下のように動作します。:
- コンテナは、あなたのサイトの内容をパッドに中央揃えと垂直揃えするための手段を提供します。レスポンシブ・ピクセル幅ために、.container、あるいは、幅のために.container-fluidを使用します。:すべてのビューポートとデバイス・サイズで、100%。
- Rowsは、columnsのためのラッバーです。それぞれ列は、それらの間で間隔を制御するための(ガターと呼ばれる)水平パディングを持っています。このパディングは、続いて、負のマージンを持つ行で打ち消されます。この方法では、あなたの列内のすべてのコンテンツは、視覚的に左側に整列します。
- グリッド・レイアウトでは、コンテンツは、列内に配置する必要があり、列のみが行の直接の子になる可能性があります。
- フレックスボックスのおかげで、指定された幅のないグリッド列は、自動的に、同じ幅の列としてレイアウトされます。例えば、.col-smの4つのインスタンスは、それぞれ自動的に、smallブレークポイントから上で、25%の幅になります。他の例については、「自動レイアウトの列」のセクションを参照してください。
- 列クラスは、行ごとに可能な12のうちから、あなたが使用したい列の数値を示しています。それで、あなたが、3つの等しい幅の列が必要な場合、あなたは、.col-4を使用することができます。
- 列の幅は、常に、流動性がある親要素と相対的な大きさで、パーセンテージで設定されます。
- 列は、それぞれの列の間で、ガターを作成するために、水平パディングを持っています。しかしながら、あなたは、.rowに.no-guttersを持つ行からのマージン、そして、列からパディングを削除することができます。
- グリッドをレスポンシブに作成するために、各々のレスポンシブ・ブレークポイントごとに1つ、5つのグリッド・ブレークポイントがあります。:すべてのブレークポイント(extra small)、small、medium、large、extra large。
- グリッド・ブレークポイントは、その1つのブレークポイントとその上にあるすべてに適用されることを示している、最小幅のメディア・クエリに基づいています。(例えば、.col-sm-4は、最初のxsブレークポイントでなく、small、medium、large、そして、extra largeのデバイスに適用されます)。
- あなたは、より意味論的なマークアップのために、あらかじめ設定された(.col-4のような)グリッド・クラスやSass mixinsを使用できます。
フレックスボックスまわりの限界やバグに注意してください。フレックスコンテナとして、いくつかのHTML要素を使用できないのと同様です。
Gridオプション
Bootstrapは、ほとんどのサイズを定義するためにemsやremsを使用していますが、pxsが、グリッド・ブレークポイントとコンテナ幅のための使用されています。これは、ビューポートの幅がピクセル単位であり、フォント・サイズによって変化しないためです。
「便利な表を持つ複数のデバイスの中のBootstrapグリッド・システムの側面の動作」を参照してください。
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
||
---|---|---|---|---|---|---|
Max container width | None (auto) | 540px | 720px | 960px | 1140px | |
Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | |
# of columns | 12 | |||||
Gutter width | 30px (15px on each side of a column) | |||||
Nestable | Yes | |||||
Column ordering | Yes |
自動レイアウトの列
.col-sm-6のような明確な番号をつけられたクラスを使用せず、簡単な列サイズ設定のためのブレークポイント固有の列クラスを利用します。
同じ幅
例えば、ここに、xsからxlまで、すべてのデバイスに適用する2つのグリッド・レイアウトとビューポートがあります。あなたが必要とする各々のブレークポイントのために、多くの単位のないクラスを追加します。そして、すべての列は、同じ幅になります。
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
同じ幅列は、複数の行に分割することができますが、Safariのフレックスボックスには、明示的なフレックスベースやボーダーなしでは、動作を妨げるバグがありました。以前のバージョンのブラウザでは回避策がありますが、あなたが、最新のもの場合、それらは、必要ないはずです。
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
1つの列幅を設定する
また、フレックスボックス・グリッドの列の自動レイアウトは、あなたは、1つの列の幅を設定でき、そして、それのまわりで自動的に寸法変更する兄弟の列を持っていることを示しています。あなたは、(以下に示す)あらかじめ設定されたグリッド・クラス、グリッドmixinsやインライン幅を使用できます。他の列が、中央の列の幅に関係なく、寸法変更されることに注意して下さい。
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
可変的な幅の内容
それらの内容の自然な幅を基づいて、列の大きさを変更するために、col-{breakpoint}-autoクラスを使用します。 ※幅を小さくすると縦に並びます。このページでは、画像なので変化しません。原文ページを参照して下さい。
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
同じ幅の複数の行
Equal-width multi-row
同じ幅の複数の行
あなたが、列を改行する場所に、.w-100を挿入することで、複数の行にまたがる同じ幅の列を作成します。いくつかのレスポンシブ・ディスプレイ・ユーティリティで、.w-100を混合することで、レスポンシブに分割します。
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
レスポンシブ・クラス
Responsive classes
Bootstrapのグリッドは、複雑なレスポンシブ・レイアウトを構築するために、あらかじめ設定されたクラスの5つの層が含まれています。extra small、small、medium、largeやextra largeのデバイス上で、収まって見えるように、あなたの列の大きさをカスタマイズします。
すべてのブレークポイント
All breakpoints
最も小型なデバイスから、最も大型のものまで、同じグリッドのために、.colと.col-*クラスを使用します。あなたが、特定のサイズの列が必要な場合、番号付きのクラスを指定します。;それ以外の場合、.colに固執してください。
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
水平に積み重ねる
.col-sm-*クラスの一つの設定を使用して、あなたは、デスクトップ(中型)デバイス上で水平になる前に、格外の小型デバイスの上に積み重ね始める、基本的なグリッド・システムを作成することができます。
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
ミックスとマッチ
単純に、あなたの列を、いくつかのグリッド層に積み重ねたくありませんか?必要に応じて、それぞれの層に異なるクラスの組み合わせを使用します。どのように、すべてが動作するかのより良い考え方については、下の例を参照してください。
<!-- Stack the columns on mobile by making one full-width and the other half-width →
<!-- 作成した全ての幅で、そして、他は、半分の幅で、モバイル上の列を積み重ねます。 -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop →
<!-- 列はモバイルでは50%、デスクトップでは最大33.3%の幅で開始します。 -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop →
<!-- 列は、常に、モバイルとデスクトップで、幅50%です。 -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
位置合せ
Alignment
列を垂直、そして、水平に整列させるために、フレックスボックス位置合せユーティリティを使用します。
垂直な位置合わせ
Vertical alignment
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
水平な位置合せ
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
ガターでない
私たちのあらかじめ設定されたグリッド・クラスの列の間のガターは、.no-guttersで削除することができます。これは、.rowと水平パディングから、すべての直接の子供たちの列とから、負のマージンを削除します。
これらのスタイルを作成するためのソースコードは、次のとおりです。列の上書きが、最初の子供たちの列だけに、スコープされている、そして、属性セレクタによって対象になっていることに注意して下さい。これは、より具体的なセレクタが生成されますが、列パディングは、また、スペース・ユーティリティで、更にカスタマイズすることができます。
端から端までの設計が必要ですか?親の.containerや.container-fluidを削除します。
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
実際には、ここに、それが見える方法があります。あなたが、全てのあらかじめ設定されたグリッド・クラスで、継続して使用できることに注意して下さい。(列の幅、レスポンシブ層、並べ替えなどが含まれる)
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
列の折り返し
12以上の列が、1つの列の中に配置される場合、余分な列の各々のグループは、1つの単位として、新しい行に折り返されます。
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
列を分割する
Column breaks
フレックスボックスの新しい行を分割するには、小さなハックを必要とします。:幅のある要素を追加する:列を新しい行に折り返したい場合は、どこでも100%。通常、これは、複数の.rowで達成されますが、すべての実装メソッドが、これを説明するわけではありません。
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line →
<!-- 次の列を強制的に改行する -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
また、あなたは、私たちのレスポンシブ表示ユーティリティで、この特定のブレークポイントを適用する場合があります。
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up →
<!-- mdブレークポイント以上で、新しい行に分割するために、次の列を強制します。 -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
再び並べ直す
Reordering
順序クラス
あなたの内容の外観の順序を制御することのために、.order- クラスを使用します。これらのクラスはレスポンシブです。それで、あなたはブレークポイントで(例えば、.order-1.order-md- 2)、順序を設定することができます。5つのグリッド層全体で、1~12のサポートが含まれています。
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
また、順序を適用することで、1つの要素の順序を素早く変更する、レスポンシブ.order-firstクラスがあります。:-1. また、このクラスは、必要に応じて、番号付きの.order-*クラスと混在させることができます。
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
列をオフセットする
あなたは、2つの方法で、グリッドの列をオフセットすることができます。:私たちのレスポンシブ.offset- gridクラスと私たちのマージン・ユーティリティ。マージンは、オフセットの幅が変化する、素早いレイアウトのために、より使いやすいですが、Gridクラスは、列と一致するために、サイズ設定をされています。
オフセット・クラス
.offset-md-*クラスを使用して、列を右側に移動します。これらのクラスは、*列で、列の左の余白を増加させます。例えば、.offset-md-4は、4つの列を横切って、.col-md-4に移動ます。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
レスポンシブ・ブレークポイントでクリアしている列に加えて、あなたは、オフセットを再設定する必要があるかもしれません。 グリッドの例で、この動作を参照してください。
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
マージン・ユーティリティ
v4のフレックスボックスへの移動で、あなたは、他から離れさせる兄弟の列を強制するために、.mr-autoのような、マージン・ユーティリティを使用することができます。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
ネスト
デフォルトのグリッドで、コンテンツをネストするために、新しい.rowを追加します。そして、既存の.col-sm-*列の範囲内で.col-sm-*列の設定します。入れ子になった行は、12以下まで追加する、一連の列が含まれている必要があります。(あなたが、すべての12の利用できる列を使用する必要はありません)。
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
Sass mixins
BootstrapのソースのSassファイルを使用するとき、あなたは、カスタム、セマンティックとレスポンシブにページレイアウトを作成するために、Sass変数とmixinsを使用するオプションを持っています。私たちのあらかじめ設定されたグリッド・クラスは、提供するこれらの同じ変数とmixinsを使用しました。迅速なレスポンスのための、すぐに使えるクラスが用意されています。
変数
変数とマップは、フロー・コンテンツを始めるために、列の数、ガターの幅とメディア・クエリ・ポイントを決定します。私たちは、以下の一覧にされるカスタムmixinsと同様に、これらを、上で定義された、あらかじめ設定されたグリッド・クラスを作成するために使用しました。
Mixins
Mixinsは、それぞれのグリッド列のためのセマンティックなCSSを作成するために、グリッド変数と一緒に使用します。
// Creates a wrapper for a series of columns
// 一連の列のためのラッバーを作成します
@include make-row();
// Make the element grid-ready (applying everything but the width)
// (幅以外のすべてを適用する)準備のできたグリッド要素を作成します
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
// オフセットすることで意匠を凝らす、あるいは、並べ替え順序を変更する
@include make-col-offset($size, $columns: $grid-columns);
使いかたの例
あなたは、あなたの自身のカスタム値の変数を変更することができます。あるいは、mixinsをデフォルト値で使用してください。ここに、間にギャップを持つ2列のレイアウトを作成するために、デフォルト設定を使用する例があります。
.example-container {
width: 800px;
@include make-container();
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
グリッドをカスタマイズする
Customizing the grid
私たちの組み込みグリッドのSass変数とマップを使用して、定義済みのグリッド・クラスを完全にカスタマイズすることができます。 メディア・クエリの寸法とコンテナの幅の層の数を変更します。-その次に、再コンパイルします。
列とガター
グリッドの列の数は、Sass変数で変更できます。grid-columnsは、それぞれ個別の列の幅を(パーセントで)作成するために、使用されます。$grid-gutter-widthは、ブレークポイント固有の幅を可能にします。それは、列ガターのために、パディングの左とパディングの右に均等に分割されています。
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Grid層
列自身を越えて移動すると、また、あなたは、グリッドの層の数をカスタマイズするかもしれません。あなたが、ちょうど4つのグリッド層を望む場合、あなたは、これのような何かに、$grid-breakpointと$container-max-widthを更新するでしょう。:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Sass変数やマップを変更するとき、あなたは、変更と再コンパイルを保存する必要があります。そうすることで、列の幅、オフセットと並べ替えのための、あらかじめ設定されたグリッド・クラスの新しい設定を出力します。また、レスポンシブ表示ユーティリティは、カスタム・ブレークポイントを使用するために、更新されます。px(rem、emや%ではなく)で、グリッド値を設定することを確認して下さい。