From 20fed789f942bd88d507d7b10ac4432b9a854178 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 19 Aug 2013 00:41:03 -0700 Subject: [PATCH] More legible examples for progress bars --- components.html | 64 ++++++++++++++++++++++++++++++++++++------------- 1 file changed, 48 insertions(+), 16 deletions(-) diff --git a/components.html b/components.html index b5fe95fd62..49f4c3910a 100644 --- a/components.html +++ b/components.html @@ -2262,12 +2262,16 @@ body { padding-bottom: 70px; }

Default progress bar.

-
60% Complete
+
+ 60% Complete +
{% highlight html %}
-
60% Complete
+
+ 60% Complete +
{% endhighlight %} @@ -2275,16 +2279,24 @@ body { padding-bottom: 70px; }

Progress bars use some of the same button and alert classes for consistent styles.

-
40% Complete (success)
+
+ 40% Complete (success) +
-
20% Complete
+
+ 20% Complete +
-
60% Complete (warning)
+
+ 60% Complete (warning) +
-
80% Complete (danger)
+
+ 80% Complete (danger) +
{% highlight html %} @@ -2314,16 +2326,24 @@ body { padding-bottom: 70px; }

Uses a gradient to create a striped effect. Not available in IE8.

-
40% Complete (success)
+
+ 40% Complete (success) +
-
20% Complete
+
+ 20% Complete +
-
60% Complete (warning)
+
+ 60% Complete (warning) +
-
80% Complete (danger)
+
+ 80% Complete (danger) +
{% highlight html %} @@ -2368,16 +2388,28 @@ body { padding-bottom: 70px; }

Place multiple bars into the same .progress to stack them.

-
35% Complete (success)
-
20% Complete (warning)
-
10% Complete (danger)
+
+ 35% Complete (success) +
+
+ 20% Complete (warning) +
+
+ 10% Complete (danger) +
{% highlight html %}
-
35% Complete (success)
-
20% Complete (warning)
-
10% Complete (danger)
+
+ 35% Complete (success) +
+
+ 20% Complete (warning) +
+
+ 10% Complete (danger) +
{% endhighlight %} -- 2.47.2