- Bootstrap4のレイアウトに含まれるもの
- 包括コンテナー
- グリッドシステム
- メディア・オブジェクト
- ユーティリティクラス
- グリッドシステムにも使われる包括コンテナーは、
.containerクラスで指定する - 包括コンテナーには、レスポンシブな固定幅（ブレークポイントで幅が変わる）、全幅（常に
100%幅）の2種類がある - 全幅のコンテナーは
.container-fluidクラスで指定する - コンテナーの入れ子は可能だが、ほとんど必要ない
- Bootstrapではメディアクエリーを使用して、ウィンドウの**幅に対して5段階のブレークポイントを決めている
- 特定の範囲だけに指定できる
z-indexはナビゲーション、ツールチップ、ポップオーバー、モーダルなどに使われる。Bootstrapでは段階が決まっていて、7段階。この値のカスタマイズは推奨されない-
$zindex-dropdown -
$zindex-sticky -
$zindex-fixed -
$zindex-modal-backdrop -
$zindex-modal -
$zindex-popover -
$zindex-tooltip
-
- Flexboxで構築されたグリッド
- 行（row）が列（column）を囲む
- グリッドのブレークポイントとコンテナ幅には
px単位を使用している。これはビューポート幅がピクセル単位であり、フォントサイズによって変化しないから .col-*に列幅の番号を振らない場合、列の幅は行を列の数で割った等幅になる- 等幅の列には、行に対するパーセンテージで設定
- 列の両脇には
paddingを使った余白が割り当てられている。これを消すには.rowクラスに.no-guttersクラスを適用する - グリッドは入れ子にできる
- （行幅に満たない列に対して）途中で改行を加えたい場合は、改行したい箇所に
<div class="w-100"></div>を挿入する - Flexboxの機能を使って列の縦方向、横方向の配置を決められる
.order-*クラスを使用して列の視覚的順序を並び替えできる.offset-*クラスを使用して列の左右に余白を適用できる- 小デバイス（sm）では2列にして大デバイス（lg）では4列にするなど、ブレークポイントで列の数を変更するには
.col-sm-*や.col-lg-*クラスを使う - よりセマンティックなHTMLを書きたければ、グリッドをSassのMixinとして利用することも可能
- グリッドも他と同じようにカスタマイズ可能だが、グリッド値は
px（rem,em,%ではなく）で設定すること。
- メディアオブジェクトとは、片方に画像、もう片方にテキストを置くようなオブジェクト
- メディアオブジェクトを使うには
.mediaクラスを適用する - テキストは
.mediaに内包された.media-bodyの中に入れる marginやpaddingなどの余白は、空白ユーティリティクラスを使って空ける- メディアオブジェクトは入れ子にできる
- Flexboxの機能を使って列の縦方向、横方向の配置を決められる
- 左右の画像とテキストは、
.order-*クラスを使用して視覚的順序を並び替えできる
レイアウトユーティリティ - Bootstrap4移行ガイド
- 要素の表示・非表示などしたければ、要素の
displayプロパティの値を変える必要があり、これは表示ユーティリティクラスを使えばできる - Flexユーティリティクラスを使いたければ、要素に
display: flexをもたせるために.d-flexを使う marginとpaddingで余白を空けるには空白ユーティリティクラスを使うdisplay: noneで非表示までしなくて良い場合は、代わりに可視性ユーティリティクラスを使って要素の可視性を切り替えることが可能
読むの大変。
