diff options
| author | Patrick H. Lauke <[email protected]> | 2014-12-10 16:50:21 +0000 |
|---|---|---|
| committer | Patrick H. Lauke <[email protected]> | 2014-12-10 16:50:21 +0000 |
| commit | d9c3e5f3ad28a55102a6c880324ef8ac80ddf276 (patch) | |
| tree | deb3ead2e8dff34cd9a26803852e33b523361e2e /docs/_includes/components | |
| parent | 7c228b3cfab854bf43b0ba8aa4899fdabf62467a (diff) | |
| download | bootstrap-d9c3e5f3ad28a55102a6c880324ef8ac80ddf276.tar.xz bootstrap-d9c3e5f3ad28a55102a6c880324ef8ac80ddf276.zip | |
Fix/merge advice on low percentage progress bars
- actually add the ``min-width`` extra style (and use ``em`` rather than
``px``) to the 0% and 2% example
- remove the unnecessarily redundant sentence in the "With labels"
section
- remove the unnecessary heading/section specifically for low percentage
case, make it flow naturally as part of the "With labels" section
Diffstat (limited to 'docs/_includes/components')
| -rw-r--r-- | docs/_includes/components/progress-bars.html | 14 |
1 files changed, 6 insertions, 8 deletions
diff --git a/docs/_includes/components/progress-bars.html b/docs/_includes/components/progress-bars.html index 88340105b..68d87e090 100644 --- a/docs/_includes/components/progress-bars.html +++ b/docs/_includes/components/progress-bars.html @@ -26,7 +26,7 @@ {% 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> + <p>Remove the <code><span></code> with <code>.sr-only</code> class from within the progress bar to show a visible percentage.</p> <div class="bs-example" data-example-id="progress-bar-with-label"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> @@ -41,29 +41,27 @@ </div> </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> + <p>To ensure that the label text remains legible even for low percentages, consider adding a <code>min-width</code> to the progress bar.</p> <div class="bs-example" data-example-id="progress-bar-at-low-percentage"> <div class="progress"> - <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"> 0% </div> </div> <div class="progress"> - <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;"> + <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; 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"> + <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"> 0% </div> </div> <div class="progress"> - <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;"> + <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;"> 2% </div> </div> |