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"属性をつける
.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要素に指定すると、マウスオーバーやフォーカスを当てたときの状態の変化が見た目に反映される
.breadcrumb-接頭辞で始まるクラス- 角丸の囲いとスラッシュで区切られた階層リストを持つコンポーネント
- スラッシュの区切りは
::before要素で指定 .breadcrumb-itemはBEMの概念ではエレメントにあたる。リストの子要素に当てるクラスで、スラッシュの区切りをつける.breadcrumb-item.activeでアクティブ状態を指定する- このコンポーネントは
nav要素に包まれて使われることを想定している。nav要素にはaria-label属性（代替テキスト）を入れる .breadcrumb-item.activeのアクティブ状態は、aria-current="page"属性（現在のページを表す）を入れる
.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要素など他の要素を指定することで、チェックボックスやラジオボタンの見た目をボタンにすることもできる
.btn-groupはボタンを2つ以上まとめたコンポーネント.btn-groupの見た目は、- 左端ボタンの左の角の上下が丸く
- 右端ボタンの左の角の上下が丸く
- 間のボタンの角丸が取れた見た目になる
.btn-toolbarは.btn-group1つと、.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ユーティリティクラスを組み合わせて使う
