「Bootstrap ComponentsのProgress bars」のサンプル
「BootstrapのComponentsのサンプル：和訳」の「Progress bars」のサンプルページです。
- classを「alert alert-○○○」にする。
基本のプログレスバー
実際のソース
<div class="progress">
<div class="progress-bar" style="width:60%">
<span class="sr-only">60% Complete</span>
</div>
</div>ラベルの表示
「.sr-only」を削除
実際のソース
<div class="progress">
<div class="progress-bar" style="width:60%">
60%
</div>
</div>ラベル表示の際の最小幅の指定
ラベルが「0%」や「2%」のときみたいにラベルの文字が枠内に収めることができないときのための最小幅の指定
実際のソース
<div class="progress">
<div class="progress-bar" style="width:0%; min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" style="width:2%; min-width: 2em;">
2%
</div>
</div>プログレスバーの色
class「progress-bar」を「progress-bar progress-bar-○○○」にする。
実際のソース
<div class="progress">
<div class="progress-bar" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width:60%">60%</div>
</div>プログレスバーをストライプにする
class「progress-bar progress-bar-○○○」を「progress-bar progress-bar-○○○ progress-bar-striped」にする。
実際のソース
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:60%">60%</div>
</div>プログレスバーをアニメーションさせる
class「progress-bar-striped」だけでなく「active」も追加する。
実際のソース
<div class="progress">
<div class="progress-bar progress-bar-striped active" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped active" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width:60%">60%</div>
</div>プログレスバーを積み重ねる
使用用途が思いつかない・・・
実際のソース
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>