概要(Overview)

レイアウトのコンポーネントやオプションには, コンテナ, グリッドシステム, フレキシブルオブジェクト, レスポンシブクラスが組み込まれています。

Containers

コンテナは基本のレイアウトで, グリッドシステムを使用する場合に必要です。
・固定幅のコンテナ(ブレークポイントで max-width が変わる)
・全幅のコンテナ(常に100%の幅)
から選択できます。コンテナは入れ子にすることができますが, 多くのレイアウトは入れ子のコンテナは必要としません。

Bootstrapのコンテナは下記の3種類が用意されています。

.container は各ブレークポイントで max-width を設定します。
.container-fluid はすべてのブレークポイントで width:100% となります。
.container-{breakpoint} は指定されたブレークポイントまで width：100％ となります。

次の表は, .container, .container-fluid, .container-{breakpoint} が各ブレークポイントで max-width がどのような値になるかを比較しています。

実際の例は Grid example より確認できます。

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
`.container`	100%	540px	720px	960px	1140px
`.container-sm`	100%	540px	720px	960px	1140px
`.container-md`	100%	100%	720px	960px	1140px
`.container-lg`	100%	100%	100%	960px	1140px
`.container-xl`	100%	100%	100%	100%	1140px
`.container-fluid`	100%	100%	100%	100%	100%

All-in-one

.container は固定幅のコンテナです。各ブレークポイントで max-width が変更されます。

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

Fluid

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

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

Responsive

.container-{breakpoint} はBootstrap v4.4で新しく追加されました。指定されたブレークポイントに到達するまで100％幅のクラスを指定できます。上位の各ブレークポイントには max-width を適用されます。たとえば, .container-sm は sm ブレークポイントに到達するまで100％幅であり、md , lg , xl ではスケールアップします。

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Responsive breakpoints

Bootstrapはモバイルファーストで開発していて, レイアウトやインターフェースのブレークポイントは media queries を使用している。
これらのブレークポイント最小の viewport に基づいていて viewport の変更に合わせて要素を拡大します。

下記のブレークポイントをSassファイルに記述しています。

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

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

メディアクエリはSassのmixin経由で参照できます。

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

私たちは時によって, 他の方向に向かうメディアクエリを使用します。

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

現在のブラウザが range context queries をサポートしていないため, 小数点を含んだ min- , max- プレフィックスとビューポート（高い dpi を持ったデバイスなどでこのような状況が起こりえます）の制限を回避するため, これらの比較により高精度の値を用いています。

これらのメディアクエリは, Sassミックスインでも利用できます。

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

ブレークポイントの幅(最小,最大)を使用して画面サイズの1つのセグメントを対象とするメディアクエリやミックスインもあります。

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

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

メディアクエリは Sass mixins でも利用可能です。

@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) { ... }

メディアクエリは複数のブレークポイントの幅にまたがる場合があります。

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Sass のミックスインによって同じスクリーンサイズ範囲を対象とするには, 次のようにします。

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

Z-index

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

これらは, 任意の高めの値から始まっている。ツールチップ, ポップオーバー, ナビゲーションバー, ドロップダウン, モーダルなど階層化されたコンポーネント全体で, 動作の合理的な一貫性のためこれらの標準セットが必要です。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;

コンポーネント内の重なり合う境界線（例えば, インプットグループ内のボタンやコントロール）を処理するために, デフォルト/ホバー/アクティブ状態に対しては, z-index の値は 1,2,3 を使用。ホバー/フォーカス/アクティブでは, 要素との境界線を表示するのに, より高い z-index 値を持つ特定の要素が最前になります。

v4.4