レイアウト

Bootstrapを使用してページを構築するためのオプションです。グローバルスタイル、必要なscaffolding、グリッドシステムなど。

概要

Bootstrap は、コンテナ、強力なグリッドシステム、フレキシブルなメディアオブジェクト、およびレスポンシブのユーティリティクラスを含め、プロジェクトをレイアウトするためのいくつかのコンポーネントとオプションが含まれています。

コンテナ

コンテナは Bootstrap で最もベーシックな要素で、グリッドシステムを使う時に必要です。レスポンシブで固定幅のコンテナ (各ブレークポイントで max-width が変わることを意味します)、または流動的な幅 (常に幅が 100% であることを意味します) から選択してください。

コンテナは入れ子にすることもできますが、ほとんどのレイアウトでは、ネストされたコンテナを必要としません。

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

ビューポートの幅全体に及ぶ、全幅コンテナには .container-fluid を使用してください。

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

レスポンシブ ブレークポイント

Bootstrap はモバイルファーストに開発されており、レイアウトやインターフェースのための賢明なブレークポイントを作成するために、いくつかのメディアクエリを使用しています。これらのブレークポイントは、ビューポートの幅に基づいており、ビューポートの幅の変更によって要素をスケールアップさせることが可能です。

Bootstrap は、レイアウト、グリッドシステム、およびコンポーネントのために、Sass ソースファイルにおいて、主に以下のメディアクエリの範囲(またはブレークポイント)を使います。

// 極小サイズのデバイス (スマートフォン縦向き, 34em 未満)
// Bootstrap のデフォルトのため、メディアクエリなし

// 小サイズのデバイス (スマートフォン横向き, 34em 以上)
@media (min-width: 34em) { ... }

// 中サイズのデバイス (タブレット, 48em 以上)
@media (min-width: 48em) { ... }

// 大サイズのデバイス (デスクトップ, 62em 以上)
@media (min-width: 62em) { ... }

// 特大サイズのデバイス (大きなデスクトップ, 75em 以上)
@media (min-width: 75em) { ... }

Sass にソース CSS を記述しているので、すべてのメディアクエリは、Sass のミックスインを介して利用可能です:

@include media-breakpoint-up(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(sm) {
 .some-class {
   display: block;
 }
}

時折、反対の方法(所定の画面サイズ未満か)をとるメディアクエリを使用します:

// 極小サイズのデバイス (スマートフォン縦向き, 34em 未満)
@media (max-width: 33.9em) { ... }

// 小サイズのデバイス (スマートフォン横向き, 48em 未満)
@media (max-width: 47.9em) { ... }

// 中サイズのデバイス (タブレット, 62em 未満)
@media (max-width: 61.9em) { ... }

// 大サイズのデバイス (デスクトップ, 75em 未満)
@media (max-width: 74.9em) { ... }

// 特大サイズのデバイス (大きなデスクトップ)
// 特大のブレークポイントは幅の上限がないため、メディアクエリなし

繰り返しますが、これらのメディアクエリは、Sass のミックスインを介して利用できます:

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