rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

finish off rest of base-css page

Browse Source
This commit is contained in:
Mark Otto 2012-06-04 23:03:21 -07:00
parent 060100cf3a
commit 257890f839
2 changed files with 906 additions and 982 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

944
docs/base-css.html
View File

@ -779,29 +779,25 @@ For example, <code>section</code> should be wrapped as inline.
<div class="page-header"> <div class="page-header">
<h1>Forms</h1> <h1>Forms</h1>
</div> </div>
<div class="row">
<div class="span4"> <h2>Flexible HTML and CSS</h2>
<h2>Flexible HTML and CSS</h2> <p>The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.</p>
<p>The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.</p> <p>More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.</p>
<p>More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.</p>
</div> <h2>Four layouts included</h2>
<div class="span4"> <p>Bootstrap comes with support for four types of form layouts:</p>
<h2>Four layouts included</h2> <ul>
<p>Bootstrap comes with support for four types of form layouts:</p> <li>Vertical (default)</li>
<ul> <li>Search</li>
<li>Vertical (default)</li> <li>Inline</li>
<li>Search</li> <li>Horizontal</li>
<li>Inline</li> </ul>
<li>Horizontal</li> <p>Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.</p>
</ul>
<p>Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.</p> <h2>Control states and more</h2>
</div> <p>Bootstrap's forms include styles for all the base form controls like input, textarea, and select you'd expect. But it also comes with a number of custom components like appended and prepended inputs and support for lists of checkboxes.</p>
<div class="span4"> <p>States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.</p>
<h2>Control states and more</h2>
<p>Bootstrap's forms include styles for all the base form controls like input, textarea, and select you'd expect. But it also comes with a number of custom components like appended and prepended inputs and support for lists of checkboxes.</p>
<p>States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.</p>
</div>
</div>
<h2>Four types of forms</h2> <h2>Four types of forms</h2>
<p>Bootstrap provides simple markup and styles for four styles of common web forms.</p> <p>Bootstrap provides simple markup and styles for four styles of common web forms.</p>
@ -839,19 +835,17 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h2>Example forms <small>using just form controls, no extra markup</small></h2> <h2>Example forms <small>using just form controls, no extra markup</small></h2>
<div class="row"> <h3>Basic form</h3>
<div class="span6"> <p>Smart and lightweight defaults without extra markup.</p>
<h3>Basic form</h3> <form class="well">
<p>Smart and lightweight defaults without extra markup.</p> <label>Label name</label>
<form class="well"> <input type="text" class="span3" placeholder="Type something…">
<label>Label name</label> <p class="help-block">Example block-level help text here.</p>
<input type="text" class="span3" placeholder="Type something…"> <label class="checkbox">
<p class="help-block">Example block-level help text here.</p> <input type="checkbox"> Check me out
<label class="checkbox"> </label>
<input type="checkbox"> Check me out <button type="submit" class="btn">Submit</button>
</label> </form>
<button type="submit" class="btn">Submit</button>
</form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="well"&gt; &lt;form class="well"&gt;
&lt;label&gt;Label name&lt;/label&gt; &lt;label&gt;Label name&lt;/label&gt;
@ -863,14 +857,13 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt; &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div>
<div class="span6"> <h3>Search form</h3>
<h3>Search form</h3> <p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.</p>
<p>Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.</p> <form class="well form-search">
<form class="well form-search"> <input type="text" class="input-medium search-query">
<input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button>
<button type="submit" class="btn">Search</button> </form>
</form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="well form-search"&gt; &lt;form class="well form-search"&gt;
&lt;input type="text" class="input-medium search-query"&gt; &lt;input type="text" class="input-medium search-query"&gt;
@ -878,16 +871,16 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
<h3>Inline form</h3> <h3>Inline form</h3>
<p>Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.</p> <p>Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.</p>
<form class="well form-inline"> <form class="well form-inline">
<input type="text" class="input-small" placeholder="Email"> <input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password"> <input type="password" class="input-small" placeholder="Password">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox"> Remember me <input type="checkbox"> Remember me
</label> </label>
<button type="submit" class="btn">Sign in</button> <button type="submit" class="btn">Sign in</button>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="well form-inline"&gt; &lt;form class="well form-inline"&gt;
&lt;input type="text" class="input-small" placeholder="Email"&gt; &lt;input type="text" class="input-small" placeholder="Email"&gt;
@ -898,89 +891,83 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt; &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div><!-- /.span -->
</div><!-- /row -->
<br> <br>
<h2>Horizontal forms</h2> <h2>Horizontal forms</h2>
<div class="row"> <p>Shown on the right are all the default form controls we support. Here's the bulleted list:</p>
<div class="span4"> <ul>
<p></p> <li>text inputs (text, password, email, etc)</li>
<p>Shown on the right are all the default form controls we support. Here's the bulleted list:</p> <li>checkbox</li>
<ul> <li>radio</li>
<li>text inputs (text, password, email, etc)</li> <li>select</li>
<li>checkbox</li> <li>multiple select</li>
<li>radio</li> <li>file input</li>
<li>select</li> <li>textarea</li>
<li>multiple select</li> </ul>
<li>file input</li>
<li>textarea</li> <form class="form-horizontal">
</ul> <fieldset>
</div><!-- /.span --> <div class="control-group">
<div class="span8"> <label class="control-label" for="input01">Text input</label>
<form class="form-horizontal"> <div class="controls">
<fieldset> <input type="text" class="input-xlarge" id="input01">
<div class="control-group"> <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
<label class="control-label" for="input01">Text input</label> </div>
<div class="controls"> </div>
<input type="text" class="input-xlarge" id="input01"> <div class="control-group">
<p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p> <label class="control-label" for="optionsCheckbox">Checkbox</label>
</div> <div class="controls">
</div> <label class="checkbox">
<div class="control-group"> <input type="checkbox" id="optionsCheckbox" value="option1">
<label class="control-label" for="optionsCheckbox">Checkbox</label> Option one is this and that&mdash;be sure to include why it's great
<div class="controls"> </label>
<label class="checkbox"> </div>
<input type="checkbox" id="optionsCheckbox" value="option1"> </div>
Option one is this and that&mdash;be sure to include why it's great <div class="control-group">
</label> <label class="control-label" for="select01">Select list</label>
</div> <div class="controls">
</div> <select id="select01">
<div class="control-group"> <option>something</option>
<label class="control-label" for="select01">Select list</label> <option>2</option>
<div class="controls"> <option>3</option>
<select id="select01"> <option>4</option>
<option>something</option> <option>5</option>
<option>2</option> </select>
<option>3</option> </div>
<option>4</option> </div>
<option>5</option> <div class="control-group">
</select> <label class="control-label" for="multiSelect">Multicon-select</label>
</div> <div class="controls">
</div> <select multiple="multiple" id="multiSelect">
<div class="control-group"> <option>1</option>
<label class="control-label" for="multiSelect">Multicon-select</label> <option>2</option>
<div class="controls"> <option>3</option>
<select multiple="multiple" id="multiSelect"> <option>4</option>
<option>1</option> <option>5</option>
<option>2</option> </select>
<option>3</option> </div>
<option>4</option> </div>
<option>5</option> <div class="control-group">
</select> <label class="control-label" for="fileInput">File input</label>
</div> <div class="controls">
</div> <input class="input-file" id="fileInput" type="file">
<div class="control-group"> </div>
<label class="control-label" for="fileInput">File input</label> </div>
<div class="controls"> <div class="control-group">
<input class="input-file" id="fileInput" type="file"> <label class="control-label" for="textarea">Textarea</label>
</div> <div class="controls">
</div> <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
<div class="control-group"> </div>
<label class="control-label" for="textarea">Textarea</label> </div>
<div class="controls"> <div class="form-actions">
<textarea class="input-xlarge" id="textarea" rows="3"></textarea> <button type="submit" class="btn btn-primary">Save changes</button>
</div> <button class="btn">Cancel</button>
</div> </div>
<div class="form-actions"> </fieldset>
<button type="submit" class="btn btn-primary">Save changes</button> </form>
<button class="btn">Cancel</button> <h3>Example markup</h3>
</div> <p>Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.</p>
</fieldset>
</form>
<h3>Example markup</h3>
<p>Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="form-horizontal"&gt; &lt;form class="form-horizontal"&gt;
&lt;fieldset&gt; &lt;fieldset&gt;
@ -995,253 +982,241 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/fieldset&gt; &lt;/fieldset&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div>
</div>
<br> <br>
<h2>Form control states</h2> <h2>Form control states</h2>
<div class="row"> <p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<div class="span4"> <hr>
<p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p> <h3>Form validation</h3>
<hr> <p>It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.</p>
<h3>Form validation</h3>
<p>It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;fieldset &lt;fieldset
class="control-group error"&gt; class="control-group error"&gt;
… …
&lt;/fieldset&gt; &lt;/fieldset&gt;
</pre> </pre>
</div>
<div class="span8"> <form class="form-horizontal">
<form class="form-horizontal"> <fieldset>
<fieldset> <div class="control-group">
<div class="control-group"> <label class="control-label" for="focusedInput">Focused input</label>
<label class="control-label" for="focusedInput">Focused input</label> <div class="controls">
<div class="controls"> <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
<input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…"> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label">Uneditable input</label>
<label class="control-label">Uneditable input</label> <div class="controls">
<div class="controls"> <span class="input-xlarge uneditable-input">Some value here</span>
<span class="input-xlarge uneditable-input">Some value here</span> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="disabledInput">Disabled input</label>
<label class="control-label" for="disabledInput">Disabled input</label> <div class="controls">
<div class="controls"> <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
<input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
<label class="control-label" for="optionsCheckbox2">Disabled checkbox</label> <div class="controls">
<div class="controls"> <label class="checkbox">
<label class="checkbox"> <input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
<input type="checkbox" id="optionsCheckbox2" value="option1" disabled> This is a disabled checkbox
This is a disabled checkbox </label>
</label> </div>
</div> </div>
</div> <div class="control-group warning">
<div class="control-group warning"> <label class="control-label" for="inputWarning">Input with warning</label>
<label class="control-label" for="inputWarning">Input with warning</label> <div class="controls">
<div class="controls"> <input type="text" id="inputWarning">
<input type="text" id="inputWarning"> <span class="help-inline">Something may have gone wrong</span>
<span class="help-inline">Something may have gone wrong</span> </div>
</div> </div>
</div> <div class="control-group error">
<div class="control-group error"> <label class="control-label" for="inputError">Input with error</label>
<label class="control-label" for="inputError">Input with error</label> <div class="controls">
<div class="controls"> <input type="text" id="inputError">
<input type="text" id="inputError"> <span class="help-inline">Please correct the error</span>
<span class="help-inline">Please correct the error</span> </div>
</div> </div>
</div> <div class="control-group success">
<div class="control-group success"> <label class="control-label" for="inputSuccess">Input with success</label>
<label class="control-label" for="inputSuccess">Input with success</label> <div class="controls">
<div class="controls"> <input type="text" id="inputSuccess">
<input type="text" id="inputSuccess"> <span class="help-inline">Woohoo!</span>
<span class="help-inline">Woohoo!</span> </div>
</div> </div>
</div> <div class="control-group success">
<div class="control-group success"> <label class="control-label" for="selectError">Select with success</label>
<label class="control-label" for="selectError">Select with success</label> <div class="controls">
<div class="controls"> <select id="selectError">
<select id="selectError"> <option>1</option>
<option>1</option> <option>2</option>
<option>2</option> <option>3</option>
<option>3</option> <option>4</option>
<option>4</option> <option>5</option>
<option>5</option> </select>
</select> <span class="help-inline">Woohoo!</span>
<span class="help-inline">Woohoo!</span> </div>
</div> </div>
</div> <div class="form-actions">
<div class="form-actions"> <button type="submit" class="btn btn-primary">Save changes</button>
<button type="submit" class="btn btn-primary">Save changes</button> <button class="btn">Cancel</button>
<button class="btn">Cancel</button> </div>
</div> </fieldset>
</fieldset> </form>
</form>
</div>
</div>
<br> <br>
<h2>Extending form controls</h2> <h2>Extending form controls</h2>
<div class="row"> <h3>Prepend &amp; append inputs</h3>
<div class="span4"> <p>Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p>
<h3>Prepend &amp; append inputs</h3> <hr>
<p>Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p> <h3>Checkboxes and radios</h3>
<hr> <p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.</p>
<h3>Checkboxes and radios</h3> <p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p>
<p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.</p> <hr>
<p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p> <h4>Inline forms and append/prepend</h4>
<hr> <p>To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.</p>
<h4>Inline forms and append/prepend</h4> <hr>
<p>To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.</p> <h4>Form help text</h4>
<hr> <p>To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.</p>
<h4>Form help text</h4>
<p>To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.</p> <form class="form-horizontal">
</div> <fieldset>
<div class="span8"> <div class="control-group">
<form class="form-horizontal"> <label class="control-label">Form grid sizes</label>
<fieldset> <div class="controls docs-input-sizes">
<div class="control-group"> <input class="span1" type="text" placeholder=".span1">
<label class="control-label">Form grid sizes</label> <input class="span2" type="text" placeholder=".span2">
<div class="controls docs-input-sizes"> <input class="span3" type="text" placeholder=".span3">
<input class="span1" type="text" placeholder=".span1"> <select class="span1">
<input class="span2" type="text" placeholder=".span2"> <option>1</option>
<input class="span3" type="text" placeholder=".span3"> <option>2</option>
<select class="span1"> <option>3</option>
<option>1</option> <option>4</option>
<option>2</option> <option>5</option>
<option>3</option> </select>
<option>4</option> <select class="span2">
<option>5</option> <option>1</option>
</select> <option>2</option>
<select class="span2"> <option>3</option>
<option>1</option> <option>4</option>
<option>2</option> <option>5</option>
<option>3</option> </select>
<option>4</option> <select class="span3">
<option>5</option> <option>1</option>
</select> <option>2</option>
<select class="span3"> <option>3</option>
<option>1</option> <option>4</option>
<option>2</option> <option>5</option>
<option>3</option> </select>
<option>4</option> <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
<option>5</option> </div>
</select> </div>
<p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p> <div class="control-group">
</div> <label class="control-label">Alternate sizes</label>
<div class="controls docs-input-sizes">
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<p class="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prependedInput">Prepended text</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
</div> </div>
<div class="control-group"> <p class="help-block">Here's some help text</p>
<label class="control-label">Alternate sizes</label> </div>
<div class="controls docs-input-sizes"> </div>
<input class="input-mini" type="text" placeholder=".input-mini"> <div class="control-group">
<input class="input-small" type="text" placeholder=".input-small"> <label class="control-label" for="appendedInput">Appended text</label>
<input class="input-medium" type="text" placeholder=".input-medium"> <div class="controls">
<p class="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p> <div class="input-append">
</div> <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
</div> </div>
<div class="control-group"> <span class="help-inline">Here's more help text</span>
<label class="control-label" for="prependedInput">Prepended text</label> </div>
<div class="controls"> </div>
<div class="input-prepend"> <div class="control-group">
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"> <label class="control-label" for="appendedPrependedInput">Append and prepend</label>
</div> <div class="controls">
<p class="help-block">Here's some help text</p> <div class="input-prepend input-append">
</div> <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
</div> </div>
<div class="control-group"> </div>
<label class="control-label" for="appendedInput">Appended text</label> </div>
<div class="controls"> <div class="control-group">
<div class="input-append"> <label class="control-label" for="appendedInputButton">Append with button</label>
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> <div class="controls">
</div> <div class="input-append">
<span class="help-inline">Here's more help text</span> <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
</div>
</div> </div>
<div class="control-group"> </div>
<label class="control-label" for="appendedPrependedInput">Append and prepend</label> </div>
<div class="controls"> <div class="control-group">
<div class="input-prepend input-append"> <label class="control-label" for="appendedInputButtons">Two-button append</label>
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span> <div class="controls">
</div> <div class="input-append">
</div> <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
</div> </div>
<div class="control-group"> </div>
<label class="control-label" for="appendedInputButton">Append with button</label> </div>
<div class="controls"> <div class="control-group">
<div class="input-append"> <label class="control-label" for="inlineCheckboxes">Inline checkboxes</label>
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button> <div class="controls">
</div> <label class="checkbox inline">
</div> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</div> </label>
<div class="control-group"> <label class="checkbox inline">
<label class="control-label" for="appendedInputButtons">Two-button append</label> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
<div class="controls"> </label>
<div class="input-append"> <label class="checkbox inline">
<input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</div> </label>
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="inlineCheckboxes">Inline checkboxes</label> <label class="control-label" for="optionsCheckboxList">Checkboxes</label>
<div class="controls"> <div class="controls">
<label class="checkbox inline"> <label class="checkbox">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1 <input type="checkbox" name="optionsCheckboxList1" value="option1">
</label> Option one is this and that&mdash;be sure to include why it's great
<label class="checkbox inline"> </label>
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2 <label class="checkbox">
</label> <input type="checkbox" name="optionsCheckboxList2" value="option2">
<label class="checkbox inline"> Option two can also be checked and included in form results
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label>
</label> <label class="checkbox">
</div> <input type="checkbox" name="optionsCheckboxList3" value="option3">
</div> Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results
<div class="control-group"> </label>
<label class="control-label" for="optionsCheckboxList">Checkboxes</label> <p class="help-block"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
<div class="controls"> </div>
<label class="checkbox"> </div>
<input type="checkbox" name="optionsCheckboxList1" value="option1"> <div class="control-group">
Option one is this and that&mdash;be sure to include why it's great <label class="control-label">Radio buttons</label>
</label> <div class="controls">
<label class="checkbox"> <label class="radio">
<input type="checkbox" name="optionsCheckboxList2" value="option2"> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option two can also be checked and included in form results Option one is this and that&mdash;be sure to include why it's great
</label> </label>
<label class="checkbox"> <label class="radio">
<input type="checkbox" name="optionsCheckboxList3" value="option3"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results Option two can be something else and selecting it will deselect option one
</label> </label>
<p class="help-block"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p> </div>
</div> </div>
</div> <div class="form-actions">
<div class="control-group"> <button type="submit" class="btn btn-primary">Save changes</button>
<label class="control-label">Radio buttons</label> <button class="btn">Cancel</button>
<div class="controls"> </div>
<label class="radio"> </fieldset>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> </form>
Option one is this and that&mdash;be sure to include why it's great
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div><!-- /row -->
</section> </section>
@ -1299,48 +1274,44 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
</tbody> </tbody>
</table> </table>
<div class="row"> <h3>Buttons for actions</h3>
<div class="span4"> <p>As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.</p>
<h3>Buttons for actions</h3> <p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.</p>
<p>As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.</p> <h3>Cross browser compatibility</h3>
<p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.</p> <p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
<h3>Cross browser compatibility</h3>
<p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p> <h3>Multiple sizes</h3>
</div> <p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.</p>
<div class="span4"> <p>
<h3>Multiple sizes</h3> <button class="btn btn-large btn-primary">Primary action</button>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.</p> <button class="btn btn-large">Action</button>
<p> </p>
<button class="btn btn-large btn-primary">Primary action</button> <p>
<button class="btn btn-large">Action</button> <button class="btn btn-small btn-primary">Primary action</button>
</p> <button class="btn btn-small">Action</button>
<p> </p>
<button class="btn btn-small btn-primary">Primary action</button> <p>
<button class="btn btn-small">Action</button> <button class="btn btn-mini btn-primary">Primary action</button>
</p> <button class="btn btn-mini">Action</button>
<p> </p>
<button class="btn btn-mini btn-primary">Primary action</button> <br>
<button class="btn btn-mini">Action</button> <h3>Disabled state</h3>
</p> <p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code>&lt;button&gt;</code> elements.</p>
<br> <p>
<h3>Disabled state</h3> <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code>&lt;button&gt;</code> elements.</p> <a href="#" class="btn btn-large disabled">Link</a>
<p> </p>
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a> <p style="margin-bottom: 18px;">
<a href="#" class="btn btn-large disabled">Link</a> <button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
</p> <button class="btn btn-large" disabled>Button</button>
<p style="margin-bottom: 18px;"> </p>
<button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button> <p>
<button class="btn btn-large" disabled>Button</button> <span class="label label-info">Heads up!</span>
</p> We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.
<p> </p>
<span class="label label-info">Heads up!</span>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. <h3>One class, multiple tags</h3>
</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>
</div>
<div class="span4">
<h3>One class, multiple tags</h3>
<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>
<form> <form>
<a class="btn" href="">Link</a> <a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button> <button class="btn" type="submit">Button</button>
@ -1357,9 +1328,8 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;input class="btn" type="submit" &lt;input class="btn" type="submit"
value="Submit"&gt; value="Submit"&gt;
</pre> </pre>
<p>As a best practice, try to match the element for you 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, try to match the element for you 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>
</div>
</div>
</section> </section>
@ -1371,7 +1341,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1> <h1>Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-glass"></i> icon-glass</li> <li><i class="icon-glass"></i> icon-glass</li>
<li><i class="icon-music"></i> icon-music</li> <li><i class="icon-music"></i> icon-music</li>
@ -1410,7 +1380,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-headphones"></i> icon-headphones</li> <li><i class="icon-headphones"></i> icon-headphones</li>
</ul> </ul>
</div> </div>
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-volume-off"></i> icon-volume-off</li> <li><i class="icon-volume-off"></i> icon-volume-off</li>
<li><i class="icon-volume-down"></i> icon-volume-down</li> <li><i class="icon-volume-down"></i> icon-volume-down</li>
@ -1449,7 +1419,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-fast-backward"></i> icon-fast-backward</li> <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
</ul> </ul>
</div> </div>
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-backward"></i> icon-backward</li> <li><i class="icon-backward"></i> icon-backward</li>
<li><i class="icon-play"></i> icon-play</li> <li><i class="icon-play"></i> icon-play</li>
@ -1488,7 +1458,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<li><i class="icon-eye-open"></i> icon-eye-open</li> <li><i class="icon-eye-open"></i> icon-eye-open</li>
</ul> </ul>
</div> </div>
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-eye-close"></i> icon-eye-close</li> <li><i class="icon-eye-close"></i> icon-eye-close</li>
<li><i class="icon-warning-sign"></i> icon-warning-sign</li> <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
@ -1531,99 +1501,91 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<br> <br>
<div class="row">
<div class="span4"> <h3>Built as a sprite</h3>
<h3>Built as a sprite</h3> <p>Instead of making every icon an extra request, we've compiled them into a sprite&mdash;a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.</p>
<p>Instead of making every icon an extra request, we've compiled them into a sprite&mdash;a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.</p> <p>All icons classes are prefixed with <code>.icon-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.</p>
<p>All icons classes are prefixed with <code>.icon-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.</p> <p><a href="http://glyphicons.com" target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.</p>
<p><a href="http://glyphicons.com" target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.</p>
</div> <h3>How to use</h3>
<div class="span4"> <p>Bootstrap uses an <code>&lt;i&gt;</code> tag for all icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:</p>
<h3>How to use</h3>
<p>Bootstrap uses an <code>&lt;i&gt;</code> tag for all icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;i class="icon-search"&gt;&lt;/i&gt; &lt;i class="icon-search"&gt;&lt;/i&gt;
</pre> </pre>
<p>There are also styles available for inverted (white) icons, made ready with one extra class:</p> <p>There are also styles available for inverted (white) icons, made ready with one extra class:</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;i class="icon-search icon-white"&gt;&lt;/i&gt; &lt;i class="icon-search icon-white"&gt;&lt;/i&gt;
</pre> </pre>
<p>There are 140 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p> <p>There are 140 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p>
<p> <p>
<span class="label label-info">Heads up!</span> <span class="label label-info">Heads up!</span>
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code>&lt;i&gt;</code> tag for proper spacing. When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code>&lt;i&gt;</code> tag for proper spacing.
</p> </p>
</div>
<div class="span4"> <h3>Use cases</h3>
<h3>Use cases</h3> <p>Icons are great, but where would one use them? Here are a few ideas:</p>
<p>Icons are great, but where would one use them? Here are a few ideas:</p> <ul>
<ul> <li>As visuals for your sidebar navigation</li>
<li>As visuals for your sidebar navigation</li> <li>For a purely icon-driven navigation</li>
<li>For a purely icon-driven navigation</li> <li>For buttons to help convey the meaning of an action</li>
<li>For buttons to help convey the meaning of an action</li> <li>With links to share context on a user's destination</li>
<li>With links to share context on a user's destination</li> </ul>
</ul> <p>Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon.</p>
<p>Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon.</p>
</div>
</div>
<h3>Examples</h3> <h3>Examples</h3>
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p> <p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
<div class="row">
<div class="span4"> <div class="btn-toolbar" style="margin-bottom: 9px">
<div class="btn-toolbar" style="margin-bottom: 9px"> <div class="btn-group">
<div class="btn-group"> <a class="btn" href="#"><i class="icon-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="icon-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a> <a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a> <a class="btn" href="#"><i class="icon-align-justify"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
</div>
<p>
<a class="btn" href="#"><i class="icon-refresh"></i> Refresh</a>
<a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-white"></i> Checkout</a>
<a class="btn btn-danger" href="#"><i class="icon-trash icon-white"></i> Delete</a>
</p>
<p>
<a class="btn btn-large" href="#"><i class="icon-comment"></i> Comment</a>
<a class="btn btn-small" href="#"><i class="icon-cog"></i> Settings</a>
<a class="btn btn-small btn-info" href="#"><i class="icon-info-sign icon-white"></i> More Info</a>
</p>
</div> </div>
<div class="span4"> <div class="btn-group">
<div class="well" style="padding: 8px 0;"> <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<ul class="nav nav-list"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li> <ul class="dropdown-menu">
<li><a href="#"><i class="icon-book"></i> Library</a></li> <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-pencil"></i> Applications</a></li> <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
<li><a href="#"><i class="i"></i> Misc</a></li> <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
</ul> <li class="divider"></li>
</div> <!-- /well --> <li><a href="#"><i class="i"></i> Make admin</a></li>
</div> </ul>
<div class="span4">
<form>
<div class="control-group">
<label class="control-label" for="inputIcon">Email address</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>
</form>
</div> </div>
</div> </div>
<p>
<a class="btn" href="#"><i class="icon-refresh"></i> Refresh</a>
<a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-white"></i> Checkout</a>
<a class="btn btn-danger" href="#"><i class="icon-trash icon-white"></i> Delete</a>
</p>
<p>
<a class="btn btn-large" href="#"><i class="icon-comment"></i> Comment</a>
<a class="btn btn-small" href="#"><i class="icon-cog"></i> Settings</a>
<a class="btn btn-small btn-info" href="#"><i class="icon-info-sign icon-white"></i> More Info</a>
</p>
<div class="well" style="padding: 8px 0;">
<ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
<li><a href="#"><i class="icon-book"></i> Library</a></li>
<li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
<li><a href="#"><i class="i"></i> Misc</a></li>
</ul>
</div> <!-- /well -->
<form>
<div class="control-group">
<label class="control-label" for="inputIcon">Email address</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>
</form>
</section> </section>

944
docs/templates/pages/base-css.mustache vendored
View File

@ -710,29 +710,25 @@
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Forms{{/i}}</h1> <h1>{{_i}}Forms{{/i}}</h1>
</div> </div>
<div class="row">
<div class="span4"> <h2>{{_i}}Flexible HTML and CSS{{/i}}</h2>
<h2>{{_i}}Flexible HTML and CSS{{/i}}</h2> <p>{{_i}}The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.{{/i}}</p>
<p>{{_i}}The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.{{/i}}</p> <p>{{_i}}More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.{{/i}}</p>
<p>{{_i}}More complicated layouts come with succinct and scalable classes for easy styling and event binding, so you're covered at every step.{{/i}}</p>
</div> <h2>{{_i}}Four layouts included{{/i}}</h2>
<div class="span4"> <p>{{_i}}Bootstrap comes with support for four types of form layouts:{{/i}}</p>
<h2>{{_i}}Four layouts included{{/i}}</h2> <ul>
<p>{{_i}}Bootstrap comes with support for four types of form layouts:{{/i}}</p> <li>{{_i}}Vertical (default){{/i}}</li>
<ul> <li>{{_i}}Search{{/i}}</li>
<li>{{_i}}Vertical (default){{/i}}</li> <li>{{_i}}Inline{{/i}}</li>
<li>{{_i}}Search{{/i}}</li> <li>{{_i}}Horizontal{{/i}}</li>
<li>{{_i}}Inline{{/i}}</li> </ul>
<li>{{_i}}Horizontal{{/i}}</li> <p>{{_i}}Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.{{/i}}</p>
</ul>
<p>{{_i}}Different types of form layouts require some changes to markup, but the controls themselves remain and behave the same.{{/i}}</p> <h2>{{_i}}Control states and more{{/i}}</h2>
</div> <p>{{_i}}Bootstrap's forms include styles for all the base form controls like input, textarea, and select you'd expect. But it also comes with a number of custom components like appended and prepended inputs and support for lists of checkboxes.{{/i}}</p>
<div class="span4"> <p>{{_i}}States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.{{/i}}</p>
<h2>{{_i}}Control states and more{{/i}}</h2>
<p>{{_i}}Bootstrap's forms include styles for all the base form controls like input, textarea, and select you'd expect. But it also comes with a number of custom components like appended and prepended inputs and support for lists of checkboxes.{{/i}}</p>
<p>{{_i}}States like error, warning, and success are included for each type of form control. Also included are styles for disabled controls.{{/i}}</p>
</div>
</div>
<h2>{{_i}}Four types of forms{{/i}}</h2> <h2>{{_i}}Four types of forms{{/i}}</h2>
<p>{{_i}}Bootstrap provides simple markup and styles for four styles of common web forms.{{/i}}</p> <p>{{_i}}Bootstrap provides simple markup and styles for four styles of common web forms.{{/i}}</p>
@ -770,19 +766,17 @@
<h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2> <h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
<div class="row"> <h3>{{_i}}Basic form{{/i}}</h3>
<div class="span6"> <p>{{_i}}Smart and lightweight defaults without extra markup.{{/i}}</p>
<h3>{{_i}}Basic form{{/i}}</h3> <form class="well">
<p>{{_i}}Smart and lightweight defaults without extra markup.{{/i}}</p> <label>{{_i}}Label name{{/i}}</label>
<form class="well"> <input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}">
<label>{{_i}}Label name{{/i}}</label> <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p>
<input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"> <label class="checkbox">
<p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p> <input type="checkbox"> {{_i}}Check me out{{/i}}
<label class="checkbox"> </label>
<input type="checkbox"> {{_i}}Check me out{{/i}} <button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
</label> </form>
<button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
</form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="well"&gt; &lt;form class="well"&gt;
&lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt; &lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt;
@ -794,14 +788,13 @@
&lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt; &lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div>
<div class="span6"> <h3>{{_i}}Search form{{/i}}</h3>
<h3>{{_i}}Search form{{/i}}</h3> <p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.{{/i}}</p>
<p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.{{/i}}</p> <form class="well form-search">
<form class="well form-search"> <input type="text" class="input-medium search-query">
<input type="text" class="input-medium search-query"> <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
<button type="submit" class="btn">{{_i}}Search{{/i}}</button> </form>
</form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="well form-search"&gt; &lt;form class="well form-search"&gt;
&lt;input type="text" class="input-medium search-query"&gt; &lt;input type="text" class="input-medium search-query"&gt;
@ -809,16 +802,16 @@
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
<h3>{{_i}}Inline form{{/i}}</h3> <h3>{{_i}}Inline form{{/i}}</h3>
<p>{{_i}}Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.{{/i}}</p> <p>{{_i}}Add <code>.form-inline</code> to finesse the vertical alignment and spacing of form controls.{{/i}}</p>
<form class="well form-inline"> <form class="well form-inline">
<input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"> <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
<input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"> <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox"> {{_i}}Remember me{{/i}} <input type="checkbox"> {{_i}}Remember me{{/i}}
</label> </label>
<button type="submit" class="btn">{{_i}}Sign in{{/i}}</button> <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
</form> </form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="well form-inline"&gt; &lt;form class="well form-inline"&gt;
&lt;input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"&gt; &lt;input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}"&gt;
@ -829,89 +822,83 @@
&lt;button type="submit" class="btn"&gt;{{_i}}Sign in{{/i}}&lt;/button&gt; &lt;button type="submit" class="btn"&gt;{{_i}}Sign in{{/i}}&lt;/button&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div><!-- /.span -->
</div><!-- /row -->
<br> <br>
<h2>{{_i}}Horizontal forms{{/i}}</h2> <h2>{{_i}}Horizontal forms{{/i}}</h2>
<div class="row"> <p>{{_i}}Shown on the right are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
<div class="span4"> <ul>
<p>{{_i}}{{/i}}</p> <li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
<p>{{_i}}Shown on the right are all the default form controls we support. Here's the bulleted list:{{/i}}</p> <li>{{_i}}checkbox{{/i}}</li>
<ul> <li>{{_i}}radio{{/i}}</li>
<li>{{_i}}text inputs (text, password, email, etc){{/i}}</li> <li>{{_i}}select{{/i}}</li>
<li>{{_i}}checkbox{{/i}}</li> <li>{{_i}}multiple select{{/i}}</li>
<li>{{_i}}radio{{/i}}</li> <li>{{_i}}file input{{/i}}</li>
<li>{{_i}}select{{/i}}</li> <li>{{_i}}textarea{{/i}}</li>
<li>{{_i}}multiple select{{/i}}</li> </ul>
<li>{{_i}}file input{{/i}}</li>
<li>{{_i}}textarea{{/i}}</li> <form class="form-horizontal">
</ul> <fieldset>
</div><!-- /.span --> <div class="control-group">
<div class="span8"> <label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
<form class="form-horizontal"> <div class="controls">
<fieldset> <input type="text" class="input-xlarge" id="input01">
<div class="control-group"> <p class="help-block">{{_i}}In addition to freeform text, any HTML5 text-based input appears like so.{{/i}}</p>
<label class="control-label" for="input01">{{_i}}Text input{{/i}}</label> </div>
<div class="controls"> </div>
<input type="text" class="input-xlarge" id="input01"> <div class="control-group">
<p class="help-block">{{_i}}In addition to freeform text, any HTML5 text-based input appears like so.{{/i}}</p> <label class="control-label" for="optionsCheckbox">{{_i}}Checkbox{{/i}}</label>
</div> <div class="controls">
</div> <label class="checkbox">
<div class="control-group"> <input type="checkbox" id="optionsCheckbox" value="option1">
<label class="control-label" for="optionsCheckbox">{{_i}}Checkbox{{/i}}</label> {{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}}
<div class="controls"> </label>
<label class="checkbox"> </div>
<input type="checkbox" id="optionsCheckbox" value="option1"> </div>
{{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}} <div class="control-group">
</label> <label class="control-label" for="select01">{{_i}}Select list{{/i}}</label>
</div> <div class="controls">
</div> <select id="select01">
<div class="control-group"> <option>something</option>
<label class="control-label" for="select01">{{_i}}Select list{{/i}}</label> <option>2</option>
<div class="controls"> <option>3</option>
<select id="select01"> <option>4</option>
<option>something</option> <option>5</option>
<option>2</option> </select>
<option>3</option> </div>
<option>4</option> </div>
<option>5</option> <div class="control-group">
</select> <label class="control-label" for="multiSelect">{{_i}}Multicon-select{{/i}}</label>
</div> <div class="controls">
</div> <select multiple="multiple" id="multiSelect">
<div class="control-group"> <option>1</option>
<label class="control-label" for="multiSelect">{{_i}}Multicon-select{{/i}}</label> <option>2</option>
<div class="controls"> <option>3</option>
<select multiple="multiple" id="multiSelect"> <option>4</option>
<option>1</option> <option>5</option>
<option>2</option> </select>
<option>3</option> </div>
<option>4</option> </div>
<option>5</option> <div class="control-group">
</select> <label class="control-label" for="fileInput">{{_i}}File input{{/i}}</label>
</div> <div class="controls">
</div> <input class="input-file" id="fileInput" type="file">
<div class="control-group"> </div>
<label class="control-label" for="fileInput">{{_i}}File input{{/i}}</label> </div>
<div class="controls"> <div class="control-group">
<input class="input-file" id="fileInput" type="file"> <label class="control-label" for="textarea">{{_i}}Textarea{{/i}}</label>
</div> <div class="controls">
</div> <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
<div class="control-group"> </div>
<label class="control-label" for="textarea">{{_i}}Textarea{{/i}}</label> </div>
<div class="controls"> <div class="form-actions">
<textarea class="input-xlarge" id="textarea" rows="3"></textarea> <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
</div> <button class="btn">{{_i}}Cancel{{/i}}</button>
</div> </div>
<div class="form-actions"> </fieldset>
<button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button> </form>
<button class="btn">{{_i}}Cancel{{/i}}</button> <h3>{{_i}}Example markup{{/i}}</h3>
</div> <p>{{_i}}Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.{{/i}}</p>
</fieldset>
</form>
<h3>{{_i}}Example markup{{/i}}</h3>
<p>{{_i}}Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="form-horizontal"&gt; &lt;form class="form-horizontal"&gt;
&lt;fieldset&gt; &lt;fieldset&gt;
@ -926,253 +913,241 @@
&lt;/fieldset&gt; &lt;/fieldset&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
</div>
</div>
<br> <br>
<h2>{{_i}}Form control states{{/i}}</h2> <h2>{{_i}}Form control states{{/i}}</h2>
<div class="row"> <p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p>
<div class="span4"> <hr>
<p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p> <h3>{{_i}}Form validation{{/i}}</h3>
<hr> <p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.{{/i}}</p>
<h3>{{_i}}Form validation{{/i}}</h3>
<p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;fieldset &lt;fieldset
class="control-group error"&gt; class="control-group error"&gt;
… …
&lt;/fieldset&gt; &lt;/fieldset&gt;
</pre> </pre>
</div>
<div class="span8"> <form class="form-horizontal">
<form class="form-horizontal"> <fieldset>
<fieldset> <div class="control-group">
<div class="control-group"> <label class="control-label" for="focusedInput">{{_i}}Focused input{{/i}}</label>
<label class="control-label" for="focusedInput">{{_i}}Focused input{{/i}}</label> <div class="controls">
<div class="controls"> <input class="input-xlarge focused" id="focusedInput" type="text" value="{{_i}}This is focused…{{/i}}">
<input class="input-xlarge focused" id="focusedInput" type="text" value="{{_i}}This is focused…{{/i}}"> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label">Uneditable input</label>
<label class="control-label">Uneditable input</label> <div class="controls">
<div class="controls"> <span class="input-xlarge uneditable-input">Some value here</span>
<span class="input-xlarge uneditable-input">Some value here</span> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="disabledInput">{{_i}}Disabled input{{/i}}</label>
<label class="control-label" for="disabledInput">{{_i}}Disabled input{{/i}}</label> <div class="controls">
<div class="controls"> <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here…{{/i}}" disabled>
<input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here…{{/i}}" disabled> </div>
</div> </div>
</div> <div class="control-group">
<div class="control-group"> <label class="control-label" for="optionsCheckbox2">{{_i}}Disabled checkbox{{/i}}</label>
<label class="control-label" for="optionsCheckbox2">{{_i}}Disabled checkbox{{/i}}</label> <div class="controls">
<div class="controls"> <label class="checkbox">
<label class="checkbox"> <input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
<input type="checkbox" id="optionsCheckbox2" value="option1" disabled> {{_i}}This is a disabled checkbox{{/i}}
{{_i}}This is a disabled checkbox{{/i}} </label>
</label> </div>
</div> </div>
</div> <div class="control-group warning">
<div class="control-group warning"> <label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label>
<label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label> <div class="controls">
<div class="controls"> <input type="text" id="inputWarning">
<input type="text" id="inputWarning"> <span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span>
<span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span> </div>
</div> </div>
</div> <div class="control-group error">
<div class="control-group error"> <label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label>
<label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label> <div class="controls">
<div class="controls"> <input type="text" id="inputError">
<input type="text" id="inputError"> <span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
<span class="help-inline">{{_i}}Please correct the error{{/i}}</span> </div>
</div> </div>
</div> <div class="control-group success">
<div class="control-group success"> <label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
<label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label> <div class="controls">
<div class="controls"> <input type="text" id="inputSuccess">
<input type="text" id="inputSuccess"> <span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
<span class="help-inline">{{_i}}Woohoo!{{/i}}</span> </div>
</div> </div>
</div> <div class="control-group success">
<div class="control-group success"> <label class="control-label" for="selectError">{{_i}}Select with success{{/i}}</label>
<label class="control-label" for="selectError">{{_i}}Select with success{{/i}}</label> <div class="controls">
<div class="controls"> <select id="selectError">
<select id="selectError"> <option>1</option>
<option>1</option> <option>2</option>
<option>2</option> <option>3</option>
<option>3</option> <option>4</option>
<option>4</option> <option>5</option>
<option>5</option> </select>
</select> <span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
<span class="help-inline">{{_i}}Woohoo!{{/i}}</span> </div>
</div> </div>
</div> <div class="form-actions">
<div class="form-actions"> <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
<button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button> <button class="btn">{{_i}}Cancel{{/i}}</button>
<button class="btn">{{_i}}Cancel{{/i}}</button> </div>
</div> </fieldset>
</fieldset> </form>
</form>
</div>
</div>
<br> <br>
<h2>{{_i}}Extending form controls{{/i}}</h2> <h2>{{_i}}Extending form controls{{/i}}</h2>
<div class="row"> <h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
<div class="span4"> <p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
<h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3> <hr>
<p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p> <h3>{{_i}}Checkboxes and radios{{/i}}</h3>
<hr> <p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.{{/i}}</p>
<h3>{{_i}}Checkboxes and radios{{/i}}</h3> <p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p>
<p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.{{/i}}</p> <hr>
<p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p> <h4>{{_i}}Inline forms and append/prepend{{/i}}</h4>
<hr> <p>{{_i}}To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.{{/i}}</p>
<h4>{{_i}}Inline forms and append/prepend{{/i}}</h4> <hr>
<p>{{_i}}To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.{{/i}}</p> <h4>{{_i}}Form help text{{/i}}</h4>
<hr> <p>{{_i}}To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.{{/i}}</p>
<h4>{{_i}}Form help text{{/i}}</h4>
<p>{{_i}}To add help text for your form inputs, include inline help text with <code>&lt;span class="help-inline"&gt;</code> or a help text block with <code>&lt;p class="help-block"&gt;</code> after the input element.{{/i}}</p> <form class="form-horizontal">
</div> <fieldset>
<div class="span8"> <div class="control-group">
<form class="form-horizontal"> <label class="control-label">{{_i}}Form grid sizes{{/i}}</label>
<fieldset> <div class="controls docs-input-sizes">
<div class="control-group"> <input class="span1" type="text" placeholder=".span1">
<label class="control-label">{{_i}}Form grid sizes{{/i}}</label> <input class="span2" type="text" placeholder=".span2">
<div class="controls docs-input-sizes"> <input class="span3" type="text" placeholder=".span3">
<input class="span1" type="text" placeholder=".span1"> <select class="span1">
<input class="span2" type="text" placeholder=".span2"> <option>1</option>
<input class="span3" type="text" placeholder=".span3"> <option>2</option>
<select class="span1"> <option>3</option>
<option>1</option> <option>4</option>
<option>2</option> <option>5</option>
<option>3</option> </select>
<option>4</option> <select class="span2">
<option>5</option> <option>1</option>
</select> <option>2</option>
<select class="span2"> <option>3</option>
<option>1</option> <option>4</option>
<option>2</option> <option>5</option>
<option>3</option> </select>
<option>4</option> <select class="span3">
<option>5</option> <option>1</option>
</select> <option>2</option>
<select class="span3"> <option>3</option>
<option>1</option> <option>4</option>
<option>2</option> <option>5</option>
<option>3</option> </select>
<option>4</option> <p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
<option>5</option> </div>
</select> </div>
<p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p> <div class="control-group">
</div> <label class="control-label">{{_i}}Alternate sizes{{/i}}</label>
<div class="controls docs-input-sizes">
<input class="input-mini" type="text" placeholder=".input-mini">
<input class="input-small" type="text" placeholder=".input-small">
<input class="input-medium" type="text" placeholder=".input-medium">
<p class="help-block">{{_i}}You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).{{/i}}</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
</div> </div>
<div class="control-group"> <p class="help-block">{{_i}}Here's some help text{{/i}}</p>
<label class="control-label">{{_i}}Alternate sizes{{/i}}</label> </div>
<div class="controls docs-input-sizes"> </div>
<input class="input-mini" type="text" placeholder=".input-mini"> <div class="control-group">
<input class="input-small" type="text" placeholder=".input-small"> <label class="control-label" for="appendedInput">{{_i}}Appended text{{/i}}</label>
<input class="input-medium" type="text" placeholder=".input-medium"> <div class="controls">
<p class="help-block">{{_i}}You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).{{/i}}</p> <div class="input-append">
</div> <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
</div> </div>
<div class="control-group"> <span class="help-inline">{{_i}}Here's more help text{{/i}}</span>
<label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label> </div>
<div class="controls"> </div>
<div class="input-prepend"> <div class="control-group">
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}"> <label class="control-label" for="appendedPrependedInput">{{_i}}Append and prepend{{/i}}</label>
</div> <div class="controls">
<p class="help-block">{{_i}}Here's some help text{{/i}}</p> <div class="input-prepend input-append">
</div> <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
</div> </div>
<div class="control-group"> </div>
<label class="control-label" for="appendedInput">{{_i}}Appended text{{/i}}</label> </div>
<div class="controls"> <div class="control-group">
<div class="input-append"> <label class="control-label" for="appendedInputButton">{{_i}}Append with button{{/i}}</label>
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> <div class="controls">
</div> <div class="input-append">
<span class="help-inline">{{_i}}Here's more help text{{/i}}</span> <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
</div>
</div> </div>
<div class="control-group"> </div>
<label class="control-label" for="appendedPrependedInput">{{_i}}Append and prepend{{/i}}</label> </div>
<div class="controls"> <div class="control-group">
<div class="input-prepend input-append"> <label class="control-label" for="appendedInputButtons">{{_i}}Two-button append{{/i}}</label>
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span> <div class="controls">
</div> <div class="input-append">
</div> <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
</div> </div>
<div class="control-group"> </div>
<label class="control-label" for="appendedInputButton">{{_i}}Append with button{{/i}}</label> </div>
<div class="controls"> <div class="control-group">
<div class="input-append"> <label class="control-label" for="inlineCheckboxes">{{_i}}Inline checkboxes{{/i}}</label>
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button> <div class="controls">
</div> <label class="checkbox inline">
</div> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</div> </label>
<div class="control-group"> <label class="checkbox inline">
<label class="control-label" for="appendedInputButtons">{{_i}}Two-button append{{/i}}</label> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
<div class="controls"> </label>
<div class="input-append"> <label class="checkbox inline">
<input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</div> </label>
</div> </div>
</div> </div>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="inlineCheckboxes">{{_i}}Inline checkboxes{{/i}}</label> <label class="control-label" for="optionsCheckboxList">{{_i}}Checkboxes{{/i}}</label>
<div class="controls"> <div class="controls">
<label class="checkbox inline"> <label class="checkbox">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1 <input type="checkbox" name="optionsCheckboxList1" value="option1">
</label> {{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}}
<label class="checkbox inline"> </label>
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2 <label class="checkbox">
</label> <input type="checkbox" name="optionsCheckboxList2" value="option2">
<label class="checkbox inline"> {{_i}}Option two can also be checked and included in form results{{/i}}
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label>
</label> <label class="checkbox">
</div> <input type="checkbox" name="optionsCheckboxList3" value="option3">
</div> {{_i}}Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results{{/i}}
<div class="control-group"> </label>
<label class="control-label" for="optionsCheckboxList">{{_i}}Checkboxes{{/i}}</label> <p class="help-block">{{_i}}<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.{{/i}}</p>
<div class="controls"> </div>
<label class="checkbox"> </div>
<input type="checkbox" name="optionsCheckboxList1" value="option1"> <div class="control-group">
{{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}} <label class="control-label">{{_i}}Radio buttons{{/i}}</label>
</label> <div class="controls">
<label class="checkbox"> <label class="radio">
<input type="checkbox" name="optionsCheckboxList2" value="option2"> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
{{_i}}Option two can also be checked and included in form results{{/i}} {{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}}
</label> </label>
<label class="checkbox"> <label class="radio">
<input type="checkbox" name="optionsCheckboxList3" value="option3"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
{{_i}}Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results{{/i}} {{_i}}Option two can be something else and selecting it will deselect option one{{/i}}
</label> </label>
<p class="help-block">{{_i}}<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.{{/i}}</p> </div>
</div> </div>
</div> <div class="form-actions">
<div class="control-group"> <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
<label class="control-label">{{_i}}Radio buttons{{/i}}</label> <button class="btn">{{_i}}Cancel{{/i}}</button>
<div class="controls"> </div>
<label class="radio"> </fieldset>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> </form>
{{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}}
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
{{_i}}Option two can be something else and selecting it will deselect option one{{/i}}
</label>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
<button class="btn">{{_i}}Cancel{{/i}}</button>
</div>
</fieldset>
</form>
</div>
</div><!-- /row -->
</section> </section>
@ -1230,48 +1205,44 @@
</tbody> </tbody>
</table> </table>
<div class="row"> <h3>{{_i}}Buttons for actions{{/i}}</h3>
<div class="span4"> <p>{{_i}}As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.{{/i}}</p>
<h3>{{_i}}Buttons for actions{{/i}}</h3> <p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.{{/i}}</p>
<p>{{_i}}As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.{{/i}}</p> <h3>{{_i}}Cross browser compatibility{{/i}}</h3>
<p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements.{{/i}}</p> <p>{{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}</p>
<h3>{{_i}}Cross browser compatibility{{/i}}</h3>
<p>{{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}</p> <h3>{{_i}}Multiple sizes{{/i}}</h3>
</div> <p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p>
<div class="span4"> <p>
<h3>{{_i}}Multiple sizes{{/i}}</h3> <button class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button>
<p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p> <button class="btn btn-large">{{_i}}Action{{/i}}</button>
<p> </p>
<button class="btn btn-large btn-primary">{{_i}}Primary action{{/i}}</button> <p>
<button class="btn btn-large">{{_i}}Action{{/i}}</button> <button class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button>
</p> <button class="btn btn-small">{{_i}}Action{{/i}}</button>
<p> </p>
<button class="btn btn-small btn-primary">{{_i}}Primary action{{/i}}</button> <p>
<button class="btn btn-small">{{_i}}Action{{/i}}</button> <button class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button>
</p> <button class="btn btn-mini">{{_i}}Action{{/i}}</button>
<p> </p>
<button class="btn btn-mini btn-primary">{{_i}}Primary action{{/i}}</button> <br>
<button class="btn btn-mini">{{_i}}Action{{/i}}</button> <h3>{{_i}}Disabled state{{/i}}</h3>
</p> <p>{{_i}}For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code>&lt;button&gt;</code> elements.{{/i}}</p>
<br> <p>
<h3>{{_i}}Disabled state{{/i}}</h3> <a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
<p>{{_i}}For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code>&lt;button&gt;</code> elements.{{/i}}</p> <a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
<p> </p>
<a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a> <p style="margin-bottom: 18px;">
<a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a> <button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
</p> <button class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
<p style="margin-bottom: 18px;"> </p>
<button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button> <p>
<button class="btn btn-large" disabled>{{_i}}Button{{/i}}</button> <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
</p> {{_i}}We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.{{/i}}
<p> </p>
<span class="label label-info">{{_i}}Heads up!{{/i}}</span>
{{_i}}We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required.{{/i}} <h3>{{_i}}One class, multiple tags{{/i}}</h3>
</p> <p>{{_i}}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.{{/i}}</p>
</div>
<div class="span4">
<h3>{{_i}}One class, multiple tags{{/i}}</h3>
<p>{{_i}}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.{{/i}}</p>
<form> <form>
<a class="btn" href="">{{_i}}Link{{/i}}</a> <a class="btn" href="">{{_i}}Link{{/i}}</a>
<button class="btn" type="submit">{{_i}}Button{{/i}}</button> <button class="btn" type="submit">{{_i}}Button{{/i}}</button>
@ -1288,9 +1259,8 @@
&lt;input class="btn" type="submit" &lt;input class="btn" type="submit"
value="{{_i}}Submit{{/i}}"&gt; value="{{_i}}Submit{{/i}}"&gt;
</pre> </pre>
<p>{{_i}}As a best practice, try to match the element for you 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.{{/i}}</p> <p>{{_i}}As a best practice, try to match the element for you 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.{{/i}}</p>
</div>
</div>
</section> </section>
@ -1302,7 +1272,7 @@
<h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1> <h1>{{_i}}Icons <small>Graciously provided by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small>{{/i}}</h1>
</div> </div>
<div class="row"> <div class="row">
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-glass"></i> icon-glass</li> <li><i class="icon-glass"></i> icon-glass</li>
<li><i class="icon-music"></i> icon-music</li> <li><i class="icon-music"></i> icon-music</li>
@ -1341,7 +1311,7 @@
<li><i class="icon-headphones"></i> icon-headphones</li> <li><i class="icon-headphones"></i> icon-headphones</li>
</ul> </ul>
</div> </div>
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-volume-off"></i> icon-volume-off</li> <li><i class="icon-volume-off"></i> icon-volume-off</li>
<li><i class="icon-volume-down"></i> icon-volume-down</li> <li><i class="icon-volume-down"></i> icon-volume-down</li>
@ -1380,7 +1350,7 @@
<li><i class="icon-fast-backward"></i> icon-fast-backward</li> <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
</ul> </ul>
</div> </div>
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-backward"></i> icon-backward</li> <li><i class="icon-backward"></i> icon-backward</li>
<li><i class="icon-play"></i> icon-play</li> <li><i class="icon-play"></i> icon-play</li>
@ -1419,7 +1389,7 @@
<li><i class="icon-eye-open"></i> icon-eye-open</li> <li><i class="icon-eye-open"></i> icon-eye-open</li>
</ul> </ul>
</div> </div>
<div class="span3"> <div class="span2">
<ul class="the-icons"> <ul class="the-icons">
<li><i class="icon-eye-close"></i> icon-eye-close</li> <li><i class="icon-eye-close"></i> icon-eye-close</li>
<li><i class="icon-warning-sign"></i> icon-warning-sign</li> <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
@ -1462,97 +1432,89 @@
<br> <br>
<div class="row">
<div class="span4"> <h3>{{_i}}Built as a sprite{{/i}}</h3>
<h3>{{_i}}Built as a sprite{{/i}}</h3> <p>{{_i}}Instead of making every icon an extra request, we've compiled them into a sprite&mdash;a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.{{/i}}</p>
<p>{{_i}}Instead of making every icon an extra request, we've compiled them into a sprite&mdash;a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.{{/i}}</p> <p>{{_i}}All icons classes are prefixed with <code>.icon-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.{{/i}}</p>
<p>{{_i}}All icons classes are prefixed with <code>.icon-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.{{/i}}</p> <p>{{_i}}<a href="http://glyphicons.com" target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.{{/i}}</p>
<p>{{_i}}<a href="http://glyphicons.com" target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.{{/i}}</p>
</div> <h3>{{_i}}How to use{{/i}}</h3>
<div class="span4"> <p>{{_i}}Bootstrap uses an <code>&lt;i&gt;</code> tag for all icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p>
<h3>{{_i}}How to use{{/i}}</h3>
<p>{{_i}}Bootstrap uses an <code>&lt;i&gt;</code> tag for all icons, but they have no case class&mdash;only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;i class="icon-search"&gt;&lt;/i&gt; &lt;i class="icon-search"&gt;&lt;/i&gt;
</pre> </pre>
<p>{{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}</p> <p>{{_i}}There are also styles available for inverted (white) icons, made ready with one extra class:{{/i}}</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;i class="icon-search icon-white"&gt;&lt;/i&gt; &lt;i class="icon-search icon-white"&gt;&lt;/i&gt;
</pre> </pre>
<p>{{_i}}There are 140 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p> <p>{{_i}}There are 140 classes to choose from for your icons. Just add an <code>&lt;i&gt;</code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p>
<p> <p>
<span class="label label-info">{{_i}}Heads up!{{/i}}</span> <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
{{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code>&lt;i&gt;</code> tag for proper spacing.{{/i}} {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code>&lt;i&gt;</code> tag for proper spacing.{{/i}}
</p> </p>
</div>
<div class="span4"> <h3>{{_i}}Use cases{{/i}}</h3>
<h3>{{_i}}Use cases{{/i}}</h3> <p>{{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}</p>
<p>{{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}</p> <ul>
<ul> <li>{{_i}}As visuals for your sidebar navigation{{/i}}</li>
<li>{{_i}}As visuals for your sidebar navigation{{/i}}</li> <li>{{_i}}For a purely icon-driven navigation{{/i}}</li>
<li>{{_i}}For a purely icon-driven navigation{{/i}}</li> <li>{{_i}}For buttons to help convey the meaning of an action{{/i}}</li>
<li>{{_i}}For buttons to help convey the meaning of an action{{/i}}</li> <li>{{_i}}With links to share context on a user's destination{{/i}}</li>
<li>{{_i}}With links to share context on a user's destination{{/i}}</li> </ul>
</ul> <p>{{_i}}Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon.{{/i}}</p>
<p>{{_i}}Essentially, anywhere you can put an <code>&lt;i&gt;</code> tag, you can put an icon.{{/i}}</p>
</div>
</div>
<h3>{{_i}}Examples{{/i}}</h3> <h3>{{_i}}Examples{{/i}}</h3>
<p>{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}</p> <p>{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}</p>
<div class="row">
<div class="span4"> <div class="btn-toolbar" style="margin-bottom: 9px">
<div class="btn-toolbar" style="margin-bottom: 9px"> <div class="btn-group">
<div class="btn-group"> <a class="btn" href="#"><i class="icon-align-left"></i></a>
<a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="icon-align-center"></i></a>
<a class="btn" href="#"><i class="icon-align-center"></i></a> <a class="btn" href="#"><i class="icon-align-right"></i></a>
<a class="btn" href="#"><i class="icon-align-right"></i></a> <a class="btn" href="#"><i class="icon-align-justify"></i></a>
<a class="btn" href="#"><i class="icon-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li>
<li><a href="#"><i class="icon-trash"></i> {{_i}}Delete{{/i}}</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li>
</ul>
</div>
</div>
<p>
<a class="btn" href="#"><i class="icon-refresh"></i> {{_i}}Refresh{{/i}}</a>
<a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-white"></i> {{_i}}Checkout{{/i}}</a>
<a class="btn btn-danger" href="#"><i class="icon-trash icon-white"></i> {{_i}}Delete{{/i}}</a>
</p>
<p>
<a class="btn btn-large" href="#"><i class="icon-comment"></i> {{_i}}Comment{{/i}}</a>
<a class="btn btn-small" href="#"><i class="icon-cog"></i> {{_i}}Settings{{/i}}</a>
<a class="btn btn-small btn-info" href="#"><i class="icon-info-sign icon-white"></i> {{_i}}More Info{{/i}}</a>
</p>
</div> </div>
<div class="span4"> <div class="btn-group">
<div class="well" style="padding: 8px 0;"> <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a>
<ul class="nav nav-list"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<li class="active"><a href="#"><i class="icon-home icon-white"></i> {{_i}}Home{{/i}}</a></li> <ul class="dropdown-menu">
<li><a href="#"><i class="icon-book"></i> {{_i}}Library{{/i}}</a></li> <li><a href="#"><i class="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li>
<li><a href="#"><i class="icon-pencil"></i> {{_i}}Applications{{/i}}</a></li> <li><a href="#"><i class="icon-trash"></i> {{_i}}Delete{{/i}}</a></li>
<li><a href="#"><i class="i"></i> {{_i}}Misc{{/i}}</a></li> <li><a href="#"><i class="icon-ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
</ul> <li class="divider"></li>
</div> <!-- /well --> <li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li>
</div> </ul>
<div class="span4">
<form>
<div class="control-group">
<label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>
</form>
</div> </div>
</div> </div>
<p>
<a class="btn" href="#"><i class="icon-refresh"></i> {{_i}}Refresh{{/i}}</a>
<a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-white"></i> {{_i}}Checkout{{/i}}</a>
<a class="btn btn-danger" href="#"><i class="icon-trash icon-white"></i> {{_i}}Delete{{/i}}</a>
</p>
<p>
<a class="btn btn-large" href="#"><i class="icon-comment"></i> {{_i}}Comment{{/i}}</a>
<a class="btn btn-small" href="#"><i class="icon-cog"></i> {{_i}}Settings{{/i}}</a>
<a class="btn btn-small btn-info" href="#"><i class="icon-info-sign icon-white"></i> {{_i}}More Info{{/i}}</a>
</p>
<div class="well" style="padding: 8px 0;">
<ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-home icon-white"></i> {{_i}}Home{{/i}}</a></li>
<li><a href="#"><i class="icon-book"></i> {{_i}}Library{{/i}}</a></li>
<li><a href="#"><i class="icon-pencil"></i> {{_i}}Applications{{/i}}</a></li>
<li><a href="#"><i class="i"></i> {{_i}}Misc{{/i}}</a></li>
</ul>
</div> <!-- /well -->
<form>
<div class="control-group">
<label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>
</form>
</section> </section>