概要（Overview）

コンテナ（Containers）

これらのSassループもカラーマップに限定されない。コンポーネントのレスポンシブバリエーションも生成可能。例えばドロップダウンのレスポンシブな配置を例にとった場合、$grid-breakpoints Sassマップの @each ループとメディアクエリの組み合わせが混在している。

Bootstrapには3つの異なるコンテナがある。

• .container は、各レスポンシブ・ブレークポイントで max-width（最大幅）を設定
• .container-fluid は、全てのブレークポイントで width: 100%
• .container-{breakpoint} は、指定されたブレークポイントまで width: 100%

次の表は、各レスポンシブ・コンテナの各ブレークポイントでの max-width について、従来の .container や .container-fluid と合わせて比較。

実際の動作は、グリッドの実例で確認すること。

固定幅のコンテナ（All-in-one）

デフォルトの .container クラスはレスポンシブな固定幅のコンテナとなる。つまり max-width は各ブレークポイントで変わる。

設定例

コピー<div class="container">
	<!-- ココにコンテンツを入れる -->
</div>

全幅のコンテナ（Fluid）

ビューポート幅全体に広がる全幅のコンテナには .container-fluid を使用。

設定例

コピー<div class="container-fluid">
	<!-- ココにコンテンツを入れる -->
</div>

レスポンシブ・コンテナ（Responsive）v4.4.0新設

レスポンシブ・コンテナはBootstrap v4.4で新しく追加された。指定したブレークポイントに到達するまで100%幅のクラスを指定可能。その後は上位の各ブレークポイントで max-width を適用。例えば、.container-sm は sm ブレークポイントに到達するまで100%幅で、md, lg, xl のブレークポイントではスケールアップされる。

設定例

コピー<div class="container-sm">小のブレークポイントまで幅100%</div>
<div class="container-md">中のブレークポイントまで幅100%</div>
<div class="container-lg">大のブレークポイントまで幅100%</div>
<div class="container-xl">特大のブレークポイントまで幅100%</div>

レスポンシブ・ブレークポイント（Responsive breakpoints）

Bootstrapは、モバイル・ファーストで開発しているので、レイアウトやインターフェースのためにわかりやすいブレークポイントを作成するために、いくつかのメディアクエリを使用している。これらのブレークポイントは、主に最小のビューポート（表示領域）幅に基づいており、ビューポートの変更などの要素を拡大することが可能。

Bootstrapは、主にレイアウト、グリッドシステム、コンポーネントのために、ソースSassファイルで以下のブレークポイント（メディアクエリの範囲）を使用。

// 極小デバイス（縦向きモバイル, 576px 未満）
// Bootstrapではデフォルトで `xs` のメディアクエリは存在しない

// 小デバイス（横向きモバイル, 576px 以上）
@media (min-width: 576px) { ... }

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

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

// 特大デバイス（ワイド・デスクトップ, 1200px 以上）
@media (min-width: 1200px) { ... }

SassにソースのCSSを記述しているので、すべてのメディアクエリはSassのmixin経由で入手可能：

// `@media（min-width：0）{...}`のように、xsブレークポイントに必要な有効なメディアクエリは存在しない
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// 例：min-width：0 で非表示、smブレークポイントで表示
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

時には、逆方向（指定の画面サイズ以下）に進むメディアクエリを使用：

// 極小デバイス（縦向きモバイル, 576px 未満）
@media (max-width: 575.98px) { ... }

// 小デバイス（横向きモバイル, 768px 未満）
@media (max-width: 767.98px) { ... }

// 中デバイス（タブレット, 992px 未満）
@media (max-width: 991.98px) { ... }

// 大デバイス（デスクトップ, 1200px 未満）
@media (max-width: 1199.98px) { ... }

// 特大デバイス（ワイド・デスクトップ）
// 特大のブレークポイントには上限がないので、メディアクエリはなし

繰り返しになるが、これらのメディアクエリはSass mixin経由でも入手可能：

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
//幅に上限がないため、xlブレークポイントに必要なメディアクエリは存在しない

//例：mdブレークポイントから下のスタイル
@include media-breakpoint-down(md) {
	.custom-class {
		display: block;
	}
}

最小限のブレークポイント幅と最大限のブレークポイント幅を使用して、画面サイズの1つのセグメントを対象とするメディアクエリとmixinもある。

// 極小デバイス（縦向きモバイル, 576px 未満）
@media (max-width: 575.98px) { ... }

// 小デバイス（横向きモバイル, 576px 以上）
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// 中デバイス（タブレット, 768px 以上）
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// 大デバイス（デスクトップ, 992px 以上）
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// 特大デバイス（ワイド・デスクトップ, 1200px 以上）
@media (min-width: 1200px) { ... }

これらのメディアクエリはSass mixin経由でも入手可能：

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

同様に、メディアクエリは複数のブレークポイント幅にまたがることがある：

// 例
// 中型デバイスから超大型デバイスまでのスタイルの適用
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

同じ画面サイズの範囲をターゲットにするためのSass mixinは、次のとおり：

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

Z-index v4.0.0新設

いくつかのBootstrapのコンポーネントでは、コンテンツを配置するための第3の軸を提供することによってレイアウトを制御するのに役立つCSSプロパティである z-index を利用している。ナビゲーション、ツールチップ、ポップオーバー、モーダルなどを適切にレイヤー化するように設計されたBootstrapのデフォルトのz-indexスケールを使用。

これらは、理想的に競合を回避するのに十分な任意の高めの値から始まっている。ツールチップ、ポップオーバー、ナビゲーションバー、ドロップダウン、モーダルなどレイヤー化されたコンポーネント全体で合理的に動作の一貫性を持たせるために、これらの標準セットが必要。100+ や 500+ を使用しなかった理由は特にない。

これらの値のカスタマイズは推奨しない。1つ変えたら、すべて変更する必要がある。

デフォルトでの設定 （scss/_variables.scss 内）

$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 の低い1桁の z-index 値を使用。ホバー/フォーカス/アクティブでは、兄弟要素との境界線を表示するのに、より高い z-index 値を持つ特定の要素が最前になる。