diff options
| author | Mark Otto <[email protected]> | 2017-05-26 22:28:09 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-05-26 22:28:09 -0700 |
| commit | 6c3f833076a9fa68601741e3e21bd07ad79b7d8a (patch) | |
| tree | fe016946d77f9ffff15bbe9cdc593fd098b5bcc7 /docs/components/progress.md | |
| parent | c581564a780974c6430ac5897740006f623f2277 (diff) | |
| parent | 5d7db507396275fcda96935aff47b09e1d79ddc1 (diff) | |
| download | bootstrap-6c3f833076a9fa68601741e3e21bd07ad79b7d8a.tar.xz bootstrap-6c3f833076a9fa68601741e3e21bd07ad79b7d8a.zip | |
Merge branch 'v4-docs-streamlined' of https://github.com/twbs/bootstrap into v4-docs-streamlined
Diffstat (limited to 'docs/components/progress.md')
| -rw-r--r-- | docs/components/progress.md | 25 |
1 files changed, 6 insertions, 19 deletions
diff --git a/docs/components/progress.md b/docs/components/progress.md index 2d8db33cb..d137fad14 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -18,35 +18,22 @@ To caption a progress bar, simply add a `<div>` with your caption text, [align t {% 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. @@ -74,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> |