Bootstrap4 プログレスバー
プログレスバーは、ユーザーのタスクの完了過程を表示できます。
基本的なプログレスバーを作成する手順は次のとおりです：
- 〜を備えた.progressクラスの <div>。
- 次に、上記の <div> 内に、class を追加します.progress-bar空の <div>。
- パーセンテージで表された幅を持つ style 属性を追加します。例： style="width:70%"プログレスバーが〜にあることを示す70%の位置。
进度条高度
プログレスバーの高さはデフォルトで16pxです。CSS の...を使用できます。height属性で変更する：
实例
<div class="progress" style="height:20px;">
<div class="progress-bar" style="width:40%;"></div>
</div>
尝试一下 »
进度条标签
プログレスバー内にテキスト（進捗のパーセンテージなど）を追加できます：
異なる色のプログレスバー
デフォルトではプログレスバーは青色ですが、Bootstrap4 では以下の色のプログレスバーも提供されています：
实例
<div class="progress">
<div class="progress-bar bg-success" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width:50%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width:70%"></div>
</div>
尝试一下 »
ストライプのプログレスバー
可以使用.progress-bar-stripedクラスを使用してストライプのプログレスバーを設定します：
实例
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
尝试一下 »
动画进度条
使用.progress-bar-animatedクラスを使用してプログレスバーにアニメーションを追加できます：
实例
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>
尝试一下 »
混合色のプログレスバー
プログレスバーには複数の色を設定できます：
实例
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
尝试一下 »