Skip to content
GitLab
Commit 4da7cad0 authored by Mark Otto's avatar Mark Otto
Browse files

reorder and cleanup progress bar display

parent 8211b12c
Hide whitespace changes
Inline Side-by-side
Showing
with 20 additions and 19 deletions
+20 -19
assets/css/docs.css
+ 2
- 1
View file @ 4da7cad0
...@@ -408,7 +408,8 @@ body { ...@@ -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 {
......
components.html
+ 18
- 18
View file @ 4da7cad0
...@@ -2020,13 +2020,13 @@ body { padding-bottom: 70px; } ...@@ -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; } ...@@ -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; } ...@@ -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; } ...@@ -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">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment