Bootstrap4移行ガイドを読む（コンポーネント編、プログレスバー）

「プログレスバー - Bootstrap4移行ガイド」を読んだ。

• 最大値に対して進行状況をあらわすコンポーネント
• HTML5 の progress 要素は使わずに表示できるコンポーネント
• .progress で包括要素（最大値を示す要素）を表示
• .progress-bar で進行状況をあらわす要素を表示
• .progress-bar を指定する要素には role 属性と aria 属性も必要
  • role="progressbar" 属性 ... プログレスバーの役割を知らせる
  • aria-valuenow="*" ... 現在値
  • aria-valuemin="*" ... 最小値
  • aria-valuemax="*" ... 最大値
• .progress-bar の幅を変更するには、インラインスタイル、またはユーティリティクラス、またはカスタム CSS を書く
• .progress-bar 内にテキストを表示するには、単純にこの要素の中にテキストを書く
• プログレスバーの高さを変えるには、 .progress の height プロパティを変更する。.progress-bar の高さはこれに応じて自動的に変わる
• カラーユーティリティクラスを使えばプログレスバーの色は変更できる
• .progress-bar-striped でプログレスバーの背景をストライプ柄にすることができる
• ストライプ柄のプログレスバーは .progress-bar-striped.progress-bar-animated でアニメーションさせることもできる
• プログレスバーの積み重ねは、単純に .progress 内に背景色の異なる .progress-bar を複数書く