2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00

Fixes #12848: Account for and document progress bars at 0-3%

This commit is contained in:
Mark Otto
2014-03-04 16:55:15 -08:00
parent 13ed379767
commit 24de9b0994
10 changed files with 74 additions and 6 deletions
+28
View File
@@ -2280,6 +2280,34 @@ body { padding-bottom: 70px; }
</div>
{% endhighlight %}
<h3 id="progress-low-percentages">Low percentages</h3>
<p>Progress bars representing low single digit percentages, as well as 0%, include a <code>min-width: 20px;</code> for legibility.</p>
<div class="bs-example">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
2%
</div>
</div>
</div>
{% highlight html %}
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
2%
</div>
</div>
{% endhighlight %}
<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">