mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
clearing up progress bar docs and resetting the striped one to match default bar (blue instead of green)
This commit is contained in:
Mark Otto
parent
d98a2e9234
commit
bcd9294cc4
5 changed files with 76 additions and 36 deletions
Binary file not shown.
2
docs/assets/css/bootstrap.css
vendored
2
docs/assets/css/bootstrap.css
vendored
|
|
@ -3480,7 +3480,7 @@ a.thumbnail:hover {
|
|||
transition: width 0.6s ease;
|
||||
}
|
||||
.progress-striped .bar {
|
||||
background-color: #62c462;
|
||||
background-color: #149bdf;
|
||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
|
|
|
|||
|
|
@ -1730,12 +1730,11 @@
|
|||
<div class="span4">
|
||||
<h3>Striped</h3>
|
||||
<p>Uses a gradient to create a striped effect.</p>
|
||||
<div class="progress progress-info progress-striped">
|
||||
<div class="progress progress-striped">
|
||||
<div class="bar" style="width: 20%;"></div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress progress-info
|
||||
progress-striped">
|
||||
<div class="progress progress-striped">
|
||||
<div class="bar"
|
||||
style="width: 20%;"></div>
|
||||
</div>
|
||||
|
|
@ -1744,12 +1743,12 @@
|
|||
<div class="span4">
|
||||
<h3>Animated</h3>
|
||||
<p>Takes the striped example and animates it.</p>
|
||||
<div class="progress progress-danger progress-striped active">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar" style="width: 45%"></div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress progress-danger
|
||||
progress-striped active">
|
||||
<div class="progress progress-striped
|
||||
active">
|
||||
<div class="bar"
|
||||
style="width: 40%;"></div>
|
||||
</div>
|
||||
|
|
@ -1759,23 +1758,44 @@
|
|||
|
||||
<h2>Options and browser support</h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h3>Additional colors</h3>
|
||||
<p>Progress bars utilize some of the same class names as buttons and alerts for similar styling.</p>
|
||||
<ul>
|
||||
<li><code>.progress-info</code></li>
|
||||
<li><code>.progress-success</code></li>
|
||||
<li><code>.progress-warning</code></li>
|
||||
<li><code>.progress-danger</code></li>
|
||||
</ul>
|
||||
<p>Alternatively, you can customize the LESS files and roll your own colors and sizes.</p>
|
||||
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
|
||||
<div class="progress progress-info" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="progress progress-success" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 40%"></div>
|
||||
</div>
|
||||
<div class="progress progress-warning" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 60%"></div>
|
||||
</div>
|
||||
<div class="progress progress-danger" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h3>Striped bars</h3>
|
||||
<p>Similar to the solid colors, we have varied striped progress bars.</p>
|
||||
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="progress progress-success progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 40%"></div>
|
||||
</div>
|
||||
<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 60%"></div>
|
||||
</div>
|
||||
<div class="progress progress-danger progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3>Behavior</h3>
|
||||
<p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p>
|
||||
<p>If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h3>Browser support</h3>
|
||||
<p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.</p>
|
||||
<p>Opera does not support animations at this time.</p>
|
||||
|
|
|
|||
54
docs/templates/pages/components.mustache
vendored
54
docs/templates/pages/components.mustache
vendored
|
|
@ -1654,12 +1654,11 @@
|
|||
<div class="span4">
|
||||
<h3>{{_i}}Striped{{/i}}</h3>
|
||||
<p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p>
|
||||
<div class="progress progress-info progress-striped">
|
||||
<div class="progress progress-striped">
|
||||
<div class="bar" style="width: 20%;"></div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress progress-info
|
||||
progress-striped">
|
||||
<div class="progress progress-striped">
|
||||
<div class="bar"
|
||||
style="width: 20%;"></div>
|
||||
</div>
|
||||
|
|
@ -1668,12 +1667,12 @@
|
|||
<div class="span4">
|
||||
<h3>{{_i}}Animated{{/i}}</h3>
|
||||
<p>{{_i}}Takes the striped example and animates it.{{/i}}</p>
|
||||
<div class="progress progress-danger progress-striped active">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar" style="width: 45%"></div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="progress progress-danger
|
||||
progress-striped active">
|
||||
<div class="progress progress-striped
|
||||
active">
|
||||
<div class="bar"
|
||||
style="width: 40%;"></div>
|
||||
</div>
|
||||
|
|
@ -1683,23 +1682,44 @@
|
|||
|
||||
<h2>{{_i}}Options and browser support{{/i}}</h2>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h3>{{_i}}Additional colors{{/i}}</h3>
|
||||
<p>{{_i}}Progress bars utilize some of the same class names as buttons and alerts for similar styling.{{/i}}</p>
|
||||
<ul>
|
||||
<li><code>.progress-info</code></li>
|
||||
<li><code>.progress-success</code></li>
|
||||
<li><code>.progress-warning</code></li>
|
||||
<li><code>.progress-danger</code></li>
|
||||
</ul>
|
||||
<p>{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}</p>
|
||||
<p>{{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}</p>
|
||||
<div class="progress progress-info" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="progress progress-success" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 40%"></div>
|
||||
</div>
|
||||
<div class="progress progress-warning" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 60%"></div>
|
||||
</div>
|
||||
<div class="progress progress-danger" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h3>{{_i}}Striped bars{{/i}}</h3>
|
||||
<p>{{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}</p>
|
||||
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="progress progress-success progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 40%"></div>
|
||||
</div>
|
||||
<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 60%"></div>
|
||||
</div>
|
||||
<div class="progress progress-danger progress-striped" style="margin-bottom: 9px;">
|
||||
<div class="bar" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<h3>{{_i}}Behavior{{/i}}</h3>
|
||||
<p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
|
||||
<p>{{_i}}If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="span3">
|
||||
<h3>{{_i}}Browser support{{/i}}</h3>
|
||||
<p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.{{/i}}</p>
|
||||
<p>{{_i}}Opera does not support animations at this time.{{/i}}</p>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
// Striped bars
|
||||
.progress-striped .bar {
|
||||
#gradient > .striped(#62c462);
|
||||
#gradient > .striped(#149bdf);
|
||||
.background-size(40px 40px);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue