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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user