diff options
| author | Mark Otto <[email protected]> | 2014-02-07 01:16:34 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-02-07 01:16:34 -0800 |
| commit | 3b4b9a7fe58082cde1545167e511a4acc6d5a0fb (patch) | |
| tree | 248aa4a28c235de77e024b6c6329a42de5353ce5 /docs | |
| parent | ebd132ce68b79a95daf6ef91225304e9656cd4a4 (diff) | |
| download | bootstrap-3b4b9a7fe58082cde1545167e511a4acc6d5a0fb.tar.xz bootstrap-3b4b9a7fe58082cde1545167e511a4acc6d5a0fb.zip | |
Fixes #12614: Add progress bar example with visible label
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/_includes/nav-components.html | 1 | ||||
| -rw-r--r-- | docs/components.html | 17 |
2 files changed, 18 insertions, 0 deletions
diff --git a/docs/_includes/nav-components.html b/docs/_includes/nav-components.html index 131114883..adc493eef 100644 --- a/docs/_includes/nav-components.html +++ b/docs/_includes/nav-components.html @@ -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> diff --git a/docs/components.html b/docs/components.html index 264e9c763..45c7d2e4b 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2263,6 +2263,23 @@ body { padding-bottom: 70px; } </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> <p>Progress bars use some of the same button and alert classes for consistent styles.</p> <div class="bs-example"> |