レイアウトの概要

Containers

コンテナは、Bootstrapで最も基本的なレイアウト要素です。そして、私たちのデフォルトのグリッド・システムを使用するとき、必要です。レスポンシブな、fixed-widthコンテナ（そのmax-widthが、各々のブレークポイントで変更されることを示しています）あるいは、fluid-width（それがいつでも100%幅広いことを示します）から、選択します。

コンテナは、ネストすることができますが、ほとんどのレイアウトは、入れ子になったコンテナを必要としません。

<div class="container">
  <!-- Content here -->
</div>

完全な幅のコンテナ（ビューポートの全体の幅にまたがる）のために、.container-fluidを使用します。

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

Responsive breakpoints

Bootstrapは、モバイル向けに開発されているため、私たちは、私たちのレイアウトとインターフェイスのために、はっきりわかるブレークポイントを作成するために、いくつかのメディア・クエリを使用します。これらのブレークポイントは、大部分は、最小のビューポート幅に基づいており、私たちは、ビューポートの変更に合わせて要素を拡大できます。

Bootstrapは、主に、私たちのレイアウト、グリッド・システムとコンポーネントのための、私たちのソースSassファイルで、次のメディア・クエリ範囲やブレークポイントを使用します。

// Extra small devices (portrait phones, less than 576px)
// 格外の小型デバイス（縦型電話、576px未満）
// No media query since this is the default in Bootstrap
// これはBootstrapのデフォルトであるため、メディア・クエリはありません。

// Small devices (landscape phones, 576px and up)
// 小型デバイス（ランドスケープ・フォン、576px以上）
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
// 中型デバイス（タブレット、768px以上）
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
// 大型デバイス（デスクトップ、992px以上）
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
// 格外の大型デバイス（大型のデスクトップ、1200px以上）
@media (min-width: 1200px) { ... }

私たちが、Sassで、ソースCSSを記述しているため、私たちのすべてのメディア・クエリは、Sass mixinsを通して利用可能です。：

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

私たちは、ときどき、他の方向性（所定の画面サイズ以下）のメディア・クエリを使用しました。：

// Extra small devices (portrait phones, less than 576px)
// 格外の小型デバイス（縦型電話、576px未満）
@media (max-width: 575.99px) { ... }

// Small devices (landscape phones, less than 768px)
// 小型デバイス（ランドスケープ電話、768px未満）
@media (max-width: 767.99px) { ... }

// Medium devices (tablets, less than 992px)
// 中型デバイス（タブレット（992px未満の））
@media (max-width: 991.99px) { ... }

// Large devices (desktops, less than 1200px)
// 大型のデバイス（デスクトップ、1200px未満））
@media (max-width: 1199.99px) { ... }

// Extra large devices (large desktops)
// 格外の大型のデバイス（大型のデスクトップ）
// No media query since the extra-large breakpoint has no upper bound on its width
// 特大のブレークポイントに幅の上限がないため、メディアクエリがありません。

ブラウザが、現在、範囲コンテキスト・クエリをサポートしていないことに、注意して下さい。私たちは、これらの比較の精度が高い値を使用して、小数の幅でmin-とmax-接頭辞とビューポートの制限を回避します。（例えば、高dpiデバイス上の特定の条件下で発生する可能性があります）

ここであらためて、また、これらのメディア・クエリは、Sass mixinsを通して利用可能です。：

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

また、最小と最大のブレークポイント幅を使用して、画面サイズの1つのセグメントをターゲットにするためのメディアクエリとミックスインがあります。

// Extra small devices (portrait phones, less than 576px)
// 格外の小型デバイス（縦型電話、576px未満）
@media (max-width: 575.99px) { ... }

// Smalldevices (landscape phones, 576px and up)
// 小型デバイス（ランドスケープ・フォン、576px以上） 
@media (min-width: 576px) and (max-width: 767.99px) { ... }

// Medium devices (tablets, 768px and up)
// 中型デバイス（タブレット、768px以上）
@media (min-width: 768px) and (max-width: 991.99px) { ... }

// Large devices (desktops, 992px and up)
// 大型デバイス（デスクトップ、992px以上）
@media (min-width: 992px) and (max-width: 1199.99px) { ... }

// Extra large devices (large desktops, 1200px and up)
// 格外の大型デバイス（大型のデスクトップ、1200px以上）
@media (min-width: 1200px) { ... }

また、これらのメディア・クエリは、Sass mixinsを通して利用可能です。：

同様に、メディア・クエリは、複数のブレークポイント幅にまたがる可能性があります。：

// Example
// 例
// Apply styles starting from medium devices and up to extra large devices
// 中型のデバイスと上限の特大のデバイスから開始しているスタイルを適用します
@media (min-width: 768px) and (max-width: 1199.99px) { ... }

同じ画面サイズの範囲を対象とするSassミックスインは、次のようになります。：

@include media-breakpoint-between(md, xl) { ... }

Z-index

いくつかのBootstrapコンポーネントは、z-インデックスを利用します。CSSプロパティは、内容を配置するために、3本目の軸を提供することで、コントロールのレイアウトを支援します。私たちは、Bootstrapで、デフォルトのz-インデックスの大きさを利用します。これは、ナビゲーション、ツールチップやポップオーバー、モーダルなどを適切に積み重ねるように設計されています。

これらのより高い値は、理想的には競合を回避するのに十分なほど高い、任意数で開始します。私たちは、ツールチップ、ポップオーバー、ナビゲーション・バー、ドロップダウン、モーダルのような、階層化したコンポーネント全体で、これらの標準セットを必要とし、私たちは、動作で、無理なく調和することができます。私たちが、100+や500+を使用できない理由はありません。

私たちは、これらのそれぞれの値のカスタマイズを推奨しません。;あなたが、1つを変えると、あなたは、おそらく、それらのすべてを変更する必要があります。

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

コンポーネント内の重複した枠を処理するために、（例えば、入力グループのボタンと入力）、私たちは、デフォルト、ホバーとアクティブな状態のための1、2と3の低い１けたの数字のz-インデックス値を使用します。ホバー/フォーカス/アクティブで、私たちは、同類の要素について、それらの境界線を示すために、より高いz-インデックス値と一緒に、最前面の特定の要素を導入します。