基本的なプログレスバー
プログレスバーは、彼/彼女が処理中であるか遠くに沿ってユーザを表示するために使用することができます。
Bootstrapプログレスバーのいくつかのタイプを提供します。
デフォルトのプログレスバーBootstrap次のようになります。
デフォルトのプログレスバーを作成するには、追加.progressにクラスを<div>要素：
例
<div class="progress">
<div class="progress-bar" role="progressbar"
aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100"
style="width:70%">
<span class="sr-only">70%
Complete</span>
</div>
</div> »それを自分で試してみてください 注意：プログレスバーは、Internet Explorer 9でサポートされておらず、以前の（彼らは効果のいくつかを達成するためにCSS3のトランジションやアニメーションを使用しているため）。
注意：スクリーンリーダーを使っている人のアクセシビリティを改善するには、含まれている必要がありaria-*属性を。
ラベルの付いたプログレスバー
ラベルの付いたプログレスバーは次のようになります。
削除.sr-only可視割合を示すようにプログレスバーからクラスを：
例
<div class="progress">
<div class="progress-bar" role="progressbar"
aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100"
style="width:70%">
70%
</div>
</div> »それを自分で試してみてください 着色されたプログレスバー
コンテキストクラスは、「色を介し意味」を提供するために使用されます。
プログレスバーで使用することができ、コンテキストクラスは次のとおりです。
-
.progress-bar-success -
.progress-bar-info -
.progress-bar-warning -
.progress-bar-danger
次の例では、異なる文脈クラスにプログレスバーを作成する方法を示しています。
例
<div class="progress">
<div class="progress-bar
progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0"
aria-valuemax="100" style="width:40%">
40% Complete
(success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div
class="progress">
<div class="progress-bar progress-bar-danger"
role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100"
style="width:70%">
70% Complete (danger)
</div>
</div> »それを自分で試してみてください ストライププログレスバー
プログレスバーもストライピングすることができます。
クラスの追加.progress-bar-stripedのプログレスバーにストライプを追加します：
例
<div class="progress">
<div class="progress-bar
progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100" style="width:40%">
40% Complete
(success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div
class="progress">
<div class="progress-bar progress-bar-danger
progress-bar-striped"
role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
style="width:70%">
70% Complete (danger)
</div>
</div> »それを自分で試してみてください アニメーションプログレスバー
ここで"animated"プログレスバーは：
クラスの追加.activeプログレスバーをアニメーション化します：
例
<div class="progress">
<div class="progress-bar
progress-bar-striped active" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div> »それを自分で試してみてください 積み重ねられたプログレスバー
プログレスバーも積み重ねることができます。
同じに複数のバーを配置することにより、積層プログレスバーを作成し<div class="progress">
例
<div class="progress">
<div class="progress-bar
progress-bar-success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar
progress-bar-warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar
progress-bar-danger" role="progressbar" style="width:20%">
Danger
</div>
</div> »それを自分で試してみてください