概要(Overview)

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

Containers

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

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

viewport 全体に広がる全幅で利用するには, .container-fluid を使います。

<div class="container-fluid">
  ...
</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

Note that since browsers do not currently support range context queries, we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

これらのメディアクエリは, 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) { ... }

The Sass mixin for targeting the same screen size range would be:

@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 値を持つ特定の要素が最前になります。