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

レイアウトユーティリティ(Utilities for layout)

モバイルフレンドリーでレスポンシブな開発を迅速に行うために、Bootstrapにはコンテンツの表示、非表示、整列、余白の設定ための数十種類のユーティリティクラスが組み込まれている。

display を変更(Changing display

display プロパティの一般的な値をレスポンシブで切り替えるには、表示ユーティリティを使用。グリッドシステム、コンテンツ、コンポーネントと組み合わせて、特定のビューポートで表示か非表示にする。

 

Flexboxのオプション(Flexbox options)

BootstrapはFlexboxで構築されているが、不必要な再定義を多く追加し、予期せずキーブラウザの動作が変更されるため、すべての要素の displaydisplay: flex に変更されているわけではない。Bootstrapのコンポーネントのほとんどは、Flexbox対応で構築されている。

display: flex を要素に追加する必要がある場合は、.d-flex かレスポンシブ・バリエーションのいずれか(.d-sm-flex など)を使用。このクラスや display の値は、サイズ、配置、余白などのために特別なFlexユーティリティを使用できるようにするために必要である。

 

マージンとパディング(Margin and padding)v5.0.0-beta1クラス名変更

マージンとパディングの空白ユーティリティを使用して、要素とコンポーネントの間隔とサイズを制御。Bootstrapには、1rem のデフォルトの $spacer 変数に基づいて、空白ユーティリティの6レベルのスケールが組み込まれている。すべてのビューポートの値(LTRの margin-right: 1rem の場合は .me-3 など)を選択するか、特定のビューポートをターゲットにするようにレスポンシブ・バリエーションを選択(md ブレークポイントから始まるLTRの margin-right: 1rem の場合は .me-md-3 など)。

【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
      • .ml(-{breakpoint})-*.ms(-{breakpoint})-*
      • .mr(-{breakpoint})-*.me(-{breakpoint})-*

 

可視性の切り替え(Toggle visibility

display を切り替える必要がない場合は、可視性ユーティリティで要素の可視性を切り替えられる。目に見えない要素はまだページのレイアウトには影響あるが、視覚的には訪問者には表示されない。