From 0e920ce3f481a23c00c22c10565463ce58c0aac2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 21 Jun 2018 07:31:38 +0300 Subject: Reorganize docs for easier deploys MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit With the current docs directory setup, I'm making too many mistakes and have to manually address path changes and directory moves on deploy. This makes for a frustrating experience developing locally and shipping releases. With this PR, we're basically back to the same setup from v3—duplicating the dist directory into our docs directory. Not the most ideal, but very straightforward for me as the release manager. --- docs/4.1/components/progress.md | 146 ---------------------------------------- 1 file changed, 146 deletions(-) delete mode 100644 docs/4.1/components/progress.md (limited to 'docs/4.1/components/progress.md') diff --git a/docs/4.1/components/progress.md b/docs/4.1/components/progress.md deleted file mode 100644 index e342b06d9..000000000 --- a/docs/4.1/components/progress.md +++ /dev/null @@ -1,146 +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. - -{% capture example %} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endcapture %} -{% include example.html content=example %} - -Bootstrap provides a handful of [utilities for setting width]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/sizing/). Depending on your needs, these may help with quickly configuring progress. - -{% capture example %} -
-
-
-{% endcapture %} -{% include example.html content=example %} - -## Labels - -Add labels to your progress bars by placing text within the `.progress-bar`. - -{% capture example %} -
-
25%
-
-{% endcapture %} -{% include example.html content=example %} - -## Height - -We only set a `height` value on the `.progress`, so if you change that value the inner `.progress-bar` will automatically resize accordingly. - -{% capture example %} -
-
-
-
-
-
-{% endcapture %} -{% include example.html content=example %} - -## Backgrounds - -Use background utility classes to change the appearance of individual progress bars. - -{% capture example %} -
-
-
-
-
-
-
-
-
-
-
-
-{% endcapture %} -{% include example.html content=example %} - -## Multiple bars - -Include multiple progress bars in a progress component if you need. - -{% capture example %} -
-
-
-
-
-{% endcapture %} -{% include example.html content=example %} - -## Striped - -Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color. - -{% capture example %} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endcapture %} -{% include example.html content=example %} - -## 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. - -
-
-
-
- -
- -{% highlight html %} -
-
-
-{% endhighlight %} -- cgit v1.2.3