rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/_includes/nav-components.html
View File

@ -102,6 +102,7 @@
<a href="#progress">Progress bars</a>
<ul class="nav">
<li><a href="#progress-basic">Basic example</a></li>
<li><a href="#progress-labels">With labels</a></li>
<li><a href="#progress-alternatives">Contextual alternatives</a></li>
<li><a href="#progress-striped">Striped</a></li>
<li><a href="#progress-animated">Animated</a></li>

17
docs/components.html
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>