nlog

とめどなく流れるよだれ

Bootstrap4移行ガイドを読む(レイアウト編)

概要 - Bootstrap4移行ガイド

  • Bootstrap4のレイアウトに含まれるもの
    • 包括コンテナー
    • グリッドシステム
    • メディア・オブジェクト
    • ユーティリティクラス
  • グリッドシステムにも使われる包括コンテナーは、.container クラスで指定する
  • 包括コンテナーには、レスポンシブな固定幅(ブレークポイントで幅が変わる)、全幅(常に 100% 幅)の2種類がある
  • 全幅のコンテナーは .container-fluid クラスで指定する
  • コンテナーの入れ子は可能だが、ほとんど必要ない
  • Bootstrapではメディアクエリーを使用して、ウィンドウの**幅に対して5段階のブレークポイントを決めている
    1. xs ... 基準。極小デバイス(縦向きモバイルを想定、576px 未満)
    2. sm ... 小デバイス(横向きモバイルを想定、576px 以上)
    3. md ... 中デバイスタブレットを想定、768px 以上)
    4. lg ... 大デバイス(デスクトップを想定、992px 以上)
    5. xl ... 特大デバイス(ワイド・デスクトップを想定、1200px 以上)
  • 特定の範囲だけに指定できる
  • z-index はナビゲーション、ツールチップ、ポップオーバー、モーダルなどに使われる。Bootstrapでは段階が決まっていて、7段階。この値のカスタマイズは推奨されない
    1. $zindex-dropdown
    2. $zindex-sticky
    3. $zindex-fixed
    4. $zindex-modal-backdrop
    5. $zindex-modal
    6. $zindex-popover
    7. $zindex-tooltip

グリッド - Bootstrap4移行ガイド

  • 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として利用することも可能
  • グリッドも他と同じようにカスタマイズ可能だが、グリッド値は pxrem, em, % ではなく)で設定すること。

メディアオブジェクト - Bootstrap4移行ガイド

  • メディアオブジェクトとは、片方に画像、もう片方にテキストを置くようなオブジェクト
  • メディアオブジェクトを使うには .media クラスを適用する
  • テキストは .media に内包された .media-body の中に入れる
  • marginpadding などの余白は、空白ユーティリティクラスを使って空ける
  • メディアオブジェクトは入れ子にできる
  • Flexboxの機能を使って列の縦方向、横方向の配置を決められる
  • 左右の画像とテキストは、.order-* クラスを使用して視覚的順序を並び替えできる

レイアウトユーティリティ - Bootstrap4移行ガイド

  • 要素の表示・非表示などしたければ、要素の display プロパティの値を変える必要があり、これは表示ユーティリティクラスを使えばできる
  • Flexユーティリティクラスを使いたければ、要素に display: flex をもたせるために .d-flex を使う
  • marginpadding で余白を空けるには空白ユーティリティクラスを使う
  • display: none で非表示までしなくて良い場合は、代わりに可視性ユーティリティクラスを使って要素の可視性を切り替えることが可能

読むの大変。