diff options
| author | Mark Otto <[email protected]> | 2013-08-15 13:06:01 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-08-15 13:06:01 -0700 |
| commit | 4da7cad021eb42784faf1fca0d5c51342f196f32 (patch) | |
| tree | a1ae7c7fc0cf4902588cd923a81ea3468f46240f /components.html | |
| parent | 8211b12c0fcb5890305a3768b769cbe754c8b1b8 (diff) | |
| download | bootstrap-4da7cad021eb42784faf1fca0d5c51342f196f32.tar.xz bootstrap-4da7cad021eb42784faf1fca0d5c51342f196f32.zip | |
reorder and cleanup progress bar display
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"> |