diff options
| author | Pierre-Denis Vanduynslager <[email protected]> | 2016-12-28 19:57:38 -0500 |
|---|---|---|
| committer | Pierre-Denis Vanduynslager <[email protected]> | 2016-12-28 19:57:38 -0500 |
| commit | 425d156df27fa6c18e979aa000bfe5a346ee3450 (patch) | |
| tree | 4157dfcbdf8334e9d9fb2bb239f4ae78706bbc71 /docs/components/progress.md | |
| parent | ab2fc63d08b8c53d6f29bcfd73b7f2d5ceaacacd (diff) | |
| parent | e1e621be046a4541a2fd36e445015ee44de3c67e (diff) | |
| download | bootstrap-425d156df27fa6c18e979aa000bfe5a346ee3450.tar.xz bootstrap-425d156df27fa6c18e979aa000bfe5a346ee3450.zip | |
Merge branch 'twbs/v4-dev' into dropdown-keyboard
Diffstat (limited to 'docs/components/progress.md')
| -rw-r--r-- | docs/components/progress.md | 32 |
1 files changed, 10 insertions, 22 deletions
diff --git a/docs/components/progress.md b/docs/components/progress.md index 57028c972..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 --- @@ -11,42 +12,29 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc * Will be replaced with the ToC, excluding the "Contents" header {:toc} -### Example +## 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 +## 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> |
