Skip to content

B
bootstrap
Commit b65293de authored by Mark Otto's avatar Mark Otto
Browse files
Options

reorganize progress bars docs

parent 3949623e
Show whitespace changes
Inline Side-by-side
Showing with 64 additions and 116 deletions
docs/components.html
View file @ b65293de
...@@ -1522,8 +1522,9 @@ ...@@ -1522,8 +1522,9 @@
<div class="page-header"> <div class="page-header">
<h1>Progress bars</h1> <h1>Progress bars</h1>
</div> </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> <h3>Basic</h3>
<p>Default progress bar with a vertical gradient.</p> <p>Default progress bar with a vertical gradient.</p>
...@@ -1538,55 +1539,6 @@ ...@@ -1538,55 +1539,6 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </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">
&lt;div class="progress progress-striped"&gt;
&lt;div class="progress-bar" style="width: 20%;"&gt;&lt;/div&gt;
&lt;/div&gt;
</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">
&lt;div class="progress progress-striped active"&gt;
&lt;div class="progress-bar" style="width: 40%;"&gt;&lt;/div&gt;
&lt;/div&gt;
</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">
&lt;div class="progress"&gt;
&lt;div class="progress-bar progress-bar-success" style="width: 35%;"&gt;&lt;/div&gt;
&lt;div class="progress-bar progress-bar-warning" style="width: 20%;"&gt;&lt;/div&gt;
&lt;div class="progress-bar progress-bar-danger" style="width: 10%;"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
<hr class="bs-docs-separator">
<h2>Options</h2>
<h3>Additional colors</h3> <h3>Additional colors</h3>
<p>Progress bars use some of the same button and alert classes for consistent styles.</p> <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
...@@ -1618,8 +1570,8 @@ ...@@ -1618,8 +1570,8 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h3>Striped bars</h3> <h3>Striped</h3>
<p>Similar to the solid colors, we have varied striped progress bars.</p> <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-info" style="width: 20%"></div> <div class="progress-bar progress-bar-info" style="width: 20%"></div>
...@@ -1649,13 +1601,35 @@ ...@@ -1649,13 +1601,35 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </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">
&lt;div class="progress progress-striped active"&gt;
&lt;div class="progress-bar" style="width: 40%;"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
<hr class="bs-docs-separator"> <h3>Stacked</h3>
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
<div class="bs-docs-example">
<h2>Browser support</h2> <div class="progress">
<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> <div class="progress-bar progress-bar-success" style="width: 35%"></div>
<p>Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.</p> <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">
&lt;div class="progress"&gt;
&lt;div class="progress-bar progress-bar-success" style="width: 35%;"&gt;&lt;/div&gt;
&lt;div class="progress-bar progress-bar-warning" style="width: 20%;"&gt;&lt;/div&gt;
&lt;div class="progress-bar progress-bar-danger" style="width: 10%;"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</section> </section>
......
docs/templates/pages/components.mustache
View file @ b65293de
...@@ -1454,8 +1454,9 @@ ...@@ -1454,8 +1454,9 @@
<div class="page-header"> <div class="page-header">
<h1>Progress bars</h1> <h1>Progress bars</h1>
</div> </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> <h3>Basic</h3>
<p>Default progress bar with a vertical gradient.</p> <p>Default progress bar with a vertical gradient.</p>
...@@ -1470,55 +1471,6 @@ ...@@ -1470,55 +1471,6 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </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">
&lt;div class="progress progress-striped"&gt;
&lt;div class="progress-bar" style="width: 20%;"&gt;&lt;/div&gt;
&lt;/div&gt;
</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">
&lt;div class="progress progress-striped active"&gt;
&lt;div class="progress-bar" style="width: 40%;"&gt;&lt;/div&gt;
&lt;/div&gt;
</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">
&lt;div class="progress"&gt;
&lt;div class="progress-bar progress-bar-success" style="width: 35%;"&gt;&lt;/div&gt;
&lt;div class="progress-bar progress-bar-warning" style="width: 20%;"&gt;&lt;/div&gt;
&lt;div class="progress-bar progress-bar-danger" style="width: 10%;"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
<hr class="bs-docs-separator">
<h2>Options</h2>
<h3>Additional colors</h3> <h3>Additional colors</h3>
<p>Progress bars use some of the same button and alert classes for consistent styles.</p> <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
...@@ -1550,8 +1502,8 @@ ...@@ -1550,8 +1502,8 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
<h3>Striped bars</h3> <h3>Striped</h3>
<p>Similar to the solid colors, we have varied striped progress bars.</p> <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-info" style="width: 20%"></div> <div class="progress-bar progress-bar-info" style="width: 20%"></div>
...@@ -1581,13 +1533,35 @@ ...@@ -1581,13 +1533,35 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </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">
&lt;div class="progress progress-striped active"&gt;
&lt;div class="progress-bar" style="width: 40%;"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
<hr class="bs-docs-separator"> <h3>Stacked</h3>
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
<div class="bs-docs-example">
<h2>Browser support</h2> <div class="progress">
<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> <div class="progress-bar progress-bar-success" style="width: 35%"></div>
<p>Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.</p> <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">
&lt;div class="progress"&gt;
&lt;div class="progress-bar progress-bar-success" style="width: 35%;"&gt;&lt;/div&gt;
&lt;div class="progress-bar progress-bar-warning" style="width: 20%;"&gt;&lt;/div&gt;
&lt;div class="progress-bar progress-bar-danger" style="width: 10%;"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</section> </section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment