diff options
Diffstat (limited to 'docs/_includes/components/progress-bars.html')
| -rw-r--r-- | docs/_includes/components/progress-bars.html | 28 |
1 files changed, 13 insertions, 15 deletions
diff --git a/docs/_includes/components/progress-bars.html b/docs/_includes/components/progress-bars.html index a7132e763..68d87e090 100644 --- a/docs/_includes/components/progress-bars.html +++ b/docs/_includes/components/progress-bars.html @@ -10,7 +10,7 @@ <h3 id="progress-basic">Basic example</h3> <p>Default progress bar.</p> - <div class="bs-example"> + <div class="bs-example" data-example-id="simple-progress-bar"> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> @@ -26,8 +26,8 @@ {% 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"> + <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%;"> 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> - <div class="bs-example"> + <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> @@ -72,7 +70,7 @@ <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"> + <div class="bs-example" data-example-id="contextual-progress-bar"> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> @@ -119,7 +117,7 @@ <h3 id="progress-striped">Striped</h3> <p>Uses a gradient to create a striped effect. Not available in IE8.</p> - <div class="bs-example"> + <div class="bs-example" data-example-id="striped-progress-bar"> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> @@ -166,7 +164,7 @@ <h3 id="progress-animated">Animated</h3> <p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p> - <div class="bs-example"> + <div class="bs-example" data-example-id="animated-progress-bar"> <div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div> </div> @@ -182,7 +180,7 @@ <h3 id="progress-stacked">Stacked</h3> <p>Place multiple bars into the same <code>.progress</code> to stack them.</p> - <div class="bs-example"> + <div class="bs-example" data-example-id="stacked-progress-bar"> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> |