rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

reorder and cleanup progress bar display

Browse Source
This commit is contained in:
Mark Otto 2013-08-15 13:06:01 -07:00
parent 8211b12c0f
commit 4da7cad021
2 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/docs.css
View File

@ -408,7 +408,8 @@ body {
.bs-example > .alert:last-child, .bs-example > .alert:last-child,
.bs-example > .panel:last-child, .bs-example > .panel:last-child,
.bs-example > .list-group:last-child, .bs-example > .list-group:last-child,
.bs-example > .well:last-child { .bs-example > .well:last-child,
.bs-example > .progress:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.bs-example > p > .close { .bs-example > p > .close {

36
components.html
View File

@ -2020,13 +2020,13 @@ body { padding-bottom: 70px; }
<h3 id="progress-alternatives">Contextual alternatives</h3> <h3 id="progress-alternatives">Contextual alternatives</h3>
<p>Progress bars use some of the same button and alert classes for consistent styles.</p> <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="bs-example"> <div class="bs-example">
<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" style="margin-bottom: 9px;">
<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 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>
<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 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>
<div class="progress"> <div class="progress">
@ -2035,13 +2035,13 @@ body { padding-bottom: 70px; }
</div> </div>
{% highlight html %} {% highlight html %}
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <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">20% Complete</span> <span class="sr-only">40% Complete (success)</span>
</div> </div>
</div> </div>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <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">40% Complete (success)</span> <span class="sr-only">20% Complete</span>
</div> </div>
</div> </div>
<div class="progress"> <div class="progress">
@ -2059,13 +2059,13 @@ body { padding-bottom: 70px; }
<h3 id="progress-striped">Striped</h3> <h3 id="progress-striped">Striped</h3>
<p>Uses a gradient to create a striped effect. Not available in IE8.</p> <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-example"> <div class="bs-example">
<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" style="margin-bottom: 9px;">
<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 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>
<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 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>
<div class="progress progress-striped"> <div class="progress progress-striped">
@ -2074,13 +2074,13 @@ body { padding-bottom: 70px; }
</div> </div>
{% highlight html %} {% highlight html %}
<div class="progress progress-striped"> <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%"> <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">20% Complete</span> <span class="sr-only">40% Complete (success)</span>
</div> </div>
</div> </div>
<div class="progress progress-striped"> <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%"> <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">40% Complete (success)</span> <span class="sr-only">20% Complete</span>
</div> </div>
</div> </div>
<div class="progress progress-striped"> <div class="progress progress-striped">