diff options
| author | Mark Otto <[email protected]> | 2016-12-28 15:52:28 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-12-28 15:52:28 -0800 |
| commit | 047d4a77da5af8b59fd562935669c550272f57a6 (patch) | |
| tree | 7a2daf4d737693826c6d264113adc6e987c3ae2a /docs/components/progress.md | |
| parent | 11d52ba9498990483d822a5a42d371393a110080 (diff) | |
| parent | e1e621be046a4541a2fd36e445015ee44de3c67e (diff) | |
| download | bootstrap-047d4a77da5af8b59fd562935669c550272f57a6.tar.xz bootstrap-047d4a77da5af8b59fd562935669c550272f57a6.zip | |
Merge branch 'v4-dev' into v4-docs-streamlined
Diffstat (limited to 'docs/components/progress.md')
| -rw-r--r-- | docs/components/progress.md | 28 |
1 files changed, 8 insertions, 20 deletions
diff --git a/docs/components/progress.md b/docs/components/progress.md index 5e0abc5fe..d137fad14 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -1,6 +1,7 @@ --- layout: docs title: Progress +description: Documentation and examples for using Bootstrap progress bars. group: components --- @@ -13,39 +14,26 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc ## Example -To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/components/utilities/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute. +To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/utilities/typography/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute. {% example html %} -<div class="text-xs-center" id="example-caption-1">Reticulating splines… 0%</div> +<div class="text-center" id="example-caption-1">Reticulating splines… 0%</div> <progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress> -<div class="text-xs-center" id="example-caption-2">Reticulating splines… 25%</div> +<div class="text-center" id="example-caption-2">Reticulating splines… 25%</div> <progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress> -<div class="text-xs-center" id="example-caption-3">Reticulating splines… 50%</div> +<div class="text-center" id="example-caption-3">Reticulating splines… 50%</div> <progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress> -<div class="text-xs-center" id="example-caption-4">Reticulating splines… 75%</div> +<div class="text-center" id="example-caption-4">Reticulating splines… 75%</div> <progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress> -<div class="text-xs-center" id="example-caption-5">Reticulating splines… 100%</div> +<div class="text-center" id="example-caption-5">Reticulating splines… 100%</div> <progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress> {% endexample %} -## IE9 support - -Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that. - -{% example html %} -<div class="text-xs-center" id="example-caption-6">Reticulating splines… 25%</div> -<progress class="progress" value="25" max="100" aria-describedby="example-caption-6"> - <div class="progress"> - <span class="progress-bar" style="width: 25%;"></span> - </div> -</progress> -{% endexample %} - ## Contextual alternatives Progress bars use some of the same button and alert classes for consistent styles. @@ -73,7 +61,7 @@ Uses a gradient to create a striped effect. The striped gradient can also be animated. Add `.progress-animated` to `.progress` to animate the stripes right to left via CSS3 animations. -**Animated progress bars do not work in IE9 and Opera 12** – as they don't support CSS3 animations – **nor in IE10+ and Microsoft Edge** – as they currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx). +**Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations. They also **don't work in IE10+ and Microsoft Edge** as those browsers currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx). <div class="bd-example"> <progress class="progress progress-striped" value="25" max="100"></progress> |
