diff options
Diffstat (limited to 'components.html')
| -rw-r--r-- | components.html | 36 |
1 files changed, 18 insertions, 18 deletions
diff --git a/components.html b/components.html index 963074ffb..f76203a82 100644 --- a/components.html +++ b/components.html @@ -2020,13 +2020,13 @@ body { padding-bottom: 70px; } <h3 id="progress-alternatives">Contextual alternatives</h3> <p>Progress bars use some of the same button and alert classes for consistent styles.</p> <div class="bs-example"> - <div class="progress" style="margin-bottom: 9px;"> - <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div> - </div> - <div class="progress" style="margin-bottom: 9px;"> + <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div> </div> - <div class="progress" style="margin-bottom: 9px;"> + <div class="progress"> + <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></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%"><span class="sr-only">60% Complete (warning)</span></div> </div> <div class="progress"> @@ -2035,13 +2035,13 @@ body { padding-bottom: 70px; } </div> {% highlight html %} <div class="progress"> - <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> - <span class="sr-only">20% Complete</span> + <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> + <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> - <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> - <span class="sr-only">40% Complete (success)</span> + <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> + <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> @@ -2059,13 +2059,13 @@ body { padding-bottom: 70px; } <h3 id="progress-striped">Striped</h3> <p>Uses a gradient to create a striped effect. Not available in IE8.</p> <div class="bs-example"> - <div class="progress progress-striped" style="margin-bottom: 9px;"> - <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div> - </div> - <div class="progress progress-striped" style="margin-bottom: 9px;"> + <div class="progress progress-striped" > <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div> </div> - <div class="progress progress-striped" style="margin-bottom: 9px;"> + <div class="progress progress-striped"> + <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div> + </div> + <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div> </div> <div class="progress progress-striped"> @@ -2074,13 +2074,13 @@ body { padding-bottom: 70px; } </div> {% highlight html %} <div class="progress progress-striped"> - <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> - <span class="sr-only">20% Complete</span> + <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> + <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress progress-striped"> - <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> - <span class="sr-only">40% Complete (success)</span> + <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> + <span class="sr-only">20% Complete</span> </div> </div> <div class="progress progress-striped"> |