From 65e87f7ef46ffa915e398ebe07ece5be7ddff51a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Dec 2016 13:43:19 -0800 Subject: follow up to #21393: clarify progress docs browser support and remove ie9 section --- docs/components/progress.md | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) (limited to 'docs/components/progress.md') diff --git a/docs/components/progress.md b/docs/components/progress.md index 50d1f1b55..d137fad14 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -34,19 +34,6 @@ To caption a progress bar, simply add a `
` with your caption text, [align t {% endexample %} -## IE9 support - -Internet Explorer 9 doesn't support the HTML5 `` element, but we can work around that. - -{% example html %} -
Reticulating splines… 25%
- -
- -
- -{% 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).
-- cgit v1.2.3 From a0141aa38e74108b4b5f805f8af65cb618236823 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Dec 2016 14:56:28 -0800 Subject: Rewrite progress component without element - element didn't allow animation, labels overlaid, multiple bars, etc. - Revamps CSS to use something more similar to v3's implementation - Ditches variant mixin for `bg-` utils - Rebuilds docs to match, including adding a new Height section for customizing that. Only potential remaining todo is adding `.sr-only` instances to within the bar. Unsure if that's necessary. --- docs/components/progress.md | 128 +++++++++++++++++++++++++++++++++----------- 1 file changed, 98 insertions(+), 30 deletions(-) (limited to 'docs/components/progress.md') diff --git a/docs/components/progress.md b/docs/components/progress.md index d137fad14..29436c365 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -5,71 +5,139 @@ description: Documentation and examples for using Bootstrap progress bars. group: components --- -Stylize [the HTML5 `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support. +Use our custom progress component for displaying simple or complex progress bars. We don't use [the HTML5 `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them. ## Contents * Will be replaced with the ToC, excluding the "Contents" header {:toc} -## Example +## How it works -To caption a progress bar, simply add a `
` with your caption text, [align the text using a utility class]({{ site.baseurl }}/utilities/typography/#text-alignment), and associate the caption with the `` element using the `aria-describedby` attribute. +Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. + +- We use the `.progress` as a wrapper to indicate the max value of the progress bar. +- We use the inner `.progress-bar` to indicate the progress so far. +- The `.progress-bar` requires an inline style or custom CSS to set their width. +- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible. + +Put that all together, and you have the following examples. {% example html %} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endexample %} -
Reticulating splines… 0%
- +## Customizing -
Reticulating splines… 25%
- +Customize the appearance of your progress bars with custom CSS, background utilities, stripes, and more. -
Reticulating splines… 50%
- +### Labels -
Reticulating splines… 75%
- +Add labels to your progress bars by placing text within the `.progress-bar`. -
Reticulating splines… 100%
- +{% example html %} +
+
25%
+
{% endexample %} -## Contextual alternatives +### Height -Progress bars use some of the same button and alert classes for consistent styles. +We only set a `height` value on the `.progress-bar`, so if you change that value the outer `.progress` will automatically resize accordingly. {% example html %} - - - - +
+
+
+
+
+
+{% endexample %} + +### Backgrounds + +Use background utility classes to change the appearance of individual progress bars. + +{% example html %} +
+
+
+
+
+
+
+
+
+
+
+
+{% endexample %} + +### Multiple bars + +Include multiple progress bars in a progress component if you need. + +{% example html %} +
+
+
+
+
{% endexample %} ### Striped -Uses a gradient to create a striped effect. +Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color. {% example html %} - - - - - +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{% endexample %} ### Animated stripes -The striped gradient can also be animated. Add `.progress-animated` to `.progress` to animate the stripes right to left via CSS3 animations. +The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations. -**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). +**Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations.
- -
{% highlight html %} - +
+
+
{% endhighlight %} -- cgit v1.2.3 From a7931f0c1e85d0e795877ddca78acce240047aff Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 30 Dec 2016 21:43:16 -0800 Subject: add example of width util --- docs/components/progress.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'docs/components/progress.md') diff --git a/docs/components/progress.md b/docs/components/progress.md index 29436c365..e475f416f 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -18,7 +18,7 @@ Progress components are built with two HTML elements, some CSS to set the width, - We use the `.progress` as a wrapper to indicate the max value of the progress bar. - We use the inner `.progress-bar` to indicate the progress so far. -- The `.progress-bar` requires an inline style or custom CSS to set their width. +- The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width. - The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible. Put that all together, and you have the following examples. @@ -41,6 +41,14 @@ Put that all together, and you have the following examples.
{% endexample %} +Bootstrap provides a handful of [utilities for setting width]({{ site.baseurl }}/utilities/sizing-and-positioning/#width-and-height). Depending on your needs, these may help with quickly configuring progress. + +{% example html %} +
+
+
+{% endexample %} + ## Customizing Customize the appearance of your progress bars with custom CSS, background utilities, stripes, and more. -- cgit v1.2.3 From 8f0ac7193e6df889ad8d40c9167238e8a60d1522 Mon Sep 17 00:00:00 2001 From: Quy Date: Tue, 3 Jan 2017 09:38:25 -0800 Subject: Update sizing links --- docs/components/progress.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components/progress.md') diff --git a/docs/components/progress.md b/docs/components/progress.md index e475f416f..9f8bcf607 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -41,7 +41,7 @@ Put that all together, and you have the following examples.
{% endexample %} -Bootstrap provides a handful of [utilities for setting width]({{ site.baseurl }}/utilities/sizing-and-positioning/#width-and-height). Depending on your needs, these may help with quickly configuring progress. +Bootstrap provides a handful of [utilities for setting width]({{ site.baseurl }}/utilities/sizing/). Depending on your needs, these may help with quickly configuring progress. {% example html %}
-- cgit v1.2.3 From b2121d499c8ca4240fdbf4a4ae0ce8792cad411e Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Wed, 4 Jan 2017 12:04:07 -0500 Subject: Fix progress doc markup --- docs/components/progress.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components/progress.md') diff --git a/docs/components/progress.md b/docs/components/progress.md index 9f8bcf607..802a42a29 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -122,7 +122,7 @@ Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gra
-
+
-- cgit v1.2.3 From c72cc98bd56fb50259c84a1fced38751009eb930 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 May 2017 23:01:14 -0700 Subject: update components docs --- docs/components/progress.md | 28 +++++++++------------------- 1 file changed, 9 insertions(+), 19 deletions(-) (limited to 'docs/components/progress.md') diff --git a/docs/components/progress.md b/docs/components/progress.md index 802a42a29..5b9fcd924 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -1,20 +1,14 @@ --- layout: docs title: Progress -description: Documentation and examples for using Bootstrap progress bars. +description: Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. group: components +toc: true --- -Use our custom progress component for displaying simple or complex progress bars. We don't use [the HTML5 `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## How it works -Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. +Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them. - We use the `.progress` as a wrapper to indicate the max value of the progress bar. - We use the inner `.progress-bar` to indicate the progress so far. @@ -49,11 +43,7 @@ Bootstrap provides a handful of [utilities for setting width]({{ site.baseurl }}
{% endexample %} -## Customizing - -Customize the appearance of your progress bars with custom CSS, background utilities, stripes, and more. - -### Labels +## Labels Add labels to your progress bars by placing text within the `.progress-bar`. @@ -63,7 +53,7 @@ Add labels to your progress bars by placing text within the `.progress-bar`.
{% endexample %} -### Height +## Height We only set a `height` value on the `.progress-bar`, so if you change that value the outer `.progress` will automatically resize accordingly. @@ -76,7 +66,7 @@ We only set a `height` value on the `.progress-bar`, so if you change that value {% endexample %} -### Backgrounds +## Backgrounds Use background utility classes to change the appearance of individual progress bars. @@ -95,7 +85,7 @@ Use background utility classes to change the appearance of individual progress b {% endexample %} -### Multiple bars +## Multiple bars Include multiple progress bars in a progress component if you need. @@ -107,7 +97,7 @@ Include multiple progress bars in a progress component if you need. {% endexample %} -### Striped +## Striped Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color. @@ -129,7 +119,7 @@ Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gra {% endexample %} -### Animated stripes +## Animated stripes The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations. -- cgit v1.2.3 From 3e76d6565603fafa2c85ad81d7b6345c4e279c72 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 28 May 2017 22:50:57 -0700 Subject: Rearrange all the docs to allow for a docs/major.minor/ setup --- docs/components/progress.md | 141 -------------------------------------------- 1 file changed, 141 deletions(-) delete mode 100644 docs/components/progress.md (limited to 'docs/components/progress.md') diff --git a/docs/components/progress.md b/docs/components/progress.md deleted file mode 100644 index 5b9fcd924..000000000 --- a/docs/components/progress.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -layout: docs -title: Progress -description: Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. -group: components -toc: true ---- - -## How it works - -Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them. - -- We use the `.progress` as a wrapper to indicate the max value of the progress bar. -- We use the inner `.progress-bar` to indicate the progress so far. -- The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width. -- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible. - -Put that all together, and you have the following examples. - -{% example html %} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endexample %} - -Bootstrap provides a handful of [utilities for setting width]({{ site.baseurl }}/utilities/sizing/). Depending on your needs, these may help with quickly configuring progress. - -{% example html %} -
-
-
-{% endexample %} - -## Labels - -Add labels to your progress bars by placing text within the `.progress-bar`. - -{% example html %} -
-
25%
-
-{% endexample %} - -## Height - -We only set a `height` value on the `.progress-bar`, so if you change that value the outer `.progress` will automatically resize accordingly. - -{% example html %} -
-
-
-
-
-
-{% endexample %} - -## Backgrounds - -Use background utility classes to change the appearance of individual progress bars. - -{% example html %} -
-
-
-
-
-
-
-
-
-
-
-
-{% endexample %} - -## Multiple bars - -Include multiple progress bars in a progress component if you need. - -{% example html %} -
-
-
-
-
-{% endexample %} - -## Striped - -Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color. - -{% example html %} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endexample %} - -## Animated stripes - -The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations. - -**Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations. - -
-
-
-
- -
- -{% highlight html %} -
-
-
-{% endhighlight %} -- cgit v1.2.3