境界ユーティリティ - Bootstrap4移行ガイド
- ボーダーと角丸用のユーティリティ
.border クラスでボーダーを適用する- 単方向の指定は
.border-right などで、複数方向の指定は .border-right.border-bottom クラスなどでおこなう
.border-0 クラスでボーダーを消す.border-primary クラスなどでボーダーの色を変える.rounded クラスで角丸を適用する- 単方向、複数方向の指定はボーダーと同じ
.rounded-circle クラスで対象を円にできる
クリアフィックス - Bootstrap4移行ガイド
.clearfix は float を解除するためのクラス- Mixinとしても利用可能
閉じるアイコンボタン - Bootstrap4移行ガイド
- アラートやモーダルで使うボタン
aria-label には必ずスクリーンリーダー用のテキストを入れること
カラーユーティリティ - Bootstrap4移行ガイド
- テキスト色と背景色用のユーティリティ
- テキスト色は
color: #dc3545 !important のように指定されているため、子孫要素にあたるリンクにもスタイルが適用される
- テキスト色10種
.text-primary.text-secondary.text-success.text-info.text-warning.text-danger.text-light.text-dark.text-muted.text-white
- 背景色11種
- テキスト色と同じ10種の色 +
.bg-transparent （透過）
- 接頭辞は
.text- の代わりに .bg-
- テキスト色は設定されていないので、背景色と合わせてテキスト色のクラスを適用する
$enable-gradients を true に設定すると、背景グラデーションが利用可能。デフォルトでは無効- 背景グラデーション
- 接頭辞は
.bg-gradient-
- 同系色が縦方向に濃くなるグラデーションのクラス
- たとえば、
.bg-gradient-primary だと薄い青から少し濃い青への視覚的変化
表示ユーティリティ - Bootstrap4移行ガイド
- ウィンドウサイズごとに最適な見た目にするため、
display プロパティの値を切り替えることができる
- 表示ユーティリティは
.d- 接頭辞から始まる
- 表示を切り替えるクラス
.d-none ... 非表示.d-inline ... インライン表示.d-inline-block ... インライン・ブロック表示.d-block ... ブロック表示.d-table ... テーブル表示.d-table-row ... テーブル行表示.d-table-cell ... テーブルセル表示.d-flex ... Flexboxコンテナー表示.d-inline-flex ... インラインFlexboxコンテナー表示
- 各クラスは
.d-sm-none クラスのようにブレークポイントキーワードを挟むことで、ウィンドウサイズごとに見た目を変更できる
- 印刷用に表示を切り替えるクラスは、
.d-print- が接頭辞で、切り替えるためのクラスと内容は .d-none など上記にあげたものと同じ
動画の埋め込み - Bootstrap4移行ガイド
- 動画を表示するサイズ（アスペクト比）の指定をおこなう
- ウィンドウサイズが変化しても動画のアスペクト比は変わらないようになっている
- これを実現するには
.embed-responsive クラスを iframe, embed, video, object 要素自身に適用する
- アスペクト比は4種類
- アスペクト比の固定は
padding-top を使った手法が用いられている
Flexユーティリティ - Bootstrap4移行ガイド
- Flexユーティリティクラスを使うためには、まず表示ユーティリティクラスの
.d-flex または .d-inline-flex クラスをコンテナーに指定する
- 各クラスはブレークポイント（
xs, sm, md, lg, xl）ごとの切り換えも可能
.flex-row または .flex-row-reverse クラスを指定すると、要素を左右どちらから並べるか指定可能.flex-column または .flex-column-reverse クラスを指定すると、要素を上下どちらから並べるか指定可能.justify-content- 接頭辞付きのクラスを指定することで水平方向の要素の整列ができる
.justify-content-start ... 左寄せ.justify-content-end ... 右寄せ.justify-content-center ... 中央寄せ.justify-content-between ... 両端から均等に配置.justify-content-around ... 等間隔に配置
.align-items- 接頭辞付きのクラスを指定することで垂直方向の要素の整列ができる。.justify-content- シリーズの縦版- 垂直方向の要素の配置を個別に指定するには
.align-self- クラスを指定する
.mr-auto または .ml-auto クラスを使えば、要素をひとつだけ左右どちらかに寄せることができる- ただ、IE10とIE11では、親要素がデフォルト以外の justify-content の値を持つFlexアイテムの自動マージンを正しくサポートしていない
.mb-auto または .mt-auto クラスを使えば、要素をひとつだけ上下どちらかに寄せることができる- Flexアイテムの折り返しは
.flex-nowrap （折り返しなし）、.flex-wrap （折り返しあり）、.flex-wrap-reverse （逆方向への折り返し）から選択可能
.order- 接頭辞で始まるクラスを使うと、要素の並び順を変更可能.align-content- 接頭辞から始まるクラスを使うと、複数行にまたがるFlexbox要素の整列ができる
横の配置ユーティリティ - Bootstrap4移行ガイド
- 横の配置ユーティリティクラスは、
float プロパティを使って要素を左右どちらかに寄せたり、無効にしたりする
- このユーティリティはSassのMixinとしても設定済み
- 各クラスはブレークポイント（
xs, sm, md, lg, xl）ごとの切り換えも可能
画像置換 - Bootstrap4移行ガイド
- テキストを非表示にして画像に置き換える
.text-hide クラスまたはMixinを使用して、背景画像を持つ要素のテキスト内容を非表示にする
位置ユーティリティ - Bootstrap4移行ガイド
.position- 接頭辞付きのクラスを指定することで、要素の位置を指定できる- 位置ユーティリティクラスではレスポンシブ対応をしてない
- 指定できるのは5種類
.position-static ... 通常の位置.position-relative ... 相対位置.position-absolute ... 絶対位置.position-fixed ... 固定位置.position-sticky ...Sticky位置
- ウィンドウの最上部に要素を固定させるには
.fixed-top を使う
- ウィンドウの最上部に要素を固定させるには
.fixed-bottom を使う
- ページをスクロールしたときに、要素が最上部に達したときに固定するには
.sticky-top クラスを使う
.sticky-top クラスは position: sticky を使っているが、IE10とIE11は position：sticky を position：relative としてレンダリングするので、この指定を @support クエリで囲み、適切にレンダリングできるブラウザのみに上部固定を制限している
スクリーンリーダー - Bootstrap4移行ガイド
.sr-only クラスで指定された要素は、スクリーンリーダーだけで表示される.sr-only.sr-only-focusable クラスで指定された要素は、キーボードを操作で要素を移動したときか、スクリーンリーダー環境のみで要素を表示させる
サイズユーティリティ - Bootstrap4移行ガイド
- サイズユーティリティを使うと要素の横幅や縦幅を指定できる
- 幅の指定には
.w- から始まる接頭辞をつきクラスを使う。4種類
.w-25 ... width: 25%.w-50 ... width: 50%.w-75 ... width: 75%.w-100 ... width: 100%
- 幅の指定には
.h- から始まる接頭辞をつきクラスを使う。4種類
.h-25 ... height: 25%.h-50 ... height: 50%.h-75 ... height: 75%.h-100 ... height: 100%
- 最大幅の指定もできる。横幅は
.mw-100 （max-width: 100）、縦幅は .mh-100 （max-height: 100）クラスで指定する
.mw-100 クラスは高さが自動調整（height: auto）されない点で、.img-fluid クラスとは異なる
空白ユーティリティ - Bootstrap4移行ガイド
- 空白（余白）ユーティリティは
margin と padding のクラスをまとめたもの
- 4つの組み合わせにより空白ユーティリティのクラスとその効果が決まる。書式としては「
{property}{sides}-{breakpoint}-{size}」になる。クラス名を短く保つために、それぞれ略語がある
- プロパティ（
margin と padding）
- 略語
m ... margin
- 略語
p ... padding
- 空白の方向（上下左右）
- 略語
t ... 上方向
- 略語
b ... 下方向
- 略語
l ... 左方向
- 略語
r ... 右方向
- 略語
x ... 左・右方向
- 略語
y ... 上・下方向
- なし ... 全方向
- ブレークポイント（
sm, md, lg, xl）
- サイズ（
.25rem から 3rem ）、
- 略語
0 ... 0
- 略語
1 ... $spacer * .25 （デフォルト .25rem）
- 略語
2 ... $spacer * .5 （デフォルト .5rem）
- 略語
3 ... $spacer （デフォルト 1rem）
- 略語
4 ... $spacer * 1.5 （デフォルト 1.5rem）
- 略語
5 ... $spacer * 3 （デフォルト 3rem）
auto ... margin: auto
- 固定幅のブロックレベルのコンテンツを水平方向に中央揃えするには、
.mx-auto クラスを使う
テキストユーティリティ - Bootstrap4移行ガイド
- テキストユーティリティクラスでは、文章の配置、テキストの折り返し、大文字・小文字の変換、文字の太さと斜体の変換を扱う
- インライン要素の装飾は「文字の体裁」を参照
- 文章の均等割付は
.text-justify クラスでおこなう
- 文章の左寄せは
.text-left、右寄せは .text-right、中央揃えは .text-center クラスでおこなう。.text-xl-left などのように、ブレークポイント別に配置を変更することも可能
.text-nowrap クラスでテキストが折り返さないようにできる.text-truncate クラスでテキストを省略記号（... のような）で切り捨てることができる。このクラスを適用するには要素が display: inline-block または display: block になってる必要がある- アルファベットをすべて小文字にするには
.text-lowercase、大文字にするには .text-uppercase、単語の最初の文字だけ大文字にするには .text-capitalize を使う
.font-weight-bold クラスで太字に、.font-weight-normal で通常の太さの文字に、.font-weight-light クラスで細字に、.font-italic で斜体の文字にできる
縦の配置ユーティリティ - Bootstrap4移行ガイド
- 行に対する垂直方向の配置を指定するクラス
inline, inline-block, inline-table, および表のセル要素にのみ適用できるユーティリティクラス.align- 接頭辞から始まるクラス
.align-baseline ... ベースラインに配置.align-top ... 上端揃え.align-middle ... 中央揃え.align-bottom ... 下端揃え.align-text-bottom ... テキストの上端揃え.align-text-top ... テキストの下端揃え
可視性ユーティリティ - Bootstrap4移行ガイド
- 可視性ユーティリティクラスは要素の可視性を制御する
.visible で要素を表示.invisible で要素を非表示、ただし表示エリアは残す
