diff options
| author | Mark Otto <[email protected]> | 2013-02-05 01:11:41 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-02-05 01:11:41 -0800 |
| commit | b65293dec022d88c2b1234b8385b0328547e3959 (patch) | |
| tree | e08037b5d99b179cca246b25e63ea01f023f49de /docs | |
| parent | 3949623eeee7315932f49cd13c5428241b690e9f (diff) | |
| download | bootstrap-b65293dec022d88c2b1234b8385b0328547e3959.tar.xz bootstrap-b65293dec022d88c2b1234b8385b0328547e3959.zip | |
reorganize progress bars docs
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components.html | 90 | ||||
| -rw-r--r-- | docs/templates/pages/components.mustache | 90 |
2 files changed, 64 insertions, 116 deletions
diff --git a/docs/components.html b/docs/components.html index 2198145ec..70900fc3a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1522,8 +1522,9 @@ <div class="page-header"> <h1>Progress bars</h1> </div> + <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p> - <h2>Examples and markup</h2> + <p>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.</p> <h3>Basic</h3> <p>Default progress bar with a vertical gradient.</p> @@ -1538,55 +1539,6 @@ </div> </pre> - <h3>Striped</h3> - <p>Uses a gradient to create a striped effect. Not available in IE8.</p> - <div class="bs-docs-example"> - <div class="progress progress-striped"> - <div class="progress-bar" style="width: 20%;"></div> - </div> - </div> -<pre class="prettyprint linenums"> -<div class="progress progress-striped"> - <div class="progress-bar" style="width: 20%;"></div> -</div> -</pre> - - <h3>Animated</h3> - <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p> - <div class="bs-docs-example"> - <div class="progress progress-striped active"> - <div class="progress-bar" style="width: 45%"></div> - </div> - </div> -<pre class="prettyprint linenums"> -<div class="progress progress-striped active"> - <div class="progress-bar" style="width: 40%;"></div> -</div> -</pre> - - <h3>Stacked</h3> - <p>Place multiple bars into the same <code>.progress</code> to stack them.</p> - <div class="bs-docs-example"> - <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> - </div> -<pre class="prettyprint linenums"> -<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> -</pre> - - - <hr class="bs-docs-separator"> - - - <h2>Options</h2> - <h3>Additional colors</h3> <p>Progress bars use some of the same button and alert classes for consistent styles.</p> <div class="bs-docs-example"> @@ -1618,8 +1570,8 @@ </div> </pre> - <h3>Striped bars</h3> - <p>Similar to the solid colors, we have varied striped progress bars.</p> + <h3>Striped</h3> + <p>Uses a gradient to create a striped effect. Not available in IE8.</p> <div class="bs-docs-example"> <div class="progress progress-striped" style="margin-bottom: 9px;"> <div class="progress-bar progress-bar-info" style="width: 20%"></div> @@ -1649,13 +1601,35 @@ </div> </pre> + <h3>Animated</h3> + <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p> + <div class="bs-docs-example"> + <div class="progress progress-striped active"> + <div class="progress-bar" style="width: 45%"></div> + </div> + </div> +<pre class="prettyprint linenums"> +<div class="progress progress-striped active"> + <div class="progress-bar" style="width: 40%;"></div> +</div> +</pre> - <hr class="bs-docs-separator"> - - - <h2>Browser support</h2> - <p>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.</p> - <p>Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.</p> + <h3>Stacked</h3> + <p>Place multiple bars into the same <code>.progress</code> to stack them.</p> + <div class="bs-docs-example"> + <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> + </div> +<pre class="prettyprint linenums"> +<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> +</pre> </section> diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 18b1c4812..c714bf70f 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -1454,8 +1454,9 @@ <div class="page-header"> <h1>Progress bars</h1> </div> + <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p> - <h2>Examples and markup</h2> + <p>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.</p> <h3>Basic</h3> <p>Default progress bar with a vertical gradient.</p> @@ -1470,55 +1471,6 @@ </div> </pre> - <h3>Striped</h3> - <p>Uses a gradient to create a striped effect. Not available in IE8.</p> - <div class="bs-docs-example"> - <div class="progress progress-striped"> - <div class="progress-bar" style="width: 20%;"></div> - </div> - </div> -<pre class="prettyprint linenums"> -<div class="progress progress-striped"> - <div class="progress-bar" style="width: 20%;"></div> -</div> -</pre> - - <h3>Animated</h3> - <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p> - <div class="bs-docs-example"> - <div class="progress progress-striped active"> - <div class="progress-bar" style="width: 45%"></div> - </div> - </div> -<pre class="prettyprint linenums"> -<div class="progress progress-striped active"> - <div class="progress-bar" style="width: 40%;"></div> -</div> -</pre> - - <h3>Stacked</h3> - <p>Place multiple bars into the same <code>.progress</code> to stack them.</p> - <div class="bs-docs-example"> - <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> - </div> -<pre class="prettyprint linenums"> -<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> -</pre> - - - <hr class="bs-docs-separator"> - - - <h2>Options</h2> - <h3>Additional colors</h3> <p>Progress bars use some of the same button and alert classes for consistent styles.</p> <div class="bs-docs-example"> @@ -1550,8 +1502,8 @@ </div> </pre> - <h3>Striped bars</h3> - <p>Similar to the solid colors, we have varied striped progress bars.</p> + <h3>Striped</h3> + <p>Uses a gradient to create a striped effect. Not available in IE8.</p> <div class="bs-docs-example"> <div class="progress progress-striped" style="margin-bottom: 9px;"> <div class="progress-bar progress-bar-info" style="width: 20%"></div> @@ -1581,13 +1533,35 @@ </div> </pre> + <h3>Animated</h3> + <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p> + <div class="bs-docs-example"> + <div class="progress progress-striped active"> + <div class="progress-bar" style="width: 45%"></div> + </div> + </div> +<pre class="prettyprint linenums"> +<div class="progress progress-striped active"> + <div class="progress-bar" style="width: 40%;"></div> +</div> +</pre> - <hr class="bs-docs-separator"> - - - <h2>Browser support</h2> - <p>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.</p> - <p>Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.</p> + <h3>Stacked</h3> + <p>Place multiple bars into the same <code>.progress</code> to stack them.</p> + <div class="bs-docs-example"> + <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> + </div> +<pre class="prettyprint linenums"> +<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> +</pre> </section> |