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

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

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

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

display を変更(Changing display

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

 

Flexboxのオプション(Flexbox options)

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

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

 

マージンとパディング(Margin and padding)

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

 

可視性の切り替え(Toggle visibility

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