ブレークポイント（Breakpoints） v5.0.0階層追加 v5.0.0概要より分離

基本のコンセプト（Core concepts）

• ブレークポイントは、レスポンシブデザインの構成要素である。それらを使用して、特定のビューポートやデバイスサイズでレイアウトをいつ調整できるかを制御。
• メディアクエリを使用して、ブレークポイントでCSSを構築。メディアクエリはCSSの機能であり、ブラウザとOSのパラメータのセットに基づいてスタイルを条件付きで適用。メディアクエリでは、通常 min-width を使用。
• モバイル・ファーストのレスポンシブなデザインにするのが目標。BootstrapのCSSは、最小限のスタイルを適用してレイアウトを極小のブレークポイントで機能させることを目的としている。次にスタイルを重ねて、より大きなデバイス向けにそのデザインを調整。これによりCSSが最適化され、レンダリング時間が改善され、訪問者に素晴らしい体験が提供される。

利用可能なブレークポイント（Available Breakpoints）v5.0.0-alpha1一部追加

Bootstrapには、レスポンシブに構築するための6つのデフォルトのブレークポイント（グリッド層とも呼ばれる）が組み込まれている。これらのブレークポイントは、ソースのSassファイルを使用している場合はカスタマイズできる。

各ブレークポイントは、幅が12の倍数であるコンテナを快適に保持するために選択されている。ブレークポイントは、一般的なデバイスサイズとビューポートの寸法のサブセットも表している。これらは、すべてのユースケースやデバイスをターゲットにしているわけではない。代わりに、範囲は、ほぼすべてのデバイスに構築するための強力で一貫した基盤を提供。

これらのブレークポイントはSassを経由してカスタマイズできる。これらのブレークポイントは _variables.scss スタイルシートのSassマップにある。

デフォルトの設定

scss/_variables.scss 内 grid-breakpoints の設定$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Sassマップと変数を変更する方法の詳細と例については、グリッドのCSSの項目に記載。

メディアクエリ（Media queries）v5.0.0-alpha1一部設定変更

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

最小幅（Min-width）

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

設定例

custom.scss// ミックスインのソース
// `@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) { ... }
@include media-breakpoint-up(xxl) { ... }

// 使用方法

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

これらのSassミックスインは、Sass変数で宣言された値を使用して、コンパイルされたCSSで変換される。例えば：

コンパイル後のCSS

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

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

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

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

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

/* 超特大デバイス (よりワイドな・デスクトップ, 1400px 以上） */
@media (min-width: 1400px) { ... }

最大幅（Max-width）

逆の方向（指定された画面サイズ以下）のメディアクエリを使用する場合：

設定例

custom.scss// xsブレークポイントは実質的に `@media（max-width：0）{...}`なのでメディアクエリは不要
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

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

これらのミックスインは、宣言されたブレークポイントを取得し、.02pxを差し引いて、最大幅の値として使用。例えば：

コンパイル後のCSS

custom.css/* `xs` はルールセットのみを返し、メディアクエリは返さない */
/* ... { ... } */

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

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

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

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

/* `xxl` は特大デバイス（ワイド・デスクトップ, 1400px 未満）に適用 */
@media (max-width: 1399.98px) { ... }

単一のブレークポイント（Single breakpoint）

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

設定例

custom.scss@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) { ... }
@include media-breakpoint-only(xxl) { ... }

例えば、@include media-breakpoint-only(md) { ... }は次のようになる。

コンパイル後のCSS

custom.css@media (min-width: 768px) and (max-width: 991.98px) { ... }

ブレークポイント間（Between breakpoints）

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

設定例

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

その結果：

コンパイル後のCSS

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