Bootstrap4移行ガイドを読む(レイアウト編)
- 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
で非表示までしなくて良い場合は、代わりに可視性ユーティリティクラスを使って要素の可視性を切り替えることが可能
読むの大変。