From b65293dec022d88c2b1234b8385b0328547e3959 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Feb 2013 01:11:41 -0800 Subject: [PATCH] reorganize progress bars docs --- docs/components.html | 90 +++++++++--------------- docs/templates/pages/components.mustache | 90 +++++++++--------------- 2 files changed, 64 insertions(+), 116 deletions(-) diff --git a/docs/components.html b/docs/components.html index 2198145ecd..70900fc3a3 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1522,8 +1522,9 @@

Progress bars

+

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

-

Examples and markup

+

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in IE8-9 or older versions of Firefox. Internet Explorer 10 and below, as well as Opera 12, do not support animations.

Basic

Default progress bar with a vertical gradient.

@@ -1538,55 +1539,6 @@ </div> -

Striped

-

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

-
-
-
-
-
-
-<div class="progress progress-striped">
-  <div class="progress-bar" style="width: 20%;"></div>
-</div>
-
- -

Animated

-

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

-
-
-
-
-
-
-<div class="progress progress-striped active">
-  <div class="progress-bar" style="width: 40%;"></div>
-</div>
-
- -

Stacked

-

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

-
-
-
-
-
-
-
-
-<div class="progress">
-  <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
-  <div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
-  <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
-</div>
-
- - -
- - -

Options

-

Additional colors

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

@@ -1618,8 +1570,8 @@ </div> -

Striped bars

-

Similar to the solid colors, we have varied striped progress bars.

+

Striped

+

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

@@ -1649,13 +1601,35 @@ </div> +

Animated

+

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

+
+
+
+
+
+
+<div class="progress progress-striped active">
+  <div class="progress-bar" style="width: 40%;"></div>
+</div>
+
-
- - -

Browser support

-

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE8-9 or older versions of Firefox.

-

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

+

Stacked

+

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

+
+
+
+
+
+
+
+
+<div class="progress">
+  <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
+  <div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
+  <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
+</div>
+
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 18b1c4812a..c714bf70f6 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1454,8 +1454,9 @@

Progress bars

+

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

-

Examples and markup

+

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in IE8-9 or older versions of Firefox. Internet Explorer 10 and below, as well as Opera 12, do not support animations.

Basic

Default progress bar with a vertical gradient.

@@ -1470,55 +1471,6 @@ </div> -

Striped

-

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

-
-
-
-
-
-
-<div class="progress progress-striped">
-  <div class="progress-bar" style="width: 20%;"></div>
-</div>
-
- -

Animated

-

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

-
-
-
-
-
-
-<div class="progress progress-striped active">
-  <div class="progress-bar" style="width: 40%;"></div>
-</div>
-
- -

Stacked

-

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

-
-
-
-
-
-
-
-
-<div class="progress">
-  <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
-  <div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
-  <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
-</div>
-
- - -
- - -

Options

-

Additional colors

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

@@ -1550,8 +1502,8 @@ </div> -

Striped bars

-

Similar to the solid colors, we have varied striped progress bars.

+

Striped

+

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

@@ -1581,13 +1533,35 @@ </div> +

Animated

+

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

+
+
+
+
+
+
+<div class="progress progress-striped active">
+  <div class="progress-bar" style="width: 40%;"></div>
+</div>
+
-
- - -

Browser support

-

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE8-9 or older versions of Firefox.

-

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

+

Stacked

+

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

+
+
+
+
+
+
+
+
+<div class="progress">
+  <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
+  <div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
+  <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
+</div>
+