アラート - Bootstrap4移行ガイド
.alert- 接頭辞で始まるクラス- 必ず
.alert ベースクラスと合わせて使う
.alert クラス単独や、.alert-primary クラス単独ではコンポーネントは成立しない- 短いメッセージと、オプションの閉じるボタンからなるコンポーネント
- 色違いの種類が8つある
.alert-primary.alert-secondary.alert-success.alert-info.alert-warning.alert-danger.alert-light.alert-dark
- 色だけで情報を提供すると視覚的な情報を受信できなユーザーは困るので、
.sr-only クラスで隠れたテキストを追加すること
- 実際このコンポーネントを使うときは、
.alert.alert-primary のように、.alert ベースクラスと合わせて使う
.alert-link はBEMの概念ではエレメントにあたる。アラートコンポーネント内のリンクテキストの色を変えたいときに使う- アラートコンポーネントには見出し、段落、水平線などの追加コンテンツ用（エレメント）のスタイルも用意されている
- 閉じるボタンを使うには閉じるアイコンボタンのクラスと
.alert-dismissible クラスを使う。アニメーションさせたければ .fade と .show クラスをつける
- JavaScriptを使って閉じるボタンを動作させるには、要素に
data-dismiss="alert" 属性をつける
バッジ - Bootstrap4移行ガイド
.badge- 接頭辞で始まるクラス- 必ず
.badge ベースクラスと合わせて使う
- 短いテキストを角丸四角形で囲んだコンポーネント
- バッジの文字サイズは
em で指定されており、直接の親要素との相対的なサイズになる
- 色違いの種類が8つある
.badge-primary.badge-secondary.badge-success.badge-info.badge-warning.badge-danger.badge-light.badge-dark
- バッジの文字に数字を入れる場合、それは視覚的にしか伝わらないかもしれない。たとえば、「プロフィール (9)」というのは最後の数字が未読をあらわしてるのが視覚的にはわかるが、目で見ないとわからない。こういった場合は「未読メッセージ」ということがわかるように、
.sr-only クラスで隠れたテキストを追加すること
.badge-pill クラスを使うと、角丸四角形の枠をより丸めることができる- バッジコンポーネントを
a 要素に指定すると、マウスオーバーやフォーカスを当てたときの状態の変化が見た目に反映される
パンくずリスト - Bootstrap4移行ガイド
.breadcrumb- 接頭辞で始まるクラス- 角丸の囲いとスラッシュで区切られた階層リストを持つコンポーネント
- スラッシュの区切りは
::before 要素で指定
.breadcrumb-item はBEMの概念ではエレメントにあたる。リストの子要素に当てるクラスで、スラッシュの区切りをつける.breadcrumb-item.active でアクティブ状態を指定する- このコンポーネントは
nav 要素に包まれて使われることを想定している。nav 要素には aria-label 属性（代替テキスト）を入れる
.breadcrumb-item.active のアクティブ状態は、aria-current="page" 属性（現在のページを表す）を入れる
ボタン - Bootstrap4移行ガイド
.btn- 接頭辞で始まるクラス- 必ず
.btn ベースクラスと合わせて使う
- マウスオーバーやフォーカスと言った状態変化のスタイルを持つ、角丸四角形の枠でテキストが囲まれたコンポーネント
- 色違いの種類が8つある
.btn-primary.btn-secondary.btn-success.btn-info.btn-warning.btn-danger.btn-light.btn-dark
- 形状の変化
.btn-{themecolor}.rounded-0 で四隅の角丸をとったボタンに.btn-{themecolor}.badge-pill で四隅の角丸をもっと丸めたボタンに.btn-{themecolor}.rounded-circle.p-0 でアイコンなど、一文字用の正円のボタンに
- ボタンコンポーネントは
button、a、input 要素で使用することができる
- ページ内の機能（たとえば折りたたみコンテンツの開閉）として使うボタンを
a 要素で指定する場合は、role="button" 属性をつける
- ボタンの背景の塗りを削除して、枠線だけのボタンにしたい場合は
.btn-outline- 接頭辞から始まるクラスを指定する
- ボタンのサイズは2種類用意されている
.btn-lg ... 大きめ- 指定なし ... 標準
.btn-sm ... 小さめ
- 親要素の全幅にまたがるボタンにするには
.btn-block を指定
- ボタンをユーザーの操作なしにアクティブな状態の見た目にするには
.active クラス（および aria-pressed="true" 属性）を指定
disabled 属性をボタン要素に追加することで、ボタンの見た目を非アクティブな状態にできる。これは .disabled クラス（および aria-disabled="true" 属性）を指定- Toggleボタンをつくるには、ボタン要素に
data-toggle="button" を指定
label 要素など他の要素を指定することで、チェックボックスやラジオボタンの見た目をボタンにすることもできる
ボタングループ - Bootstrap4移行ガイド
.btn-group はボタンを2つ以上まとめたコンポーネント.btn-group の見た目は、
- 左端ボタンの左の角の上下が丸く
- 右端ボタンの左の角の上下が丸く
- 間のボタンの角丸が取れた見た目になる
.btn-toolbar は .btn-group 1つと、.btn-group または .input-group を1つ以上まとめたコンポーネント- ボタンがグループ化されていることをスクリーンリーダーなどに知らせるために、
.btn-group には role="group" 属性をつける
- 同様に、ツールバーであることをスクリーンリーダーなどに知らせるために、
.btn-toolbar には role="toolbar" 属性をつける
.btn-toolbar には .input-group を含めることができる。
.input-group には、.input-group-prepend や .input-group-text といったエレメント（BEM）がある
- ボタングループコンポーネントでは、内包されるボタンをまとめてサイズ変更できる
.btn-group-lg ... 大きく- 指定なし ... 標準
.btn-group-sm ... 小さく
- ドロップダウンを一連のボタンと組み合わせたいときは、
.btn-group の中に .btn-group をいれる
.btn-group の中にいれられた .btn-group は、ドロップダウンのスイッチとして .dropdown-toggle 、スイッチを押したときのメニューとして .dropdown-menu を持つ.btn-group-verticl を指定すると縦に積み重なったボタングループがつくれる- 均等な幅が割り当てられたボタンを親要素の全幅にまたがって表示するには
.d-flex ユーティリティクラスと .w-100 ユーティリティクラスを組み合わせて使う
