rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

pygmentize the rest of the css page

Browse Source
This commit is contained in:
Mark Otto 2013-02-14 16:43:50 -08:00
parent edfee83ac2
commit 0ff7fb0d05
1 changed files with 461 additions and 453 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

914
docs/css.html
View File

@ -556,20 +556,19 @@ title: CSS
<div class="bs-docs-example"> <div class="bs-docs-example">
For example, <code>&lt;section&gt;</code> should be wrapped as inline. For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
<pre class="prettyprint linenums"> {% highlight html linenos %}
For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped as inline. For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</pre> {% endhighlight %}
<h2>Basic block</h2> <h2>Basic block</h2>
<p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p> <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre> <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
</div> </div>
<pre class="prettyprint linenums" style="margin-bottom: 9px;"> {% highlight html linenos %}
&lt;pre&gt; <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
&amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt; {% endhighlight %}
&lt;/pre&gt;
</pre>
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p> <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
</section> </section>
@ -583,7 +582,7 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</div> </div>
<h2>Default styles</h2> <h2>Default styles</h2>
<p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>.</p> <p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<table class="table"> <table class="table">
<thead> <thead>
@ -616,11 +615,11 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</tbody> </tbody>
</table> </table>
</div><!-- /example --> </div><!-- /example -->
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;table class="table"&gt; <table class="table">
… ...
&lt;/table&gt; </table>
</pre> {% endhighlight %}
<h2>Optional classes</h2> <h2>Optional classes</h2>
@ -660,11 +659,11 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</tbody> </tbody>
</table> </table>
</div><!-- /example --> </div><!-- /example -->
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> {% highlight html linenos %}
&lt;table class="table table-striped"&gt; <table class="table table-striped">
… ...
&lt;/table&gt; </table>
</pre> {% endhighlight %}
<h3><code>.table-bordered</code></h3> <h3><code>.table-bordered</code></h3>
<p>Add borders and rounded corners to the table.</p> <p>Add borders and rounded corners to the table.</p>
@ -704,11 +703,11 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</tbody> </tbody>
</table> </table>
</div><!-- /example --> </div><!-- /example -->
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;table class="table table-bordered"&gt; <table class="table table-bordered">
… ...
&lt;/table&gt; </table>
</pre> {% endhighlight %}
<h3><code>.table-hover</code></h3> <h3><code>.table-hover</code></h3>
<p>Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p> <p>Enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
@ -743,11 +742,12 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</tbody> </tbody>
</table> </table>
</div><!-- /example --> </div><!-- /example -->
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> {% highlight html linenos %}
&lt;table class="table table-hover"&gt; <table class="table table-hover">
… ...
&lt;/table&gt; </table>
</pre> {% endhighlight %}
<h3><code>.table-condensed</code></h3> <h3><code>.table-condensed</code></h3>
<p>Makes tables more compact by cutting cell padding in half.</p> <p>Makes tables more compact by cutting cell padding in half.</p>
@ -782,11 +782,12 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</tbody> </tbody>
</table> </table>
</div><!-- /example --> </div><!-- /example -->
<pre class="prettyprint linenums" style="margin-bottom: 18px;"> {% highlight html linenos %}
&lt;table class="table table-condensed"&gt; <table class="table table-condensed">
… ...
&lt;/table&gt; </table>
</pre> {% endhighlight %}
<h2>Optional row classes</h2> <h2>Optional row classes</h2>
@ -858,25 +859,20 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<td>03/04/2012</td> <td>03/04/2012</td>
<td>Pending</td> <td>Pending</td>
</tr> </tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody> </tbody>
</table> </table>
</div><!-- /example --> </div><!-- /example -->
<pre class="prettyprint linenums"> {% highlight html linenos %}
... ...
&lt;tr class="success"&gt; <tr class="sucess">
&lt;td&gt;1&lt;/td&gt; <td>1</td>
&lt;td&gt;TB - Monthly&lt;/td&gt; <td>TB - Monthly</td>
&lt;td&gt;01/04/2012&lt;/td&gt; <td>01/04/2012</td>
&lt;td&gt;Approved&lt;/td&gt; <td>Approved</td>
&lt;/tr&gt; </tr>
... ...
</pre> {% endhighlight %}
<h2>Supported table markup</h2> <h2>Supported table markup</h2>
@ -951,23 +947,25 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</tr> </tr>
</tbody> </tbody>
</table> </table>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;table&gt; <table>
&lt;caption&gt;...&lt;/caption&gt; <caption>...</caption>
&lt;thead&gt; <thead>
&lt;tr&gt; <tr>
&lt;th&gt;...&lt;/th&gt; <th>...</th>
&lt;th&gt;...&lt;/th&gt; <th>...</th>
&lt;/tr&gt; <th>...</th>
&lt;/thead&gt; </tr>
&lt;tbody&gt; </thead>
&lt;tr&gt; <tbody>
&lt;td&gt;...&lt;/td&gt; <tr>
&lt;td&gt;...&lt;/td&gt; <td>...</td>
&lt;/tr&gt; <td>...</td>
&lt;/tbody&gt; <td>...</td>
&lt;/table&gt; </tr>
</pre> </tbody>
</table>
{% endhighlight %}
</section> </section>
@ -996,22 +994,22 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<button type="submit" class="btn">Submit</button> <button type="submit" class="btn">Submit</button>
</fieldset> </fieldset>
</form><!-- /example --> </form><!-- /example -->
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;form&gt; <form>
&lt;fieldset&gt; <fieldset>
&lt;legend&gt;Legend&lt;/legend&gt; <legend>Legend</legend>
&lt;label&gt;Label name&lt;/label&gt; <label>Label name</label>
&lt;input type="text" placeholder="Type something…"&gt; <input type="text" placeholder="Type something…">
&lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt; <p class="help-block">Example block-level help text here.</p>
&lt;div class="checkbox"&gt; <div class="checkbox">
&lt;label&gt; <label>
&lt;input type="checkbox"&gt; Check me out <input type="checkbox"> Check me out
&lt;/label&gt; </label>
&lt;/div&gt; </div>
&lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt; <button type="submit" class="btn">Submit</button>
&lt;/fieldset&gt; </fieldset>
&lt;/form&gt; </form>
</pre> {% endhighlight %}
<h2 id="forms-layouts">Optional layouts</h2> <h2 id="forms-layouts">Optional layouts</h2>
@ -1029,18 +1027,18 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</div> </div>
<button type="submit" class="btn">Sign in</button> <button type="submit" class="btn">Sign in</button>
</form><!-- /example --> </form><!-- /example -->
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;form class="form-inline"&gt; <form class="form-inline">
&lt;input type="text" class="span3" placeholder="Email"&gt; <input type="text" class="span3" placeholder="Email">
&lt;input type="password" class="span3" placeholder="Password"&gt; <input type="password" class="span3" placeholder="Password">
&lt;div class="checkbox"&gt; <div class="checkbox">
&lt;label&gt; <label>
&lt;input type="checkbox"&gt; Remember me <input type="checkbox"> Remember me
&lt;/label&gt; </label>
&lt;/div&gt; </div>
&lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt; <button type="submit" class="btn">Sign in</button>
&lt;/form&gt; </form>
</pre> {% endhighlight %}
<h3>Horizontal form</h3> <h3>Horizontal form</h3>
<p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p> <p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
@ -1074,32 +1072,32 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</div> </div>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;form class="form-horizontal"&gt; <form class="form-horizontal">
&lt;div class="control-group"&gt; <div class="control-group">
&lt;label class="control-label" for="inputEmail"&gt;Email&lt;/label&gt; <label class="control-label" for="inputEmail">Email</label>
&lt;div class="controls"&gt; <div class="controls">
&lt;input type="text" id="inputEmail" placeholder="Email"&gt; <input type="text" id="inputEmail" placeholder="Email">
&lt;/div&gt; </div>
&lt;/div&gt; </div>
&lt;div class="control-group"&gt; <div class="control-group">
&lt;label class="control-label" for="inputPassword"&gt;Password&lt;/label&gt; <label class="control-label" for="inputPassword">Password</label>
&lt;div class="controls"&gt; <div class="controls">
&lt;input type="password" id="inputPassword" placeholder="Password"&gt; <input type="password" id="inputPassword" placeholder="Password">
&lt;/div&gt; <div class="checkbox">
&lt;/div&gt; <label>
&lt;div class="control-group"&gt; <input type="checkbox"> Remember me
&lt;div class="controls"&gt; </label>
&lt;div class="checkbox"&gt; </div>
&lt;label&gt; </div>
&lt;input type="checkbox"&gt; Remember me </div>
&lt;/label&gt; <div class="control-group">
&lt;/div&gt; <div class="controls">
&lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt; <button type="submit" class="btn">Sign in</button>
&lt;/div&gt; </div>
&lt;/div&gt; </div>
&lt;/form&gt; </form>
</pre> {% endhighlight %}
<h2 id="forms-controls">Supported form controls</h2> <h2 id="forms-controls">Supported form controls</h2>
@ -1111,18 +1109,18 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input type="text" placeholder="Text input"> <input type="text" placeholder="Text input">
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;input type="text" placeholder="Text input"&gt; <input type="text" placeholder="Text input">
</pre> {% endhighlight %}
<h3>Textarea</h3> <h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p> <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<textarea rows="3"></textarea> <textarea rows="3"></textarea>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;textarea rows="3"&gt;&lt;/textarea&gt; <textarea rows="3"></textarea>
</pre> {% endhighlight %}
<h3>Checkboxes and radios</h3> <h3>Checkboxes and radios</h3>
<p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p> <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
@ -1148,27 +1146,21 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</label> </label>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;div class="checkbox"&gt; <div class="checkbox">
&lt;label&gt; <label>
&lt;input type="checkbox" value=""&gt; <input type="checkbox" value="">
Option one is this and that&mdash;be sure to include why it's great Option one is this and that&mdash;be sure to include why it's great
&lt;/label&gt; </label>
&lt;/div&gt; </div>
&lt;div class="radio"&gt; <div class="radio">
&lt;label&gt; <label>
&lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&gt; <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great Option one is this and that&mdash;be sure to include why it's great
&lt;/label&gt; </label>
&lt;/div&gt; </div>
&lt;div class="radio"&gt; {% endhighlight %}
&lt;label&gt;
&lt;input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&gt;
Option two can be something else and selecting it will deselect option one
&lt;/label&gt;
&lt;/div&gt;
</pre>
<h4>Inline checkboxes</h4> <h4>Inline checkboxes</h4>
<p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p> <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
@ -1183,17 +1175,17 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3 <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label> </label>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;label class="checkbox-inline"&gt; <label class="checkbox-inline">
&lt;input type="checkbox" id="inlineCheckbox1" value="option1"&gt; 1 <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
&lt;/label&gt; </label>
&lt;label class="checkbox-inline"&gt; <label class="checkbox-inline">
&lt;input type="checkbox" id="inlineCheckbox2" value="option2"&gt; 2 <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
&lt;/label&gt; </label>
&lt;label class="checkbox-inline"&gt; <label class="checkbox-inline">
&lt;input type="checkbox" id="inlineCheckbox3" value="option3"&gt; 3 <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
&lt;/label&gt; </label>
</pre> {% endhighlight %}
<h3>Selects</h3> <h3>Selects</h3>
<p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p> <p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
@ -1214,23 +1206,23 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<option>5</option> <option>5</option>
</select> </select>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;select&gt; <select>
&lt;option&gt;1&lt;/option&gt; <option>1</option>
&lt;option&gt;2&lt;/option&gt; <option>2</option>
&lt;option&gt;3&lt;/option&gt; <option>3</option>
&lt;option&gt;4&lt;/option&gt; <option>4</option>
&lt;option&gt;5&lt;/option&gt; <option>5</option>
&lt;/select&gt; </select>
&lt;select multiple="multiple"&gt; <select multiple="multiple">
&lt;option&gt;1&lt;/option&gt; <option>1</option>
&lt;option&gt;2&lt;/option&gt; <option>2</option>
&lt;option&gt;3&lt;/option&gt; <option>3</option>
&lt;option&gt;4&lt;/option&gt; <option>4</option>
&lt;option&gt;5&lt;/option&gt; <option>5</option>
&lt;/select&gt; </select>
</pre> {% endhighlight %}
@ -1242,9 +1234,9 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input class="focused" id="focusedInput" type="text" value="This is focused..."> <input class="focused" id="focusedInput" type="text" value="This is focused...">
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;input id="focusedInput" type="text" value="This is focused..."&gt; <input id="focusedInput" type="text" value="This is focused...">
</pre> {% endhighlight %}
<h3 id="forms-invalid-inputs">Invalid inputs</h3> <h3 id="forms-invalid-inputs">Invalid inputs</h3>
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p> <p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
@ -1252,18 +1244,18 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input class="span3" type="email" placeholder="test@example.com" required> <input class="span3" type="email" placeholder="test@example.com" required>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;input class="span3" type="email" required&gt; <input class="span3" type="email" placeholder="test@example.com" required>
</pre> {% endhighlight %}
<h3 id="forms-disabled-inputs">Disabled inputs</h3> <h3 id="forms-disabled-inputs">Disabled inputs</h3>
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p> <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt; <input id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
</pre> {% endhighlight %}
<h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3> <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
<p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p> <p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once. Link buttons (with the <code>&lt;a&gt;</code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
@ -1285,22 +1277,26 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</fieldset> </fieldset>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;form class="form-inline"&gt; <form class="form-inline">
&lt;fieldset disabled&gt; <fieldset disabled>
&lt;input type="text" class="span4" placeholder="Disabled input"&gt; <div>
&lt;select class="span4"&gt; <input type="text" class="span4" placeholder="Disabled input">
&lt;option&gt;Disabled select&lt;/option&gt; </div>
&lt;/select&gt; <div>
&lt;div class="checkbox"&gt; <select class="span4">
&lt;label&gt; <option>Disabled select</option>
&lt;input type="checkbox"&gt; Can't check this </select>
&lt;/label&gt; </div>
&lt;/div&gt; <div class="checkbox">
&lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt; <label>
&lt;/fieldset&gt; <input type="checkbox"> Can't check this
&lt;/form&gt; </label>
</pre> </div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
{% endhighlight %}
<h3 id="forms-validation">Validation states</h3> <h3 id="forms-validation">Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p> <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
@ -1330,26 +1326,26 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</div> </div>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;div class="control-group has-warning"&gt; <div class="control-group has-warning">
&lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt; <label class="control-label" for="inputWarning">Input with warning</label>
&lt;div class="controls"&gt; <div class="controls">
&lt;input type="text" class="input-with-feedback" id="inputWarning"&gt; <input type="text" class="input-with-feedback" id="inputWarning">
&lt;/div&gt; </div>
&lt;/div&gt; </div>
&lt;div class="control-group has-error"&gt; <div class="control-group has-error">
&lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt; <label class="control-label" for="inputError">Input with error</label>
&lt;div class="controls"&gt; <div class="controls">
&lt;input type="text" class="input-with-feedback" id="inputError"&gt; <input type="text" class="input-with-feedback" id="inputError">
&lt;/div&gt; </div>
&lt;/div&gt; </div>
&lt;div class="control-group has-success"&gt; <div class="control-group has-success">
&lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt; <label class="control-label" for="inputSuccess">Input with success</label>
&lt;div class="controls"&gt; <div class="controls">
&lt;input type="text" class="input-with-feedback id="inputSuccess""&gt; <input type="text" class="input-with-feedback" id="inputSuccess">
&lt;/div&gt; </div>
&lt;/div&gt; </div>
</pre> {% endhighlight %}
@ -1376,23 +1372,23 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;div class="input-group span9"&gt; <div class="input-group span9">
&lt;span class="input-group-addon"&gt;@&lt;/span&gt; <span class="input-group-addon">@</span>
&lt;input type="text" placeholder="Username"&gt; <input type="text" placeholder="Username">
&lt;/div&gt; </div>
&lt;div class="input-group span6"&gt; <div class="input-group span6">
&lt;input type="text"&gt; <input type="text">
&lt;span class="input-group-addon"&gt;.00&lt;/span&gt; <span class="input-group-addon">.00</span>
&lt;/div&gt; </div>
&lt;div class="input-group span3"&gt; <div class="input-group span3">
&lt;span class="input-group-addon"&gt;$&lt;/span&gt; <span class="input-group-addon">$</span>
&lt;input type="text"&gt; <input type="text">
&lt;span class="input-group-addon"&gt;.00&lt;/span&gt; <span class="input-group-addon">.00</span>
&lt;/div&gt; </div>
</pre> {% endhighlight %}
<h4>Optional sizes</h4> <h4>Optional sizes</h4>
<p>Add the relative form sizing classes to the `.input-group-addon`.</p> <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
@ -1412,20 +1408,22 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<input type="text" class="input-small" placeholder="Username"> <input type="text" class="input-small" placeholder="Username">
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;div class="input-group span9"&gt; <div class="input-group span9">
&lt;span class="input-group-addon input-large"&gt;@&lt;/span&gt; <span class="input-group-addon input-large">@</span>
&lt;input type="text" class="input-large" placeholder="Username"&gt; <input type="text" class="input-large" placeholder="Username">
&lt;/div&gt; </div>
&lt;div class="input-group span9"&gt;
&lt;span class="input-group-addon"&gt;@&lt;/span&gt; <div class="input-group span9">
&lt;input type="text" placeholder="Username"&gt; <span class="input-group-addon">@</span>
&lt;/div&gt; <input type="text" placeholder="Username">
&lt;div class="input-group span9"&gt; </div>
&lt;span class="input-group-addon input-small"&gt;@&lt;/span&gt;
&lt;input type="text" class="input-small" placeholder="Username"&gt; <div class="input-group span9">
&lt;/div&gt; <span class="input-group-addon input-small">@</span>
</pre> <input type="text" class="input-small" placeholder="Username">
</div>
{% endhighlight %}
<h4>Buttons instead of text</h4> <h4>Buttons instead of text</h4>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
@ -1444,21 +1442,21 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</span> </span>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;div class="input-group span7"&gt; <div class="input-group span7">
&lt;span class="input-group-btn"&gt; <span class="input-group-btn">
&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt; <button class="btn" type="button">Go!</button>
&lt;/span&gt; </span>
&lt;input type="text"&gt; <input type="text">
&lt;/div&gt; </div>
&lt;div class="input-group span7"&gt; <div class="input-group span7">
&lt;input type="text"&gt; <input type="text">
&lt;span class="input-group-btn"&gt; <span class="input-group-btn">
&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt; <button class="btn" type="button">Go!</button>
&lt;/span&gt; </span>
&lt;/div&gt; </div>
</pre> {% endhighlight %}
<h4>Button dropdowns</h4> <h4>Button dropdowns</h4>
<p></p> <p></p>
@ -1491,33 +1489,35 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</div><!-- /btn-group --> </div><!-- /btn-group -->
</div><!-- /input-group --> </div><!-- /input-group -->
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;div class="input-group span7"&gt; <div class="input-group span7">
&lt;div class="input-group-btn btn-group"&gt; <div class="input-group-btn btn-group">
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt; <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
Action <ul class="dropdown-menu">
&lt;span class="caret"&gt;&lt;/span&gt; <li><a href="#">Action</a></li>
&lt;/button&gt; <li><a href="#">Another action</a></li>
&lt;ul class="dropdown-menu"&gt; <li><a href="#">Something else here</a></li>
... <li class="divider"></li>
&lt;/ul&gt; <li><a href="#">Separated link</a></li>
&lt;/div&gt; </ul>
&lt;input type="text"&gt; </div><!-- /btn-group -->
&lt;/div&gt; <input type="text">
</div><!-- /input-group -->
&lt;div class="input-group span7"&gt; <div class="input-group span7">
&lt;input type="text"&gt; <input type="text">
&lt;div class="input-group-btn btn-group"&gt; <div class="input-group-btn btn-group">
&lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt; <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
Action <ul class="dropdown-menu">
&lt;span class="caret"&gt;&lt;/span&gt; <li><a href="#">Action</a></li>
&lt;/button&gt; <li><a href="#">Another action</a></li>
&lt;ul class="dropdown-menu"&gt; <li><a href="#">Something else here</a></li>
... <li class="divider"></li>
&lt;/ul&gt; <li><a href="#">Separated link</a></li>
&lt;/div&gt; </ul>
&lt;/div&gt; </div><!-- /btn-group -->
</pre> </div><!-- /input-group -->
{% endhighlight %}
<h4>Segmented dropdown groups</h4> <h4>Segmented dropdown groups</h4>
<form class="bs-docs-example"> <form class="bs-docs-example">
@ -1535,7 +1535,7 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<li><a href="#">Separated link</a></li> <li><a href="#">Separated link</a></li>
</ul> </ul>
</div> </div>
<input type="text" class="span3"> <input type="text">
</div> </div>
<br> <br>
@ -1557,16 +1557,21 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</div> </div>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;div class="input-prepend"&gt; <div class="input-group span7">
&lt;div class="btn-group"&gt;...&lt;/div&gt; <div class="input-group-btn btn-group">
&lt;input type="text" class="span3"&gt; <!-- Button and dropdown menu -->
&lt;/div&gt; </div>
&lt;div class="input-append"&gt; <input type="text">
&lt;input type="text" class="span3"&gt; </div>
&lt;div class="btn-group"&gt;...&lt;/div&gt;
&lt;/div&gt; <div class="input-group span7">
</pre> <input type="text">
<div class="input-group-btn btn-group">
<!-- Button and dropdown menu -->
</div>
</div>
{% endhighlight %}
<h3 id="forms-extending-sizes">Control sizing</h3> <h3 id="forms-extending-sizes">Control sizing</h3>
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p> <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
@ -1580,11 +1585,11 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<input class="input-small" type="text" placeholder=".input-small"> <input class="input-small" type="text" placeholder=".input-small">
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;input class="input-large" type="text" placeholder=".input-large"&gt; <input class="input-large" type="text" placeholder=".input-large">
&lt;input type="text" placeholder="Default input"&gt; <input type="text" placeholder="Default input">
&lt;input class="input-small" type="text" placeholder=".input-small"&gt; <input class="input-small" type="text" placeholder=".input-small">
</pre> {% endhighlight %}
<h4>Column sizing</h4> <h4>Column sizing</h4>
<p>Use <code>.span1</code> to <code>.span12</code> for setting widths on inputs that match Bootstrap's grid system.</p> <p>Use <code>.span1</code> to <code>.span12</code> for setting widths on inputs that match Bootstrap's grid system.</p>
@ -1616,20 +1621,21 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</select> </select>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;input class="span1" type="text" placeholder=".span1"&gt; <input class="span1" type="text" placeholder=".span1">
&lt;input class="span2" type="text" placeholder=".span2"&gt; <input class="span2" type="text" placeholder=".span2">
&lt;input class="span3" type="text" placeholder=".span3"&gt; <input class="span3" type="text" placeholder=".span3">
&lt;select class="span1"&gt; <select class="span1">
... ...
&lt;/select&gt; </select>
&lt;select class="span2"&gt; <select class="span2">
... ...
&lt;/select&gt; </select>
&lt;select class="span3"&gt; <select class="span3">
... ...
&lt;/select&gt; </select>
</pre> {% endhighlight %}
<p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p> <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;"> <form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="row"> <div class="row">
@ -1644,28 +1650,28 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</div> </div>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;div class="row"&gt; <div class="row">
&lt;div class="span4"&gt; <div class="span4">
&lt;input type="text" placeholder=".span4"&gt; <input type="text" placeholder=".span4">
&lt;/div&gt; </div>
&lt;div class="span4"&gt; <div class="span4">
&lt;input type="text" placeholder=".span4"&gt; <input type="text" placeholder=".span4">
&lt;/div&gt; </div>
&lt;div class="span4"&gt; <div class="span4">
&lt;input type="text" placeholder=".span4"&gt; <input type="text" placeholder=".span4">
&lt;/div&gt; </div>
&lt;/div&gt; </div>
</pre> {% endhighlight %}
<h3>Uneditable inputs</h3> <h3>Uneditable inputs</h3>
<p>Present data in a form that's not editable without using actual form markup.</p> <p>Present data in a form that's not editable without using actual form markup.</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<span class="input-xlarge uneditable-input">Some value here</span> <span class="input-xlarge uneditable-input">Some value here</span>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;span class="input-xlarge uneditable-input"&gt;Some value here&lt;/span&gt; <span class="uneditable-input">Some value here</span>
</pre> {% endhighlight %}
<h3>Form actions</h3> <h3>Form actions</h3>
<p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p> <p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
@ -1675,12 +1681,12 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<button type="button" class="btn">Cancel</button> <button type="button" class="btn">Cancel</button>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;div class="form-actions"&gt; <div class="form-actions">
&lt;button type="submit" class="btn btn-primary"&gt;Save changes&lt;/button&gt; <button type="submit" class="btn btn-primary">Save changes</button>
&lt;button type="button" class="btn"&gt;Cancel&lt;/button&gt; <button type="button" class="btn">Cancel</button>
&lt;/div&gt; </div>
</pre> {% endhighlight %}
<h3>Help text</h3> <h3>Help text</h3>
<p>Inline and block level support for help text that appears around form controls.</p> <p>Inline and block level support for help text that appears around form controls.</p>
@ -1688,18 +1694,20 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input type="text"> <span class="help-inline">Inline help text</span> <input type="text"> <span class="help-inline">Inline help text</span>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;input type="text"&gt;&lt;span class="help-inline"&gt;Inline help text&lt;/span&gt; <input type="text">
</pre> <span class="help-inline">Inline help text</span>
{% endhighlight %}
<h4>Block help</h4> <h4>Block help</h4>
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input type="text"> <input type="text">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span> <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;input type="text"&gt;&lt;span class="help-block"&gt;A longer block of help text that breaks onto a new line and may extend beyond one line.&lt;/span&gt; <input type="text">
</pre> <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
{% endhighlight %}
</section> </section>
@ -1785,24 +1793,25 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<button type="button" class="btn btn-mini">Mini button</button> <button type="button" class="btn btn-mini">Mini button</button>
</p> </p>
</div> </div>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;p&gt; <p>
&lt;button class="btn btn-large btn-primary" type="button"&gt;Large button&lt;/button&gt; <button type="button" class="btn btn-large btn-primary">Large button</button>
&lt;button class="btn btn-large" type="button"&gt;Large button&lt;/button&gt; <button type="button" class="btn btn-large">Large button</button>
&lt;/p&gt; </p>
&lt;p&gt; <p>
&lt;button class="btn btn-primary" type="button"&gt;Default button&lt;/button&gt; <button type="button" class="btn btn-primary">Default button</button>
&lt;button class="btn" type="button"&gt;Default button&lt;/button&gt; <button type="button" class="btn">Default button</button>
&lt;/p&gt; </p>
&lt;p&gt; <p>
&lt;button class="btn btn-small btn-primary" type="button"&gt;Small button&lt;/button&gt; <button type="button" class="btn btn-small btn-primary">Small button</button>
&lt;button class="btn btn-small" type="button"&gt;Small button&lt;/button&gt; <button type="button" class="btn btn-small">Small button</button>
&lt;/p&gt; </p>
&lt;p&gt; <p>
&lt;button class="btn btn-mini btn-primary" type="button"&gt;Mini button&lt;/button&gt; <button type="button" class="btn btn-mini btn-primary">Mini button</button>
&lt;button class="btn btn-mini" type="button"&gt;Mini button&lt;/button&gt; <button type="button" class="btn btn-mini">Mini button</button>
&lt;/p&gt; </p>
</pre> {% endhighlight %}
<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p> <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;"> <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
@ -1810,40 +1819,40 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<button type="button" class="btn btn-large btn-block">Block level button</button> <button type="button" class="btn btn-large btn-block">Block level button</button>
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;button class="btn btn-large btn-block btn-primary" type="button"&gt;Block level button&lt;/button&gt; <button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
&lt;button class="btn btn-large btn-block" type="button"&gt;Block level button&lt;/button&gt; <button type="button" class="btn btn-large btn-block">Block level button</button>
</pre> {% endhighlight %}
<h2>Disabled state</h2> <h2>Disabled state</h2>
<p>Make buttons look unclickable by fading them back 50%.</p> <p>Make buttons look unclickable by fading them back 50%.</p>
<h3>Button element</h3>
<p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
<p class="bs-docs-example">
<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled="disabled">Button</button>
</p>
{% highlight html linenos %}
<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled="disabled">Button</button>
{% endhighlight %}
<h3>Anchor element</h3> <h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p> <p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
<p class="bs-docs-example"> <p class="bs-docs-example">
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a> <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a> <a href="#" class="btn btn-large disabled">Link</a>
</p> </p>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;a href="#" class="btn btn-large btn-primary disabled"&gt;Primary link&lt;/a&gt; <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
&lt;a href="#" class="btn btn-large disabled"&gt;Link&lt;/a&gt; <a href="#" class="btn btn-large disabled">Link</a>
</pre> {% endhighlight %}
<p> <p>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here. We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
</p> </p>
<h3>Button element</h3>
<p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
<p class="bs-docs-example">
<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled>Button</button>
</p>
<pre class="prettyprint linenums">
&lt;button type="button" class="btn btn-large btn-primary disabled" disabled="disabled"&gt;Primary button&lt;/button&gt;
&lt;button type="button" class="btn btn-large" disabled&gt;Button&lt;/button&gt;
</pre>
<h2>One class, multiple tags</h2> <h2>One class, multiple tags</h2>
<p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p> <p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
@ -1853,13 +1862,13 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<input class="btn" type="button" value="Input"> <input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit"> <input class="btn" type="submit" value="Submit">
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;a class="btn" href=""&gt;Link&lt;/a&gt; <a class="btn" href="">Link</a>
&lt;button class="btn" type="submit"&gt;Button&lt;/button&gt; <button class="btn" type="submit">Button</button>
&lt;input class="btn" type="button" value="Input"&gt; <input class="btn" type="button" value="Input">
&lt;input class="btn" type="submit" value="Submit"&gt; <input class="btn" type="submit" value="Submit">
</pre> {% endhighlight %}
<p>As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.</p> <p>As a best practice, <strong>we highly recommend matching using the <code>&lt;button&lt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
</section> </section>
@ -1878,11 +1887,11 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<img data-src="holder.js/140x140" class="img-circle"> <img data-src="holder.js/140x140" class="img-circle">
<img data-src="holder.js/140x140" class="img-thumbnail"> <img data-src="holder.js/140x140" class="img-thumbnail">
</div> </div>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;img src="..." class="img-rounded"&gt; <img src="..." class="img-rounded">
&lt;img src="..." class="img-circle"&gt; <img src="..." class="img-circle">
&lt;img src="..." class="img-thumbnail"&gt; <img src="..." class="img-thumbnail">
</pre> {% endhighlight %}
</section> </section>
@ -2073,9 +2082,9 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<h2>How to use</h2> <h2>How to use</h2>
<p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p> <p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;i class="glyphicon-search"&gt;&lt;/i&gt; <span class="glyphicon-search"></span>
</pre> {% endhighlight %}
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p> <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
<p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p> <p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
@ -2089,87 +2098,86 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="btn-group"> <div class="btn-group">
<a class="btn" href="#"><i class="glyphicon-align-left"></i></a> <a class="btn" href="#"><span class="glyphicon-align-left"></span></a>
<a class="btn" href="#"><i class="glyphicon-align-center"></i></a> <a class="btn" href="#"><span class="glyphicon-align-center"></span></a>
<a class="btn" href="#"><i class="glyphicon-align-right"></i></a> <a class="btn" href="#"><span class="glyphicon-align-right"></span></a>
<a class="btn" href="#"><i class="glyphicon-align-justify"></i></a> <a class="btn" href="#"><span class="glyphicon-align-justify"></span></a>
</div> </div>
</div> </div>
</div><!-- /bs-docs-example --> </div><!-- /bs-docs-example -->
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;div class="btn-toolbar"&gt; <div class="btn-toolbar">
&lt;div class="btn-group"&gt; <div class="btn-group">
<a class="btn" href="#"><span class="glyphicon-align-left"></span></a>
&lt;a class="btn" href="#"&gt;&lt;i class="glyphicon-align-left"&gt;&lt;/i&gt;&lt;/a&gt; <a class="btn" href="#"><span class="glyphicon-align-center"></span></a>
&lt;a class="btn" href="#"&gt;&lt;i class="glyphicon-align-center"&gt;&lt;/i&gt;&lt;/a&gt; <a class="btn" href="#"><span class="glyphicon-align-right"></span></a>
&lt;a class="btn" href="#"&gt;&lt;i class="glyphicon-align-right"&gt;&lt;/i&gt;&lt;/a&gt; <a class="btn" href="#"><span class="glyphicon-align-justify"></span></a>
&lt;a class="btn" href="#"&gt;&lt;i class="glyphicon-align-justify"&gt;&lt;/i&gt;&lt;/a&gt; </div>
&lt;/div&gt; </div>
&lt;/div&gt; {% endhighlight %}
</pre>
<h5>Dropdown in a button group</h5> <h5>Dropdown in a button group</h5>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="btn-group"> <div class="btn-group">
<a class="btn btn-primary" href="#"><i class="glyphicon-user icon-white"></i> User</a> <a class="btn btn-primary" href="#"><i class="glyphicon-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#"><i class="glyphicon-pencil"></i> Edit</a></li> <li><a href="#"><i class="glyphicon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="glyphicon-trash"></i> Delete</a></li> <li><a href="#"><i class="glyphicon-trash"></i> Delete</a></li>
<li><a href="#"><i class="glyphicon-ban-circle"></i> Ban</a></li> <li><a href="#"><i class="glyphicon-ban-circle"></i> Ban</a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li> <li><a href="#"><i class="glyphicon-"></i> Make admin</a></li>
</ul> </ul>
</div> </div>
</div><!-- /bs-docs-example --> </div><!-- /bs-docs-example -->
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;div class="btn-group"&gt; <div class="btn-group">
&lt;a class="btn btn-primary" href="#"&gt;&lt;i class="glyphicon-user icon-white"&gt;&lt;/i&gt; User&lt;/a&gt; <a class="btn btn-primary" href="#"><span class="glyphicon-user"></span> User</a>
&lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt; <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
&lt;ul class="dropdown-menu"&gt; <ul class="dropdown-menu">
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="glyphicon-pencil"&gt;&lt;/i&gt; Edit&lt;/a&gt;&lt;/li&gt; <li><a href="#"><span class="glyphicon-pencil"></span> Edit</a></li>
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="glyphicon-trash"&gt;&lt;/i&gt; Delete&lt;/a&gt;&lt;/li&gt; <li><a href="#"><span class="glyphicon-trash"></span> Delete</a></li>
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="glyphicon-ban-circle"&gt;&lt;/i&gt; Ban&lt;/a&gt;&lt;/li&gt; <li><a href="#"><span class="glyphicon-ban-circle"></span> Ban</a></li>
&lt;li class="divider"&gt;&lt;/li&gt; <li class="divider"></li>
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; Make admin&lt;/a&gt;&lt;/li&gt; <li><a href="#"><span class="glyphicon-"></span> Make admin</a></li>
&lt;/ul&gt; </ul>
&lt;/div&gt; </div>
</pre> {% endhighlight %}
<h5>Large button</h5> <h5>Large button</h5>
<div class="bs-docs-example"> <div class="bs-docs-example">
<a class="btn btn-large" href="#"><i class="glyphicon-star"></i> Star</a> <a class="btn btn-large" href="#"><span class="glyphicon-star"></span> Star</a>
</div><!-- /bs-docs-example --> </div><!-- /bs-docs-example -->
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;a class="btn btn-large" href="#"&gt;&lt;i class="glyphicon-star"&gt;&lt;/i&gt; Star&lt;/a&gt; <a class="btn btn-large" href="#"><span class="glyphicon-star"></span> Star</a>
</pre> {% endhighlight %}
<h5>Small button</h5> <h5>Small button</h5>
<div class="bs-docs-example"> <div class="bs-docs-example">
<a class="btn btn-small" href="#"><i class="glyphicon-star"></i></a> <a class="btn btn-small" href="#"><span class="glyphicon-star"></span></a>
</div><!-- /bs-docs-example --> </div><!-- /bs-docs-example -->
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;a class="btn btn-small" href="#"&gt;&lt;i class="glyphicon-star"&gt;&lt;/i&gt;&lt;/a&gt; <a class="btn btn-small" href="#"><span class="glyphicon-star"></span></a>
</pre> {% endhighlight %}
<h4>Navigation</h4> <h4>Navigation</h4>
<div class="bs-docs-example"> <div class="bs-docs-example">
<ul class="nav nav-list"> <ul class="nav nav-list">
<li class="active"><a href="#"><i class="glyphicon-home icon-white"></i> Home</a></li> <li class="active"><a href="#"><span class="glyphicon-home"></span> Home</a></li>
<li><a href="#"><i class="glyphicon-book"></i> Library</a></li> <li><a href="#"><span class="glyphicon-book"></span> Library</a></li>
<li><a href="#"><i class="glyphicon-pencil"></i> Applications</a></li> <li><a href="#"><span class="glyphicon-pencil"></span> Applications</a></li>
<li><a href="#"><i class="i"></i> Misc</a></li> <li><a href="#"><span class="glyphicon-"></span> Misc</a></li>
</ul> </ul>
</div><!-- /bs-docs-example --> </div><!-- /bs-docs-example -->
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;ul class="nav nav-list"&gt; <ul class="nav nav-list">
&lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="glyphicon-home icon-white"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt; <li class="active"><a href="#"><span class="glyphicon-home"></span> Home</a></li>
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="glyphicon-book"&gt;&lt;/i&gt; Library&lt;/a&gt;&lt;/li&gt; <li><a href="#"><span class="glyphicon-book"></span> Library</a></li>
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="glyphicon-pencil"&gt;&lt;/i&gt; Applications&lt;/a&gt;&lt;/li&gt; <li><a href="#"><span class="glyphicon-pencil"></span> Applications</a></li>
&lt;li&gt;&lt;a href="#"&gt;&lt;i class="i"&gt;&lt;/i&gt; Misc&lt;/a&gt;&lt;/li&gt; <li><a href="#"><span class="glyphicon-"></span> Misc</a></li>
&lt;/ul&gt; </ul>
</pre> {% endhighlight %}
<h4>Form fields</h4> <h4>Form fields</h4>
<form class="bs-docs-example form-horizontal"> <form class="bs-docs-example form-horizontal">
@ -2177,23 +2185,23 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<label class="control-label" for="inputIcon">Email address</label> <label class="control-label" for="inputIcon">Email address</label>
<div class="controls"> <div class="controls">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon"><i class="glyphicon-envelope"></i></span> <span class="input-group-addon"><span class="glyphicon-envelope"></span></span>
<input class="span2" id="inputIcon" type="text"> <input class="span2" id="inputIcon" type="text">
</div> </div>
</div> </div>
</div> </div>
</form> </form>
<pre class="prettyprint linenums"> {% highlight html linenos %}
&lt;div class="control-group"&gt; <div class="control-group">
&lt;label class="control-label" for="inputIcon"&gt;Email address&lt;/label&gt; <label class="control-label" for="inputIcon">Email address</label>
&lt;div class="controls"&gt; <div class="controls">
&lt;div class="input-group"&gt; <div class="input-group">
&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon-envelope"&gt;&lt;/i&gt;&lt;/span&gt; <span class="input-group-addon"><span class="glyphicon-envelope"></span></span>
&lt;input class="span2" id="inputIcon" type="text"&gt; <input class="span2" id="inputIcon" type="text">
&lt;/div&gt; </div>
&lt;/div&gt; </div>
&lt;/div&gt; </div>
</pre> {% endhighlight %}
</section> </section>