mirror of https://github.com/twbs/bootstrap.git
overhaul forms docs to simplify presentation of everything, reduce text, and increase visibility of examples
This commit is contained in:
Mark Otto
parent
ca63ea2f26
commit
c65006601e
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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><form></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, <code>section</code> should be wrapped as inline.
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<form class="well">
|
<form class="well">
|
||||||
<label>Label name</label>
|
<label>Label name</label>
|
||||||
<input type="text" class="span3" placeholder="Type something…">
|
<input type="text" placeholder="Type something…">
|
||||||
<span class="help-block">Example block-level help text here.</span>
|
<span class="help-block">Example block-level help text here.</span>
|
||||||
<label class="checkbox">
|
<label class="checkbox">
|
||||||
<input type="checkbox"> Check me out
|
<input type="checkbox"> Check me out
|
||||||
|
|
@ -770,21 +733,28 @@ For example, <code>section</code> should be wrapped as inline.
|
||||||
</form>
|
</form>
|
||||||
</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><input></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">
|
||||||
<form class="well form-search">
|
<form class="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>
|
</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, <code>section</code> 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">
|
||||||
<form class="well form-inline">
|
<form class="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">
|
||||||
|
|
@ -804,201 +774,273 @@ For example, <code>section</code> should be wrapped as inline.
|
||||||
</form>
|
</form>
|
||||||
</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">
|
|
||||||
<fieldset>
|
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label class="control-label" for="input01">Text input</label>
|
<label class="control-label" for="">Email</label>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<input type="text" class="input-xlarge" id="input01">
|
<input type="text" placeholder="Email">
|
||||||
<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="">Password</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="password" placeholder="Password">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label class="control-label" for="optionsCheckbox">Checkbox</label>
|
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<label class="checkbox">
|
<label class="checkbox">
|
||||||
<input type="checkbox" id="optionsCheckbox" value="option1">
|
<input type="checkbox"> Remember me
|
||||||
|
</label>
|
||||||
|
<button type="submit" class="btn">Sign in</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<div class="control-group">
|
||||||
|
<label class="control-label" for="">Email</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" placeholder="Email">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group">
|
||||||
|
<label class="control-label" for="">Password</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="password" placeholder="Password">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group">
|
||||||
|
<div class="controls">
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox"> Remember me
|
||||||
|
</label>
|
||||||
|
<button type="submit" class="btn">Sign in</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
|
<hr class="bs-docs-separator"></hr>
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Supported form controls</h2>
|
||||||
|
<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">
|
||||||
|
<input type="text" placeholder="Text input">
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3>Textarea</h3>
|
||||||
|
<p>Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.</p>
|
||||||
|
<form class="bs-docs-example form-inline">
|
||||||
|
<textarea rows="3"></textarea>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<textarea id="textarea" rows="3"></textarea>
|
||||||
|
</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—be sure to include why it's great
|
Option one is this and that—be sure to include why it's great
|
||||||
</label>
|
</label>
|
||||||
</div>
|
<br>
|
||||||
</div>
|
<label class="radio">
|
||||||
<div class="control-group">
|
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||||
<label class="control-label" for="select01">Select list</label>
|
Option one is this and that—be sure to include why it's great
|
||||||
<div class="controls">
|
</label>
|
||||||
<select id="select01">
|
<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">
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox" value="">
|
||||||
|
Option one is this and that—be sure to include why it's great
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="radio">
|
||||||
|
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||||
|
Option one is this and that—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>
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
</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>something</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>
|
||||||
</div>
|
<br>
|
||||||
</div>
|
<select>
|
||||||
<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>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>
|
||||||
</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 class="control-group">
|
|
||||||
<label class="control-label" for="textarea">Textarea</label>
|
|
||||||
<div class="controls">
|
|
||||||
<textarea class="input-xlarge" id="textarea" rows="3"></textarea>
|
|
||||||
</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>
|
||||||
<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">
|
||||||
<form class="form-horizontal">
|
<select>
|
||||||
<fieldset>
|
<option>something</option>
|
||||||
<legend>Legend text</legend>
|
<option>2</option>
|
||||||
<div class="control-group">
|
<option>3</option>
|
||||||
<label class="control-label" for="input01">Text input</label>
|
<option>4</option>
|
||||||
<div class="controls">
|
<option>5</option>
|
||||||
<input type="text" class="input-xlarge" id="input01">
|
</select>
|
||||||
<p class="help-block">Supporting help text</p>
|
|
||||||
</div>
|
<select>
|
||||||
</div>
|
<option>1</option>
|
||||||
</fieldset>
|
<option>2</option>
|
||||||
</form>
|
<option>3</option>
|
||||||
|
<option>4</option>
|
||||||
|
<option>5</option>
|
||||||
|
</select>
|
||||||
</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>
|
|
||||||
<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">
|
|
||||||
<fieldset
|
|
||||||
class="control-group error">
|
|
||||||
…
|
|
||||||
</fieldset>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<form class="form-horizontal">
|
|
||||||
<fieldset>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="focusedInput">Focused input</label>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<h2>Extending form controls</h2>
|
<h2>Extending form controls</h2>
|
||||||
<h3>Prepend & append inputs</h3>
|
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
|
||||||
<p>Input groups—with appended or prepended text—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>Checkboxes and radios</h3>
|
|
||||||
<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><label class="checkbox"></code> that wraps the <code><input type="checkbox"></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>
|
|
||||||
<hr>
|
|
||||||
<h4>Inline forms and append/prepend</h4>
|
|
||||||
<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>
|
|
||||||
<hr>
|
|
||||||
<h4>Form help text</h4>
|
|
||||||
<p>To add help text for your form inputs, include inline help text with <code><span class="help-inline"></code> or a help text block with <code><p class="help-block"></code> after the input element.</p>
|
|
||||||
|
|
||||||
<form class="form-horizontal">
|
<h3>Prepended and appended inputs</h3>
|
||||||
<fieldset>
|
<p>Add text or buttons before or after any text-based input.</p>
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label">Form grid sizes</label>
|
<h4>Default options</h4>
|
||||||
|
<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>
|
||||||
|
<form class="bs-docs-example form-inline">
|
||||||
|
<div class="input-prepend">
|
||||||
|
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="input-append">
|
||||||
|
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<div class="input-prepend">
|
||||||
|
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
|
||||||
|
</div>
|
||||||
|
<div class="input-append">
|
||||||
|
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
|
||||||
|
</div>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h4>Combined</h4>
|
||||||
|
<p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
|
||||||
|
<form class="bs-docs-example form-inline">
|
||||||
|
<div class="input-prepend input-append">
|
||||||
|
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<div class="input-prepend input-append">
|
||||||
|
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
|
||||||
|
</div>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h4>Buttons instead of text</h4>
|
||||||
|
<p>Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
|
||||||
|
<form class="bs-docs-example">
|
||||||
|
<div class="input-append">
|
||||||
|
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="input-append">
|
||||||
|
<input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<div class="input-append">
|
||||||
|
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-append">
|
||||||
|
<input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
|
||||||
|
</div>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3>Control sizing</h3>
|
||||||
|
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
|
||||||
|
|
||||||
|
<h4>Relative sizing</h4>
|
||||||
|
<form class="bs-docs-example">
|
||||||
|
<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">
|
||||||
|
<input class="input-large" type="text" placeholder=".input-large">
|
||||||
|
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
|
||||||
|
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<input class="input-mini" type="text">
|
||||||
|
<input class="input-small" type="text">
|
||||||
|
<input class="input-medium" type="text">
|
||||||
|
<input class="input-large" type="text">
|
||||||
|
<input class="input-xlarge" type="text">
|
||||||
|
<input class="input-xxlarge" type="text">
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h4>Grid sizing</h4>
|
||||||
|
<p>Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.</p>
|
||||||
|
<form class="bs-docs-example">
|
||||||
<div class="controls docs-input-sizes">
|
<div class="controls docs-input-sizes">
|
||||||
<input class="span1" type="text" placeholder=".span1">
|
<input class="span1" type="text" placeholder=".span1">
|
||||||
<input class="span2" type="text" placeholder=".span2">
|
<input class="span2" type="text" placeholder=".span2">
|
||||||
|
|
@ -1024,111 +1066,132 @@ For example, <code>section</code> should be wrapped as inline.
|
||||||
<option>4</option>
|
<option>4</option>
|
||||||
<option>5</option>
|
<option>5</option>
|
||||||
</select>
|
</select>
|
||||||
<p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<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>
|
|
||||||
<p class="help-block">Here's some help text</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="appendedInput">Appended text</label>
|
|
||||||
<div class="controls">
|
|
||||||
<div class="input-append">
|
|
||||||
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
|
|
||||||
</div>
|
|
||||||
<span class="help-inline">Here's more help text</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="appendedPrependedInput">Append and prepend</label>
|
|
||||||
<div class="controls">
|
|
||||||
<div class="input-prepend input-append">
|
|
||||||
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="appendedInputButton">Append with button</label>
|
|
||||||
<div class="controls">
|
|
||||||
<div class="input-append">
|
|
||||||
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="appendedInputButtons">Two-button append</label>
|
|
||||||
<div class="controls">
|
|
||||||
<div class="input-append">
|
|
||||||
<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>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="inlineCheckboxes">Inline checkboxes</label>
|
|
||||||
<div class="controls">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="optionsCheckboxList">Checkboxes</label>
|
|
||||||
<div class="controls">
|
|
||||||
<label class="checkbox">
|
|
||||||
<input type="checkbox" name="optionsCheckboxList1" value="option1">
|
|
||||||
Option one is this and that—be sure to include why it's great
|
|
||||||
</label>
|
|
||||||
<label class="checkbox">
|
|
||||||
<input type="checkbox" name="optionsCheckboxList2" value="option2">
|
|
||||||
Option two can also be checked and included in form results
|
|
||||||
</label>
|
|
||||||
<label class="checkbox">
|
|
||||||
<input type="checkbox" name="optionsCheckboxList3" value="option3">
|
|
||||||
Option three can—yes, you guessed it—also be checked and included in form results
|
|
||||||
</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 class="control-group">
|
|
||||||
<label class="control-label">Radio buttons</label>
|
|
||||||
<div class="controls">
|
|
||||||
<label class="radio">
|
|
||||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
|
||||||
Option one is this and that—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>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<input class="span1" type="text">
|
||||||
|
<input class="span2" type="text">
|
||||||
|
<input class="span3" type="text">
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3>Uneditable inputs</h3>
|
||||||
|
<p>Present data in a form that's not editable without using actual form markup.</p>
|
||||||
|
<form class="bs-docs-example">
|
||||||
|
<span class="input-xlarge uneditable-input">Some value here</span>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<span class="input-xlarge uneditable-input">Some value here</span>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<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">
|
<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>
|
|
||||||
</form>
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<div class="form-actions">
|
||||||
|
<button type="submit" class="btn btn-primary">Save changes</button>
|
||||||
|
<button class="btn">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<span class="help-inline">Inline help text</span>
|
||||||
|
</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">
|
||||||
|
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
|
||||||
|
</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">
|
||||||
|
<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
|
||||||
|
</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">
|
||||||
|
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
||||||
|
</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 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>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<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>
|
||||||
|
</pre>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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><form></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 @@
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<form class="well">
|
<form class="well">
|
||||||
<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}}">
|
||||||
<span class="help-block">Example block-level help text here.</span>
|
<span class="help-block">Example block-level help text here.</span>
|
||||||
<label class="checkbox">
|
<label class="checkbox">
|
||||||
<input type="checkbox"> {{_i}}Check me out{{/i}}
|
<input type="checkbox"> {{_i}}Check me out{{/i}}
|
||||||
|
|
@ -701,21 +664,28 @@
|
||||||
</form>
|
</form>
|
||||||
</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><input></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">
|
||||||
<form class="well form-search">
|
<form class="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>
|
</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 @@
|
||||||
<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">
|
||||||
<form class="well form-inline">
|
<form class="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">
|
||||||
|
|
@ -735,201 +705,273 @@
|
||||||
</form>
|
</form>
|
||||||
</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">
|
|
||||||
<fieldset>
|
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
|
<label class="control-label" for="">{{_i}}Email{{/i}}</label>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<input type="text" class="input-xlarge" id="input01">
|
<input type="text" placeholder="{{_i}}Email{{/i}}">
|
||||||
<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="">{{_i}}Password{{/i}}</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="password" placeholder="{{_i}}Password{{/i}}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label class="control-label" for="optionsCheckbox">{{_i}}Checkbox{{/i}}</label>
|
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<label class="checkbox">
|
<label class="checkbox">
|
||||||
<input type="checkbox" id="optionsCheckbox" value="option1">
|
<input type="checkbox"> {{_i}}Remember me{{/i}}
|
||||||
|
</label>
|
||||||
|
<button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<div class="control-group">
|
||||||
|
<label class="control-label" for="">{{_i}}Email{{/i}}</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" placeholder="{{_i}}Email{{/i}}">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group">
|
||||||
|
<label class="control-label" for="">{{_i}}Password{{/i}}</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="password" placeholder="{{_i}}Password{{/i}}">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group">
|
||||||
|
<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>
|
||||||
|
</form>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
|
<hr class="bs-docs-separator"></hr>
|
||||||
|
|
||||||
|
|
||||||
|
<h2>{{_i}}Supported form controls{{/i}}</h2>
|
||||||
|
<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">
|
||||||
|
<input type="text" placeholder="Text input">
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3>{{_i}}Textarea{{/i}}</h3>
|
||||||
|
<p>{{_i}}Form control which supports multiple lines of text. Change <code>row</code> attribute as necessary.{{/i}}</p>
|
||||||
|
<form class="bs-docs-example form-inline">
|
||||||
|
<textarea rows="3"></textarea>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<textarea id="textarea" rows="3"></textarea>
|
||||||
|
</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—be sure to include why it's great{{/i}}
|
{{_i}}Option one is this and that—be sure to include why it's great{{/i}}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
<br>
|
||||||
</div>
|
<label class="radio">
|
||||||
<div class="control-group">
|
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||||
<label class="control-label" for="select01">{{_i}}Select list{{/i}}</label>
|
{{_i}}Option one is this and that—be sure to include why it's great{{/i}}
|
||||||
<div class="controls">
|
</label>
|
||||||
<select id="select01">
|
<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">
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox" value="">
|
||||||
|
{{_i}}Option one is this and that—be sure to include why it's great{{/i}}
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="radio">
|
||||||
|
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||||
|
{{_i}}Option one is this and that—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>
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
</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>something</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>
|
||||||
</div>
|
<br>
|
||||||
</div>
|
<select>
|
||||||
<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>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>
|
||||||
</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 class="control-group">
|
|
||||||
<label class="control-label" for="textarea">{{_i}}Textarea{{/i}}</label>
|
|
||||||
<div class="controls">
|
|
||||||
<textarea class="input-xlarge" id="textarea" rows="3"></textarea>
|
|
||||||
</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>
|
||||||
<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">
|
||||||
<form class="form-horizontal">
|
<select>
|
||||||
<fieldset>
|
<option>something</option>
|
||||||
<legend>{{_i}}Legend text{{/i}}</legend>
|
<option>2</option>
|
||||||
<div class="control-group">
|
<option>3</option>
|
||||||
<label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
|
<option>4</option>
|
||||||
<div class="controls">
|
<option>5</option>
|
||||||
<input type="text" class="input-xlarge" id="input01">
|
</select>
|
||||||
<p class="help-block">{{_i}}Supporting help text{{/i}}</p>
|
|
||||||
</div>
|
<select>
|
||||||
</div>
|
<option>1</option>
|
||||||
</fieldset>
|
<option>2</option>
|
||||||
</form>
|
<option>3</option>
|
||||||
|
<option>4</option>
|
||||||
|
<option>5</option>
|
||||||
|
</select>
|
||||||
</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>
|
|
||||||
<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">
|
|
||||||
<fieldset
|
|
||||||
class="control-group error">
|
|
||||||
…
|
|
||||||
</fieldset>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<form class="form-horizontal">
|
|
||||||
<fieldset>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="focusedInput">{{_i}}Focused input{{/i}}</label>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<h2>{{_i}}Extending form controls{{/i}}</h2>
|
<h2>{{_i}}Extending form controls{{/i}}</h2>
|
||||||
<h3>{{_i}}Prepend & 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—with appended or prepended text—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}}Checkboxes and radios{{/i}}</h3>
|
|
||||||
<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><label class="checkbox"></code> that wraps the <code><input type="checkbox"></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>
|
|
||||||
<hr>
|
|
||||||
<h4>{{_i}}Inline forms and append/prepend{{/i}}</h4>
|
|
||||||
<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>
|
|
||||||
<hr>
|
|
||||||
<h4>{{_i}}Form help text{{/i}}</h4>
|
|
||||||
<p>{{_i}}To add help text for your form inputs, include inline help text with <code><span class="help-inline"></code> or a help text block with <code><p class="help-block"></code> after the input element.{{/i}}</p>
|
|
||||||
|
|
||||||
<form class="form-horizontal">
|
<h3>{{_i}}Prepended and appended inputs{{/i}}</h3>
|
||||||
<fieldset>
|
<p>{{_i}}Add text or buttons before or after any text-based input.{{/i}}</p>
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label">{{_i}}Form grid sizes{{/i}}</label>
|
<h4>{{_i}}Default options{{/i}}</h4>
|
||||||
|
<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>
|
||||||
|
<form class="bs-docs-example form-inline">
|
||||||
|
<div class="input-prepend">
|
||||||
|
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="input-append">
|
||||||
|
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<div class="input-prepend">
|
||||||
|
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
|
||||||
|
</div>
|
||||||
|
<div class="input-append">
|
||||||
|
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
|
||||||
|
</div>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h4>{{_i}}Combined{{/i}}</h4>
|
||||||
|
<p>{{_i}}Use both classes and two instances of <code>.add-on</code> to prepend and append an input.{{/i}}</p>
|
||||||
|
<form class="bs-docs-example form-inline">
|
||||||
|
<div class="input-prepend input-append">
|
||||||
|
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<div class="input-prepend input-append">
|
||||||
|
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
|
||||||
|
</div>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h4>{{_i}}Buttons instead of text{{/i}}</h4>
|
||||||
|
<p>{{_i}}Instead of a <code><span></code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p>
|
||||||
|
<form class="bs-docs-example">
|
||||||
|
<div class="input-append">
|
||||||
|
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="input-append">
|
||||||
|
<input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<div class="input-append">
|
||||||
|
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-append">
|
||||||
|
<input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
|
||||||
|
</div>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3>{{_i}}Control sizing{{/i}}</h3>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<h4>{{_i}}Relative sizing{{/i}}</h4>
|
||||||
|
<form class="bs-docs-example">
|
||||||
|
<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">
|
||||||
|
<input class="input-large" type="text" placeholder=".input-large">
|
||||||
|
<input class="input-xlarge" type="text" placeholder=".input-xlarge">
|
||||||
|
<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<input class="input-mini" type="text">
|
||||||
|
<input class="input-small" type="text">
|
||||||
|
<input class="input-medium" type="text">
|
||||||
|
<input class="input-large" type="text">
|
||||||
|
<input class="input-xlarge" type="text">
|
||||||
|
<input class="input-xxlarge" type="text">
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h4>{{_i}}Grid sizing{{/i}}</h4>
|
||||||
|
<p>{{_i}}Use <code>.span1</code> to <code>.span12</code> for inputs that match the same sizes of the grid columns.{{/i}}</p>
|
||||||
|
<form class="bs-docs-example">
|
||||||
<div class="controls docs-input-sizes">
|
<div class="controls docs-input-sizes">
|
||||||
<input class="span1" type="text" placeholder=".span1">
|
<input class="span1" type="text" placeholder=".span1">
|
||||||
<input class="span2" type="text" placeholder=".span2">
|
<input class="span2" type="text" placeholder=".span2">
|
||||||
|
|
@ -955,111 +997,132 @@
|
||||||
<option>4</option>
|
<option>4</option>
|
||||||
<option>5</option>
|
<option>5</option>
|
||||||
</select>
|
</select>
|
||||||
<p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<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>
|
|
||||||
<p class="help-block">{{_i}}Here's some help text{{/i}}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="appendedInput">{{_i}}Appended text{{/i}}</label>
|
|
||||||
<div class="controls">
|
|
||||||
<div class="input-append">
|
|
||||||
<input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
|
|
||||||
</div>
|
|
||||||
<span class="help-inline">{{_i}}Here's more help text{{/i}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="appendedPrependedInput">{{_i}}Append and prepend{{/i}}</label>
|
|
||||||
<div class="controls">
|
|
||||||
<div class="input-prepend input-append">
|
|
||||||
<span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="appendedInputButton">{{_i}}Append with button{{/i}}</label>
|
|
||||||
<div class="controls">
|
|
||||||
<div class="input-append">
|
|
||||||
<input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="appendedInputButtons">{{_i}}Two-button append{{/i}}</label>
|
|
||||||
<div class="controls">
|
|
||||||
<div class="input-append">
|
|
||||||
<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>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="inlineCheckboxes">{{_i}}Inline checkboxes{{/i}}</label>
|
|
||||||
<div class="controls">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label" for="optionsCheckboxList">{{_i}}Checkboxes{{/i}}</label>
|
|
||||||
<div class="controls">
|
|
||||||
<label class="checkbox">
|
|
||||||
<input type="checkbox" name="optionsCheckboxList1" value="option1">
|
|
||||||
{{_i}}Option one is this and that—be sure to include why it's great{{/i}}
|
|
||||||
</label>
|
|
||||||
<label class="checkbox">
|
|
||||||
<input type="checkbox" name="optionsCheckboxList2" value="option2">
|
|
||||||
{{_i}}Option two can also be checked and included in form results{{/i}}
|
|
||||||
</label>
|
|
||||||
<label class="checkbox">
|
|
||||||
<input type="checkbox" name="optionsCheckboxList3" value="option3">
|
|
||||||
{{_i}}Option three can—yes, you guessed it—also be checked and included in form results{{/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>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
|
||||||
<label class="control-label">{{_i}}Radio buttons{{/i}}</label>
|
|
||||||
<div class="controls">
|
|
||||||
<label class="radio">
|
|
||||||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
|
||||||
{{_i}}Option one is this and that—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>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<input class="span1" type="text">
|
||||||
|
<input class="span2" type="text">
|
||||||
|
<input class="span3" type="text">
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3>{{_i}}Uneditable inputs{{/i}}</h3>
|
||||||
|
<p>{{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}</p>
|
||||||
|
<form class="bs-docs-example">
|
||||||
|
<span class="input-xlarge uneditable-input">Some value here</span>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<span class="input-xlarge uneditable-input">Some value here</span>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<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">
|
<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>
|
|
||||||
</form>
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<div class="form-actions">
|
||||||
|
<button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
|
||||||
|
<button class="btn">{{_i}}Cancel{{/i}}</button>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<span class="help-inline">Inline help text</span>
|
||||||
|
</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">
|
||||||
|
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
|
||||||
|
</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">
|
||||||
|
<input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
|
||||||
|
</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">
|
||||||
|
<input class="input-xlarge" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here...{{/i}}" disabled>
|
||||||
|
</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 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>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<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>
|
||||||
|
</pre>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue