mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-27 14:46:01 +03:00
Code Activity

Fixes #12614: Add progress bar example with visible label

Browse Source
This commit is contained in:
Mark Otto
2014-02-07 01:16:34 -08:00
parent ebd132ce68
commit 3b4b9a7fe5
2 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components.html
+17
View File
@@ -2261,6 +2261,23 @@ body { padding-bottom: 70px; }
<span class="sr-only">60% Complete</span>
</div>
</div>
{% endhighlight %}
<h3 id="progress-label">With label</h3>
<p>Remove the <code>.sr-only</code> class from within the progress bar to show a visible percentage. For low percentages, consider adding a <code>min-width</code> to ensure the label's text is fully visible.</p>
<div class="bs-example">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
</div>
{% highlight html %}
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60% Complete
</div>
</div>
{% endhighlight %}
<h3 id="progress-alternatives">Contextual alternatives</h3>