メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

概要(Overview)

Bootstrapには、包括コンテナ、強力なグリッドシステム、柔軟なメディア・オブジェクト、レスポンシブ・ユーティリティクラスなど、プロジェクトをレイアウトするためのいくつかのコンポーネントとオプションが組み込まれている。

コンテナ(Containers)

コンテナは、Bootstrapの中で最も基本的なレイアウト要素であり、デフォルトのグリッドシステムを使用する場合に必要。レスポンシブな固定幅のコンテナ(各ブレークポイントで max-width が変わる表示)か、全幅のコンテナ(常に 100% 幅で表示)から選択する。

コンテナは入れ子(ある要素を別の要素の中に入れること)にすることが可能だが、ほとんどのレイアウトでは、入れ子にされたコンテナは必要としない。

1. 固定幅のコンテナ

見本
ヘッダの表示
サイドバーの表示
メインの表示
設定例
コピー<div class="container">
	<!-- ココにコンテンツを入れる -->
</div>

【設定】

  • div.containerでコンテンツを囲む(各ブレークポイントの最大幅はグリッド・オプションのコンテナの最大幅の欄に記載)

2. 全幅のコンテナ

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

見本
ヘッダの表示
サイドバーの表示
メインの表示
設定例
コピー<div class="container-fluid">
	<!-- ココにコンテンツを入れる -->
</div>

【設定】

  • div.container-fluidでコンテンツを囲む

 

レスポンシブ・ブレークポイント(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 4.0.0新設

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

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