Skip to content

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

overhaul forms docs to simplify presentation of everything, reduce text, and... 

overhaul forms docs to simplify presentation of everything, reduce text, and increase visibility of examples
parent ca63ea2f
Hide whitespace changes
Inline Side-by-side
Showing with 824 additions and 692 deletions
docs/assets/css/docs.css
View file @ c6500660
...@@ -37,6 +37,12 @@ li { ...@@ -37,6 +37,12 @@ li {
line-height: 25px; line-height: 25px;
} }
/* Code in headings */
h3 code {
font-size: 14px;
font-weight: normal;
}
/* Tweak navbar brand link to be super sleek /* Tweak navbar brand link to be super sleek
......
docs/base-css.html
View file @ c6500660
...@@ -710,48 +710,11 @@ For example, <code>section</code> should be wrapped as inline. ...@@ -710,48 +710,11 @@ For example, <code>section</code> should be wrapped as inline.
<h1>Forms</h1> <h1>Forms</h1>
</div> </div>
<h2>Controls and layouts</h2> <h2>Default styles</h2>
<p>Forms include styles for all the base form controls like <code>input</code>, <code>textarea</code>, and <code>select</code> you'd expect. There are also a number of custom components like appended and prepended inputs and support for lists of checkboxes.</p> <p>Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p>
<p>Bootstrap provides simple markup and styles for four styles of common web forms. Each layout requires small changes to surrounding markup, but the controls themselves remain and behave the same.</p>
<p>Error, warning, and success states are included for form controls, as wel as disabled.</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th>Vertical (default)</th>
<td><code>.form-vertical</code> <span class="muted">(not required)</span></td>
<td>Stacked, left-aligned labels over controls</td>
</tr>
<tr>
<th>Inline</th>
<td><code>.form-inline</code></td>
<td>Left-aligned label and inline-block controls for compact style</td>
</tr>
<tr>
<th>Search</th>
<td><code>.form-search</code></td>
<td>Extra-rounded text input for a typical search aesthetic</td>
</tr>
<tr>
<th>Horizontal</th>
<td><code>.form-horizontal</code></td>
<td>Float left, right-aligned labels on same line as controls</td>
</tr>
</tbody>
</table>
<h2>Example forms <small>using just form controls, no extra markup</small></h2>
<h3>Basic form</h3>
<p>Smart and lightweight defaults without extra markup.</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<label>Label name</label> <label>Label name</label>
<input type="text" class="span3" placeholder="Type something…"> <input type="text" placeholder="Type something…">
<p class="help-block">Example block-level help text here.</p> <p class="help-block">Example block-level help text here.</p>
<label class="checkbox"> <label class="checkbox">
<input type="checkbox"> Check me out <input type="checkbox"> Check me out
...@@ -761,7 +724,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -761,7 +724,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<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;
&lt;input type="text" class="span3" placeholder="Type something…"&gt; &lt;input type="text" placeholder="Type something…"&gt;
&lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt; &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
&lt;label class="checkbox"&gt; &lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; Check me out &lt;input type="checkbox"&gt; Check me out
...@@ -770,21 +733,28 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -770,21 +733,28 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
<hr class="bs-docs-separator"></hr>
<h2>Optional layouts</h2>
<p>Included with Bootstrap are three optional form layouts for common use cases.</p>
<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>&lt;input&gt;</code> for an extra-rounded text input.</p>
<form class="bs-docs-example form-search"> <form class="bs-docs-example 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="form-search"&gt;
&lt;input type="text" class="input-medium search-query"&gt; &lt;input type="text" class="input-medium search-query"&gt;
&lt;button type="submit" class="btn"&gt;Search&lt;/button&gt; &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&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> for left-aligned labels and inline-block controls for a compact layout.</p>
<form class="bs-docs-example form-inline"> <form class="bs-docs-example 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">
...@@ -794,7 +764,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -794,7 +764,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<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="form-inline"&gt;
&lt;input type="text" class="input-small" placeholder="Email"&gt; &lt;input type="text" class="input-small" placeholder="Email"&gt;
&lt;input type="password" class="input-small" placeholder="Password"&gt; &lt;input type="password" class="input-small" placeholder="Password"&gt;
&lt;label class="checkbox"&gt; &lt;label class="checkbox"&gt;
...@@ -804,331 +774,424 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -804,331 +774,424 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
<br> <h3>Horizontal form</h3>
<p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
<h2>Horizontal forms</h2>
<p>Shown on the right are all the default form controls we support. Here's the bulleted list:</p>
<ul> <ul>
<li>text inputs (text, password, email, etc)</li> <li>Add <code>.form-horizontal</code> to the form</li>
<li>checkbox</li> <li>Wrap labels and controls in <code>.control-group</code></li>
<li>radio</li> <li>Add <code>.control-label</code> to the label</li>
<li>select</li> <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
<li>multiple select</li>
<li>file input</li>
<li>textarea</li>
</ul> </ul>
<form class="bs-docs-example form-horizontal">
<form class="form-horizontal"> <div class="control-group">
<fieldset> <label class="control-label" for="">Email</label>
<div class="control-group"> <div class="controls">
<label class="control-label" for="input01">Text input</label> <input type="text" placeholder="Email">
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox">Checkbox</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="optionsCheckbox" value="option1">
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
</div>
<div class="control-group">
<label class="control-label" for="select01">Select list</label>
<div class="controls">
<select id="select01">
<option>something</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="multiSelect">Multicon-select</label>
<div class="controls">
<select multiple="multiple" id="multiSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="fileInput">File input</label>
<div class="controls">
<input class="input-file" id="fileInput" type="file">
</div>
</div> </div>
<div class="control-group"> </div>
<label class="control-label" for="textarea">Textarea</label> <div class="control-group">
<div class="controls"> <label class="control-label" for="">Password</label>
<textarea class="input-xlarge" id="textarea" rows="3"></textarea> <div class="controls">
</div> <input type="password" placeholder="Password">
</div> </div>
<div class="form-actions"> </div>
<button type="submit" class="btn btn-primary">Save changes</button> <div class="control-group">
<button class="btn">Cancel</button> <div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div> </div>
</fieldset> </div>
</form> </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;div class="control-group"&gt;
&lt;legend&gt;Legend text&lt;/legend&gt; &lt;label class="control-label" for=""&gt;Email&lt;/label&gt;
&lt;div class="control-group"&gt; &lt;div class="controls"&gt;
&lt;label class="control-label" for="input01"&gt;Text input&lt;/label&gt; &lt;input type="text" placeholder="Email"&gt;
&lt;div class="controls"&gt; &lt;/div&gt;
&lt;input type="text" class="input-xlarge" id="input01"&gt; &lt;/div&gt;
&lt;p class="help-block"&gt;Supporting help text&lt;/p&gt; &lt;div class="control-group"&gt;
&lt;/div&gt; &lt;label class="control-label" for=""&gt;Password&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="password" placeholder="Password"&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/fieldset&gt; &lt;/div&gt;
&lt;div class="control-group"&gt;
&lt;div class="controls"&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; Remember me
&lt;/label&gt;
&lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
<br>
<h2>Form control states</h2> <hr class="bs-docs-separator"></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>
<hr>
<h3>Form validation</h3> <h2>Supported form controls</h2>
<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> <p>Examples of standard form controls supported in an example form layout.</p>
<h3>Inputs</h3>
<p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
<p>Requires the use of a specified <code>type</code> at all times.</p>
<form class="bs-docs-example form-inline">
<input type="text" placeholder="Text input">
</form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;fieldset &lt;input type="text" placeholder="Text input"&gt;
class="control-group error"&gt;
…
&lt;/fieldset&gt;
</pre> </pre>
<form class="form-horizontal"> <h3>Textarea</h3>
<fieldset> <p>Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.</p>
<div class="control-group"> <form class="bs-docs-example form-inline">
<label class="control-label" for="focusedInput">Focused input</label> <textarea rows="3"></textarea>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
</div>
</div>
<div class="control-group">
<label class="control-label">Uneditable input</label>
<div class="controls">
<span class="input-xlarge uneditable-input">Some value here</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="disabledInput">Disabled input</label>
<div class="controls">
<input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
This is a disabled checkbox
</label>
</div>
</div>
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="selectError">Select with success</label>
<div class="controls">
<select id="selectError">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<span class="help-inline">Woohoo!</span>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form> </form>
<pre class="prettyprint linenums">
&lt;textarea id="textarea" rows="3"&gt;&lt;/textarea&gt;
</pre>
<h3>Checkboxes and radios</h3>
<p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
<h4>Default (stacked)</h4>
<form class="bs-docs-example">
<label class="checkbox">
<input type="checkbox" value="">
Option one is this and that&mdash;be sure to include why it's great
</label>
<br>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</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>
</form>
<pre class="prettyprint linenums">
&lt;label class="checkbox"&gt;
&lt;input type="checkbox" value=""&gt;
Option one is this and that&mdash;be sure to include why it's great
&lt;/label&gt;
&lt;label class="radio"&gt;
&lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&gt;
Option one is this and that&mdash;be sure to include why it's great
&lt;/label&gt;
&lt;label class="radio"&gt;
&lt;input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&gt;
Option two can be something else and selecting it will deselect option one
&lt;/label&gt;
</pre>
<h4>Inline checkboxes</h4>
<p>Add the <code>.inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
<form class="bs-docs-example">
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
</form>
<pre class="prettyprint linenums">
&lt;label class="checkbox inline"&gt;
&lt;input type="checkbox" id="inlineCheckbox1" value="option1"&gt; 1
&lt;/label&gt;
&lt;label class="checkbox inline"&gt;
&lt;input type="checkbox" id="inlineCheckbox2" value="option2"&gt; 2
&lt;/label&gt;
&lt;label class="checkbox inline"&gt;
&lt;input type="checkbox" id="inlineCheckbox3" value="option3"&gt; 3
&lt;/label&gt;
</pre>
<h3>Selects</h3>
<p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
<form class="bs-docs-example">
<select>
<option>something</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>
<pre class="prettyprint linenums">
&lt;select&gt;
&lt;option&gt;something&lt;/option&gt;
&lt;option&gt;2&lt;/option&gt;
&lt;option&gt;3&lt;/option&gt;
&lt;option&gt;4&lt;/option&gt;
&lt;option&gt;5&lt;/option&gt;
&lt;/select&gt;
&lt;select&gt;
&lt;option&gt;1&lt;/option&gt;
&lt;option&gt;2&lt;/option&gt;
&lt;option&gt;3&lt;/option&gt;
&lt;option&gt;4&lt;/option&gt;
&lt;option&gt;5&lt;/option&gt;
&lt;/select&gt;
</pre>
<hr class="bs-docs-separator"></hr>
<br>
<h2>Extending form controls</h2> <h2>Extending form controls</h2>
<h3>Prepend &amp; append inputs</h3> <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
<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>
<hr> <h3>Prepended and appended inputs</h3>
<h3>Checkboxes and radios</h3> <p>Add text or buttons before or after any text-based input.</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>
<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>Default options</h4>
<hr> <p>Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
<h4>Inline forms and append/prepend</h4> <form class="bs-docs-example form-inline">
<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> <div class="input-prepend">
<hr> <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
<h4>Form help text</h4> </div>
<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> <br>
<div class="input-append">
<form class="form-horizontal"> <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
<fieldset> </div>
<div class="control-group"> </form>
<label class="control-label">Form grid sizes</label> <pre class="prettyprint linenums">
<div class="controls docs-input-sizes"> &lt;div class="input-prepend"&gt;
<input class="span1" type="text" placeholder=".span1"> &lt;span class="add-on"&gt;@&lt;/span&gt;&lt;input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"&gt;
<input class="span2" type="text" placeholder=".span2"> &lt;/div&gt;
<input class="span3" type="text" placeholder=".span3"> &lt;div class="input-append"&gt;
<select class="span1"> &lt;input class="span2" id="appendedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
<option>1</option> &lt;/div&gt;
<option>2</option> </pre>
<option>3</option>
<option>4</option> <h4>Combined</h4>
<option>5</option> <p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
</select> <form class="bs-docs-example form-inline">
<select class="span2"> <div class="input-prepend input-append">
<option>1</option> <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
<option>2</option> </div>
<option>3</option> </form>
<option>4</option> <pre class="prettyprint linenums">
<option>5</option> &lt;div class="input-prepend input-append"&gt;
</select> &lt;span class="add-on"&gt;$&lt;/span&gt;&lt;input class="span2" id="appendedPrependedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
<select class="span3"> &lt;/div&gt;
<option>1</option> </pre>
<option>2</option>
<option>3</option> <h4>Buttons instead of text</h4>
<option>4</option> <p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
<option>5</option> <form class="bs-docs-example">
</select> <div class="input-append">
<p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p> <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
</div> </div>
</div> <br>
<div class="control-group"> <div class="input-append">
<label class="control-label">Alternate sizes</label> <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
<div class="controls docs-input-sizes"> </div>
<input class="input-mini" type="text" placeholder=".input-mini"> </form>
<input class="input-small" type="text" placeholder=".input-small"> <pre class="prettyprint linenums">
<input class="input-medium" type="text" placeholder=".input-medium"> &lt;div class="input-append"&gt;
<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> &lt;input class="span2" id="appendedInputButton" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
</div> &lt;/div&gt;
</div>
<div class="control-group"> &lt;div class="input-append"&gt;
<label class="control-label" for="prependedInput">Prepended text</label> &lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
<div class="controls"> &lt;/div&gt;
<div class="input-prepend"> </pre>
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
</div> <h3>Control sizing</h3>
<p class="help-block">Here's some help text</p> <p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
</div>
</div> <h4>Relative sizing</h4>
<div class="control-group"> <form class="bs-docs-example">
<label class="control-label" for="appendedInput">Appended text</label> <div class="controls docs-input-sizes">
<div class="controls"> <input class="input-mini" type="text" placeholder=".input-mini">
<div class="input-append"> <input class="input-small" type="text" placeholder=".input-small">
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> <input class="input-medium" type="text" placeholder=".input-medium">
</div> <input class="input-large" type="text" placeholder=".input-large">
<span class="help-inline">Here's more help text</span> <input class="input-xlarge" type="text" placeholder=".input-xlarge">
</div> <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
</div> </div>
<div class="control-group"> </form>
<label class="control-label" for="appendedPrependedInput">Append and prepend</label> <pre class="prettyprint linenums">
<div class="controls"> &lt;input class="input-mini" type="text"&gt;
<div class="input-prepend input-append"> &lt;input class="input-small" type="text"&gt;
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span> &lt;input class="input-medium" type="text"&gt;
</div> &lt;input class="input-large" type="text"&gt;
</div> &lt;input class="input-xlarge" type="text"&gt;
</div> &lt;input class="input-xxlarge" type="text"&gt;
<div class="control-group"> </pre>
<label class="control-label" for="appendedInputButton">Append with button</label>
<div class="controls"> <h4>Grid sizing</h4>
<div class="input-append"> <p>Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.</p>
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button> <form class="bs-docs-example">
</div> <div class="controls docs-input-sizes">
</div> <input class="span1" type="text" placeholder=".span1">
</div> <input class="span2" type="text" placeholder=".span2">
<div class="control-group"> <input class="span3" type="text" placeholder=".span3">
<label class="control-label" for="appendedInputButtons">Two-button append</label> <select class="span1">
<div class="controls"> <option>1</option>
<div class="input-append"> <option>2</option>
<input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button> <option>3</option>
</div> <option>4</option>
</div> <option>5</option>
</div> </select>
<div class="control-group"> <select class="span2">
<label class="control-label" for="inlineCheckboxes">Inline checkboxes</label> <option>1</option>
<div class="controls"> <option>2</option>
<label class="checkbox inline"> <option>3</option>
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1 <option>4</option>
</label> <option>5</option>
<label class="checkbox inline"> </select>
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2 <select class="span3">
</label> <option>1</option>
<label class="checkbox inline"> <option>2</option>
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3 <option>3</option>
</label> <option>4</option>
</div> <option>5</option>
</div> </select>
<div class="control-group"> </div>
<label class="control-label" for="optionsCheckboxList">Checkboxes</label> </form>
<div class="controls"> <pre class="prettyprint linenums">
<label class="checkbox"> &lt;input class="span1" type="text"&gt;
<input type="checkbox" name="optionsCheckboxList1" value="option1"> &lt;input class="span2" type="text"&gt;
Option one is this and that&mdash;be sure to include why it's great &lt;input class="span3" type="text"&gt;
</label> </pre>
<label class="checkbox">
<input type="checkbox" name="optionsCheckboxList2" value="option2"> <h3>Uneditable inputs</h3>
Option two can also be checked and included in form results <p>Present data in a form that's not editable without using actual form markup.</p>
</label> <form class="bs-docs-example">
<label class="checkbox"> <span class="input-xlarge uneditable-input">Some value here</span>
<input type="checkbox" name="optionsCheckboxList3" value="option3"> </form>
Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results <pre class="prettyprint linenums">
</label> &lt;span class="input-xlarge uneditable-input"&gt;Some value here&lt;/span&gt;
<p class="help-block"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p> </pre>
</div>
<h3>Form actions</h3>
<p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
<form class="bs-docs-example">
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button class="btn">Cancel</button>
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="form-actions"&gt;
&lt;button type="submit" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
&lt;button class="btn"&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
</pre>
<h3>Help text</h3>
<p>Inline and block level support for help text that appears around form controls.</p>
<h4>Inline help</h4>
<form class="bs-docs-example form-inline">
<input type="text"> <span class="help-inline">Inline help text</span>
</form>
<pre class="prettyprint linenums">
&lt;span class="help-inline"&gt;Inline help text&lt;/span&gt;
</pre>
<h4>Block help</h4>
<form class="bs-docs-example form-inline">
<input type="text">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
<pre class="prettyprint linenums">
&lt;span class="help-block"&gt;A longer block of help text that breaks onto a new line and may extend beyond one line.&lt;/span&gt;
</pre>
<hr class="bs-docs-separator"></hr>
<h2>Form control states</h2>
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
<h3>Input focus</h3>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<form class="bs-docs-example form-inline">
<input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">
</form>
<pre class="prettyprint linenums">
&lt;input class="input-xlarge" id="focusedInput" type="text" value="This is focused..."&gt;
</pre>
<h3>Disabled inputs</h3>
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
<form class="bs-docs-example form-inline">
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</form>
<pre class="prettyprint linenums">
&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
</pre>
<h3>Validation states</h3>
<p>Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
<form class="bs-docs-example form-horizontal">
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div> </div>
<div class="control-group"> </div>
<label class="control-label">Radio buttons</label> <div class="control-group error">
<div class="controls"> <label class="control-label" for="inputError">Input with error</label>
<label class="radio"> <div class="controls">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> <input type="text" id="inputError">
Option one is this and that&mdash;be sure to include why it's great <span class="help-inline">Please correct the error</span>
</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>
<div class="form-actions"> </div>
<button type="submit" class="btn btn-primary">Save changes</button> <div class="control-group success">
<button class="btn">Cancel</button> <label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div> </div>
</fieldset> </div>
</form> </form>
<pre class="prettyprint linenums">
&lt;div class="control-group warning"&gt;
&lt;label class="control-label" for="inputWarning"&gt;Input with warning&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" id="inputWarning"&gt;
&lt;span class="help-inline"&gt;Something may have gone wrong&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group error"&gt;
&lt;label class="control-label" for="inputError"&gt;Input with error&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" id="inputError"&gt;
&lt;span class="help-inline"&gt;Please correct the error&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group success"&gt;
&lt;label class="control-label" for="inputSuccess"&gt;Input with success&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" id="inputSuccess"&gt;
&lt;span class="help-inline"&gt;Woohoo!&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section> </section>
......
docs/templates/pages/base-css.mustache
View file @ c6500660
...@@ -641,48 +641,11 @@ ...@@ -641,48 +641,11 @@
<h1>{{_i}}Forms{{/i}}</h1> <h1>{{_i}}Forms{{/i}}</h1>
</div> </div>
<h2>{{_i}}Controls and layouts{{/i}}</h2> <h2>{{_i}}Default styles{{/i}}</h2>
<p>{{_i}}Forms include styles for all the base form controls like <code>input</code>, <code>textarea</code>, and <code>select</code> you'd expect. There are also a number of custom components like appended and prepended inputs and support for lists of checkboxes.{{/i}}</p> <p>{{_i}}Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}</p>
<p>{{_i}}Bootstrap provides simple markup and styles for four styles of common web forms. Each layout requires small changes to surrounding markup, but the controls themselves remain and behave the same.{{/i}}</p>
<p>{{_i}}Error, warning, and success states are included for form controls, as wel as disabled.{{/i}}</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>{{_i}}Name{{/i}}</th>
<th>{{_i}}Class{{/i}}</th>
<th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<th>{{_i}}Vertical (default){{/i}}</th>
<td><code>.form-vertical</code> <span class="muted">({{_i}}not required{{/i}})</span></td>
<td>{{_i}}Stacked, left-aligned labels over controls{{/i}}</td>
</tr>
<tr>
<th>{{_i}}Inline{{/i}}</th>
<td><code>.form-inline</code></td>
<td>{{_i}}Left-aligned label and inline-block controls for compact style{{/i}}</td>
</tr>
<tr>
<th>{{_i}}Search{{/i}}</th>
<td><code>.form-search</code></td>
<td>{{_i}}Extra-rounded text input for a typical search aesthetic{{/i}}</td>
</tr>
<tr>
<th>{{_i}}Horizontal{{/i}}</th>
<td><code>.form-horizontal</code></td>
<td>{{_i}}Float left, right-aligned labels on same line as controls{{/i}}</td>
</tr>
</tbody>
</table>
<h2>{{_i}}Example forms <small>using just form controls, no extra markup</small>{{/i}}</h2>
<h3>{{_i}}Basic form{{/i}}</h3>
<p>{{_i}}Smart and lightweight defaults without extra markup.{{/i}}</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<label>{{_i}}Label name{{/i}}</label> <label>{{_i}}Label name{{/i}}</label>
<input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"> <input type="text" placeholder="{{_i}}Type something…{{/i}}">
<p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p> <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p>
<label class="checkbox"> <label class="checkbox">
<input type="checkbox"> {{_i}}Check me out{{/i}} <input type="checkbox"> {{_i}}Check me out{{/i}}
...@@ -692,7 +655,7 @@ ...@@ -692,7 +655,7 @@
<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;
&lt;input type="text" class="span3" placeholder="{{_i}}Type something…{{/i}}"&gt; &lt;input type="text" placeholder="{{_i}}Type something…{{/i}}"&gt;
&lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt; &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
&lt;label class="checkbox"&gt; &lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}} &lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}}
...@@ -701,21 +664,28 @@ ...@@ -701,21 +664,28 @@
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
<hr class="bs-docs-separator"></hr>
<h2>{{_i}}Optional layouts{{/i}}</h2>
<p>{{_i}}Included with Bootstrap are three optional form layouts for common use cases.{{/i}}</p>
<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>&lt;input&gt;</code> for an extra-rounded text input.{{/i}}</p>
<form class="bs-docs-example form-search"> <form class="bs-docs-example 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>{{! /example }} </form>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="well form-search"&gt; &lt;form class="form-search"&gt;
&lt;input type="text" class="input-medium search-query"&gt; &lt;input type="text" class="input-medium search-query"&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt; &lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
&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> for left-aligned labels and inline-block controls for a compact layout.{{/i}}</p>
<form class="bs-docs-example form-inline"> <form class="bs-docs-example 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}}">
...@@ -725,7 +695,7 @@ ...@@ -725,7 +695,7 @@
<button type="submit" class="btn">{{_i}}Sign in{{/i}}</button> <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
</form>{{! /example }} </form>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;form class="well form-inline"&gt; &lt;form class="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;
&lt;input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"&gt; &lt;input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}"&gt;
&lt;label class="checkbox"&gt; &lt;label class="checkbox"&gt;
...@@ -735,331 +705,424 @@ ...@@ -735,331 +705,424 @@
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
<br> <h3>{{_i}}Horizontal form{{/i}}</h3>
<p>{{_i}}Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:{{/i}}</p>
<h2>{{_i}}Horizontal forms{{/i}}</h2>
<p>{{_i}}Shown on the right are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
<ul> <ul>
<li>{{_i}}text inputs (text, password, email, etc){{/i}}</li> <li>{{_i}}Add <code>.form-horizontal</code> to the form{{/i}}</li>
<li>{{_i}}checkbox{{/i}}</li> <li>{{_i}}Wrap labels and controls in <code>.control-group</code>{{/i}}</li>
<li>{{_i}}radio{{/i}}</li> <li>{{_i}}Add <code>.control-label</code> to the label{{/i}}</li>
<li>{{_i}}select{{/i}}</li> <li>{{_i}}Wrap any associated controls in <code>.controls</code> for proper alignment{{/i}}</li>
<li>{{_i}}multiple select{{/i}}</li>
<li>{{_i}}file input{{/i}}</li>
<li>{{_i}}textarea{{/i}}</li>
</ul> </ul>
<form class="bs-docs-example form-horizontal">
<form class="form-horizontal"> <div class="control-group">
<fieldset> <label class="control-label" for="">{{_i}}Email{{/i}}</label>
<div class="control-group"> <div class="controls">
<label class="control-label" for="input01">{{_i}}Text input{{/i}}</label> <input type="text" placeholder="{{_i}}Email{{/i}}">
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">{{_i}}In addition to freeform text, any HTML5 text-based input appears like so.{{/i}}</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox">{{_i}}Checkbox{{/i}}</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="optionsCheckbox" value="option1">
{{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}}
</label>
</div>
</div>
<div class="control-group">
<label class="control-label" for="select01">{{_i}}Select list{{/i}}</label>
<div class="controls">
<select id="select01">
<option>something</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="multiSelect">{{_i}}Multicon-select{{/i}}</label>
<div class="controls">
<select multiple="multiple" id="multiSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="fileInput">{{_i}}File input{{/i}}</label>
<div class="controls">
<input class="input-file" id="fileInput" type="file">
</div>
</div> </div>
<div class="control-group"> </div>
<label class="control-label" for="textarea">{{_i}}Textarea{{/i}}</label> <div class="control-group">
<div class="controls"> <label class="control-label" for="">{{_i}}Password{{/i}}</label>
<textarea class="input-xlarge" id="textarea" rows="3"></textarea> <div class="controls">
</div> <input type="password" placeholder="{{_i}}Password{{/i}}">
</div> </div>
<div class="form-actions"> </div>
<button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button> <div class="control-group">
<button class="btn">{{_i}}Cancel{{/i}}</button> <div class="controls">
<label class="checkbox">
<input type="checkbox"> {{_i}}Remember me{{/i}}
</label>
<button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
</div> </div>
</fieldset> </div>
</form> </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;div class="control-group"&gt;
&lt;legend&gt;{{_i}}Legend text{{/i}}&lt;/legend&gt; &lt;label class="control-label" for=""&gt;{{_i}}Email{{/i}}&lt;/label&gt;
&lt;div class="control-group"&gt; &lt;div class="controls"&gt;
&lt;label class="control-label" for="input01"&gt;{{_i}}Text input{{/i}}&lt;/label&gt; &lt;input type="text" placeholder="{{_i}}Email{{/i}}"&gt;
&lt;div class="controls"&gt;
&lt;input type="text" class="input-xlarge" id="input01"&gt;
&lt;p class="help-block"&gt;{{_i}}Supporting help text{{/i}}&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/fieldset&gt; &lt;/div&gt;
&lt;div class="control-group"&gt;
&lt;label class="control-label" for=""&gt;{{_i}}Password{{/i}}&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="password" placeholder="{{_i}}Password{{/i}}"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group"&gt;
&lt;div class="controls"&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox"&gt; {{_i}}Remember me{{/i}}
&lt;/label&gt;
&lt;button type="submit" class="btn"&gt;{{_i}}Sign in{{/i}}&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt; &lt;/form&gt;
</pre> </pre>
<br>
<h2>{{_i}}Form control states{{/i}}</h2> <hr class="bs-docs-separator"></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>
<hr>
<h3>{{_i}}Form validation{{/i}}</h3> <h2>{{_i}}Supported form controls{{/i}}</h2>
<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> <p>{{_i}}Examples of standard form controls supported in an example form layout.{{/i}}</p>
<h3>{{_i}}Inputs{{/i}}</h3>
<p>{{_i}}Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.{{/i}}</p>
<p>{{_i}}Requires the use of a specified <code>type</code> at all times.{{/i}}</p>
<form class="bs-docs-example form-inline">
<input type="text" placeholder="Text input">
</form>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;fieldset &lt;input type="text" placeholder="Text input"&gt;
class="control-group error"&gt;
…
&lt;/fieldset&gt;
</pre> </pre>
<form class="form-horizontal"> <h3>{{_i}}Textarea{{/i}}</h3>
<fieldset> <p>{{_i}}Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.{{/i}}</p>
<div class="control-group"> <form class="bs-docs-example form-inline">
<label class="control-label" for="focusedInput">{{_i}}Focused input{{/i}}</label> <textarea rows="3"></textarea>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" type="text" value="{{_i}}This is focused…{{/i}}">
</div>
</div>
<div class="control-group">
<label class="control-label">Uneditable input</label>
<div class="controls">
<span class="input-xlarge uneditable-input">Some value here</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="disabledInput">{{_i}}Disabled input{{/i}}</label>
<div class="controls">
<input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here…{{/i}}" disabled>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox2">{{_i}}Disabled checkbox{{/i}}</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
{{_i}}This is a disabled checkbox{{/i}}
</label>
</div>
</div>
<div class="control-group warning">
<label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="selectError">{{_i}}Select with success{{/i}}</label>
<div class="controls">
<select id="selectError">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
</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> </form>
<pre class="prettyprint linenums">
&lt;textarea id="textarea" rows="3"&gt;&lt;/textarea&gt;
</pre>
<h3>{{_i}}Checkboxes and radios{{/i}}</h3>
<p>{{_i}}Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.{{/i}}</p>
<h4>{{_i}}Default (stacked){{/i}}</h4>
<form class="bs-docs-example">
<label class="checkbox">
<input type="checkbox" value="">
{{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}}
</label>
<br>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
{{_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>
</form>
<pre class="prettyprint linenums">
&lt;label class="checkbox"&gt;
&lt;input type="checkbox" value=""&gt;
{{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}}
&lt;/label&gt;
&lt;label class="radio"&gt;
&lt;input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked&gt;
{{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}}
&lt;/label&gt;
&lt;label class="radio"&gt;
&lt;input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"&gt;
{{_i}}Option two can be something else and selecting it will deselect option one{{/i}}
&lt;/label&gt;
</pre>
<h4>{{_i}}Inline checkboxes{{/i}}</h4>
<p>{{_i}}Add the <code>.inline</code> class to a series of checkboxes or radios for controls appear on the same line.{{/i}}</p>
<form class="bs-docs-example">
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
</form>
<pre class="prettyprint linenums">
&lt;label class="checkbox inline"&gt;
&lt;input type="checkbox" id="inlineCheckbox1" value="option1"&gt; 1
&lt;/label&gt;
&lt;label class="checkbox inline"&gt;
&lt;input type="checkbox" id="inlineCheckbox2" value="option2"&gt; 2
&lt;/label&gt;
&lt;label class="checkbox inline"&gt;
&lt;input type="checkbox" id="inlineCheckbox3" value="option3"&gt; 3
&lt;/label&gt;
</pre>
<h3>{{_i}}Selects{{/i}}</h3>
<p>{{_i}}Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.{{/i}}</p>
<form class="bs-docs-example">
<select>
<option>something</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>
<pre class="prettyprint linenums">
&lt;select&gt;
&lt;option&gt;something&lt;/option&gt;
&lt;option&gt;2&lt;/option&gt;
&lt;option&gt;3&lt;/option&gt;
&lt;option&gt;4&lt;/option&gt;
&lt;option&gt;5&lt;/option&gt;
&lt;/select&gt;
&lt;select&gt;
&lt;option&gt;1&lt;/option&gt;
&lt;option&gt;2&lt;/option&gt;
&lt;option&gt;3&lt;/option&gt;
&lt;option&gt;4&lt;/option&gt;
&lt;option&gt;5&lt;/option&gt;
&lt;/select&gt;
</pre>
<hr class="bs-docs-separator"></hr>
<br>
<h2>{{_i}}Extending form controls{{/i}}</h2> <h2>{{_i}}Extending form controls{{/i}}</h2>
<h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3> <p>{{_i}}Adding on top of existing browser controls, Bootstrap includes other useful form components.{{/i}}</p>
<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>
<hr> <h3>{{_i}}Prepended and appended inputs{{/i}}</h3>
<h3>{{_i}}Checkboxes and radios{{/i}}</h3> <p>{{_i}}Add text or buttons before or after any text-based input.{{/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>
<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}}Default options{{/i}}</h4>
<hr> <p>{{_i}}Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.{{/i}}</p>
<h4>{{_i}}Inline forms and append/prepend{{/i}}</h4> <form class="bs-docs-example form-inline">
<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> <div class="input-prepend">
<hr> <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
<h4>{{_i}}Form help text{{/i}}</h4> </div>
<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> <br>
<div class="input-append">
<form class="form-horizontal"> <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
<fieldset> </div>
<div class="control-group"> </form>
<label class="control-label">{{_i}}Form grid sizes{{/i}}</label> <pre class="prettyprint linenums">
<div class="controls docs-input-sizes"> &lt;div class="input-prepend"&gt;
<input class="span1" type="text" placeholder=".span1"> &lt;span class="add-on"&gt;@&lt;/span&gt;&lt;input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}"&gt;
<input class="span2" type="text" placeholder=".span2"> &lt;/div&gt;
<input class="span3" type="text" placeholder=".span3"> &lt;div class="input-append"&gt;
<select class="span1"> &lt;input class="span2" id="appendedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
<option>1</option> &lt;/div&gt;
<option>2</option> </pre>
<option>3</option>
<option>4</option> <h4>{{_i}}Combined{{/i}}</h4>
<option>5</option> <p>{{_i}}Use both classes and two instances of <code>.add-on</code> to prepend and append an input.{{/i}}</p>
</select> <form class="bs-docs-example form-inline">
<select class="span2"> <div class="input-prepend input-append">
<option>1</option> <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
<option>2</option> </div>
<option>3</option> </form>
<option>4</option> <pre class="prettyprint linenums">
<option>5</option> &lt;div class="input-prepend input-append"&gt;
</select> &lt;span class="add-on"&gt;$&lt;/span&gt;&lt;input class="span2" id="appendedPrependedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
<select class="span3"> &lt;/div&gt;
<option>1</option> </pre>
<option>2</option>
<option>3</option> <h4>{{_i}}Buttons instead of text{{/i}}</h4>
<option>4</option> <p>{{_i}}Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p>
<option>5</option> <form class="bs-docs-example">
</select> <div class="input-append">
<p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p> <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
</div> </div>
</div> <br>
<div class="control-group"> <div class="input-append">
<label class="control-label">{{_i}}Alternate sizes{{/i}}</label> <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
<div class="controls docs-input-sizes"> </div>
<input class="input-mini" type="text" placeholder=".input-mini"> </form>
<input class="input-small" type="text" placeholder=".input-small"> <pre class="prettyprint linenums">
<input class="input-medium" type="text" placeholder=".input-medium"> &lt;div class="input-append"&gt;
<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> &lt;input class="span2" id="appendedInputButton" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
</div> &lt;/div&gt;
</div>
<div class="control-group"> &lt;div class="input-append"&gt;
<label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label> &lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
<div class="controls"> &lt;/div&gt;
<div class="input-prepend"> </pre>
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
</div> <h3>{{_i}}Control sizing{{/i}}</h3>
<p class="help-block">{{_i}}Here's some help text{{/i}}</p> <p>{{_i}}Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.{{/i}}</p>
</div>
</div> <h4>{{_i}}Relative sizing{{/i}}</h4>
<div class="control-group"> <form class="bs-docs-example">
<label class="control-label" for="appendedInput">{{_i}}Appended text{{/i}}</label> <div class="controls docs-input-sizes">
<div class="controls"> <input class="input-mini" type="text" placeholder=".input-mini">
<div class="input-append"> <input class="input-small" type="text" placeholder=".input-small">
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> <input class="input-medium" type="text" placeholder=".input-medium">
</div> <input class="input-large" type="text" placeholder=".input-large">
<span class="help-inline">{{_i}}Here's more help text{{/i}}</span> <input class="input-xlarge" type="text" placeholder=".input-xlarge">
</div> <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
</div> </div>
<div class="control-group"> </form>
<label class="control-label" for="appendedPrependedInput">{{_i}}Append and prepend{{/i}}</label> <pre class="prettyprint linenums">
<div class="controls"> &lt;input class="input-mini" type="text"&gt;
<div class="input-prepend input-append"> &lt;input class="input-small" type="text"&gt;
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span> &lt;input class="input-medium" type="text"&gt;
</div> &lt;input class="input-large" type="text"&gt;
</div> &lt;input class="input-xlarge" type="text"&gt;
</div> &lt;input class="input-xxlarge" type="text"&gt;
<div class="control-group"> </pre>
<label class="control-label" for="appendedInputButton">{{_i}}Append with button{{/i}}</label>
<div class="controls"> <h4>{{_i}}Grid sizing{{/i}}</h4>
<div class="input-append"> <p>{{_i}}Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.{{/i}}</p>
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button> <form class="bs-docs-example">
</div> <div class="controls docs-input-sizes">
</div> <input class="span1" type="text" placeholder=".span1">
</div> <input class="span2" type="text" placeholder=".span2">
<div class="control-group"> <input class="span3" type="text" placeholder=".span3">
<label class="control-label" for="appendedInputButtons">{{_i}}Two-button append{{/i}}</label> <select class="span1">
<div class="controls"> <option>1</option>
<div class="input-append"> <option>2</option>
<input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button> <option>3</option>
</div> <option>4</option>
</div> <option>5</option>
</div> </select>
<div class="control-group"> <select class="span2">
<label class="control-label" for="inlineCheckboxes">{{_i}}Inline checkboxes{{/i}}</label> <option>1</option>
<div class="controls"> <option>2</option>
<label class="checkbox inline"> <option>3</option>
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1 <option>4</option>
</label> <option>5</option>
<label class="checkbox inline"> </select>
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2 <select class="span3">
</label> <option>1</option>
<label class="checkbox inline"> <option>2</option>
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3 <option>3</option>
</label> <option>4</option>
</div> <option>5</option>
</div> </select>
<div class="control-group"> </div>
<label class="control-label" for="optionsCheckboxList">{{_i}}Checkboxes{{/i}}</label> </form>
<div class="controls"> <pre class="prettyprint linenums">
<label class="checkbox"> &lt;input class="span1" type="text"&gt;
<input type="checkbox" name="optionsCheckboxList1" value="option1"> &lt;input class="span2" type="text"&gt;
{{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}} &lt;input class="span3" type="text"&gt;
</label> </pre>
<label class="checkbox">
<input type="checkbox" name="optionsCheckboxList2" value="option2"> <h3>{{_i}}Uneditable inputs{{/i}}</h3>
{{_i}}Option two can also be checked and included in form results{{/i}} <p>{{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}</p>
</label> <form class="bs-docs-example">
<label class="checkbox"> <span class="input-xlarge uneditable-input">Some value here</span>
<input type="checkbox" name="optionsCheckboxList3" value="option3"> </form>
{{_i}}Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results{{/i}} <pre class="prettyprint linenums">
</label> &lt;span class="input-xlarge uneditable-input"&gt;Some value here&lt;/span&gt;
<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> </pre>
</div>
<h3>{{_i}}Form actions{{/i}}</h3>
<p>{{_i}}End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.{{/i}}</p>
<form class="bs-docs-example">
<div class="form-actions">
<button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
<button class="btn">{{_i}}Cancel{{/i}}</button>
</div>
</form>
<pre class="prettyprint linenums">
&lt;div class="form-actions"&gt;
&lt;button type="submit" class="btn btn-primary"&gt;{{_i}}Save changes{{/i}}&lt;/button&gt;
&lt;button class="btn"&gt;{{_i}}Cancel{{/i}}&lt;/button&gt;
&lt;/div&gt;
</pre>
<h3>{{_i}}Help text{{/i}}</h3>
<p>{{_i}}Inline and block level support for help text that appears around form controls.{{/i}}</p>
<h4>{{_i}}Inline help{{/i}}</h4>
<form class="bs-docs-example form-inline">
<input type="text"> <span class="help-inline">Inline help text</span>
</form>
<pre class="prettyprint linenums">
&lt;span class="help-inline"&gt;Inline help text&lt;/span&gt;
</pre>
<h4>{{_i}}Block help{{/i}}</h4>
<form class="bs-docs-example form-inline">
<input type="text">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
<pre class="prettyprint linenums">
&lt;span class="help-block"&gt;A longer block of help text that breaks onto a new line and may extend beyond one line.&lt;/span&gt;
</pre>
<hr class="bs-docs-separator"></hr>
<h2>{{_i}}Form control states{{/i}}</h2>
<p>{{_i}}Provide feedback to users or visitors with basic feedback states on form controls and labels.{{/i}}</p>
<h3>{{_i}}Input focus{{/i}}</h3>
<p>{{_i}}We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p>
<form class="bs-docs-example form-inline">
<input class="input-xlarge focused" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
</form>
<pre class="prettyprint linenums">
&lt;input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"&gt;
</pre>
<h3>{{_i}}Disabled inputs{{/i}}</h3>
<p>{{_i}}Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.{{/i}}</p>
<form class="bs-docs-example form-inline">
<input class="input-xlarge" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here…{{/i}}" disabled>
</form>
<pre class="prettyprint linenums">
&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here...{{/i}}" disabled&gt;
</pre>
<h3>{{_i}}Validation states{{/i}}</h3>
<p>{{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.{{/i}}</p>
<form class="bs-docs-example form-horizontal">
<div class="control-group warning">
<label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span>
</div> </div>
<div class="control-group"> </div>
<label class="control-label">{{_i}}Radio buttons{{/i}}</label> <div class="control-group error">
<div class="controls"> <label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label>
<label class="radio"> <div class="controls">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> <input type="text" id="inputError">
{{_i}}Option one is this and that&mdash;be sure to include why it's great{{/i}} <span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
</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>
<div class="form-actions"> </div>
<button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button> <div class="control-group success">
<button class="btn">{{_i}}Cancel{{/i}}</button> <label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
</div> </div>
</fieldset> </div>
</form> </form>
<pre class="prettyprint linenums">
&lt;div class="control-group warning"&gt;
&lt;label class="control-label" for="inputWarning"&gt;{{_i}}Input with warning{{/i}}&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" id="inputWarning"&gt;
&lt;span class="help-inline"&gt;{{_i}}Something may have gone wrong{{/i}}&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group error"&gt;
&lt;label class="control-label" for="inputError"&gt;{{_i}}Input with error{{/i}}&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" id="inputError"&gt;
&lt;span class="help-inline"&gt;{{_i}}Please correct the error{{/i}}&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="control-group success"&gt;
&lt;label class="control-label" for="inputSuccess"&gt;{{_i}}Input with success{{/i}}&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;input type="text" id="inputSuccess"&gt;
&lt;span class="help-inline"&gt;{{_i}}Woohoo!{{/i}}&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</section> </section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment