diff options
Diffstat (limited to 'docs/base-css.html')
| -rw-r--r-- | docs/base-css.html | 755 |
1 files changed, 409 insertions, 346 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index 71f8da87e..0525a9674 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -710,48 +710,11 @@ For example, <code>section</code> should be wrapped as inline. <h1>Forms</h1> </div> - <h2>Controls and layouts</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>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> + <h2>Default styles</h2> + <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> <form class="bs-docs-example"> <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> <label class="checkbox"> <input type="checkbox"> Check me out @@ -761,7 +724,7 @@ For example, <code>section</code> should be wrapped as inline. <pre class="prettyprint linenums"> <form class="well"> <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> <label class="checkbox"> <input type="checkbox"> Check me out @@ -770,21 +733,28 @@ For example, <code>section</code> should be wrapped as inline. </form> </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> - <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"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form> <pre class="prettyprint linenums"> -<form class="well form-search"> +<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form> </pre> <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"> <input type="text" class="input-small" placeholder="Email"> <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> </form> <pre class="prettyprint linenums"> -<form class="well form-inline"> +<form class="form-inline"> <input type="text" class="input-small" placeholder="Email"> <input type="password" class="input-small" placeholder="Password"> <label class="checkbox"> @@ -804,331 +774,424 @@ For example, <code>section</code> should be wrapped as inline. </form> </pre> - <br> - - <h2>Horizontal forms</h2> - <p>Shown on the right are all the default form controls we support. Here's the bulleted list:</p> + <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> <ul> - <li>text inputs (text, password, email, etc)</li> - <li>checkbox</li> - <li>radio</li> - <li>select</li> - <li>multiple select</li> - <li>file input</li> - <li>textarea</li> + <li>Add <code>.form-horizontal</code> to the form</li> + <li>Wrap labels and controls in <code>.control-group</code></li> + <li>Add <code>.control-label</code> to the label</li> + <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li> </ul> - - <form class="form-horizontal"> - <fieldset> - <div class="control-group"> - <label class="control-label" for="input01">Text input</label> - <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—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> + <form class="bs-docs-example form-horizontal"> + <div class="control-group"> + <label class="control-label" for="">Email</label> + <div class="controls"> + <input type="text" placeholder="Email"> </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="control-group"> + <label class="control-label" for="">Password</label> + <div class="controls"> + <input type="password" placeholder="Password"> </div> - <div class="form-actions"> - <button type="submit" class="btn btn-primary">Save changes</button> - <button class="btn">Cancel</button> + </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> - </fieldset> + </div> </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"> <form class="form-horizontal"> - <fieldset> - <legend>Legend text</legend> - <div class="control-group"> - <label class="control-label" for="input01">Text input</label> - <div class="controls"> - <input type="text" class="input-xlarge" id="input01"> - <p class="help-block">Supporting help text</p> - </div> + <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> - </fieldset> + </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> - <br> - <h2>Form control states</h2> - <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> + <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"> -<fieldset - class="control-group error"> - … -</fieldset> +<input type="text" placeholder="Text input"> </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> + <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 + </label> + <br> + <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> + </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>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"> +<select> + <option>something</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> +</select> + +<select> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> +</select> +</pre> + + + <hr class="bs-docs-separator"></hr> - <br> <h2>Extending form controls</h2> - <h3>Prepend & append inputs</h3> - <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"> - <fieldset> - <div class="control-group"> - <label class="control-label">Form grid sizes</label> - <div class="controls docs-input-sizes"> - <input class="span1" type="text" placeholder=".span1"> - <input class="span2" type="text" placeholder=".span2"> - <input class="span3" type="text" placeholder=".span3"> - <select class="span1"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - <select class="span2"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </select> - <select class="span3"> - <option>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - </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> + <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p> + + <h3>Prepended and appended inputs</h3> + <p>Add text or buttons before or after any text-based input.</p> + + <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"> + <input class="span1" type="text" placeholder=".span1"> + <input class="span2" type="text" placeholder=".span2"> + <input class="span3" type="text" placeholder=".span3"> + <select class="span1"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + <select class="span2"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + <select class="span3"> + <option>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + </select> + </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"> + <button type="submit" class="btn btn-primary">Save changes</button> + <button class="btn">Cancel</button> + </div> + </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 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 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 class="form-actions"> - <button type="submit" class="btn btn-primary">Save changes</button> - <button class="btn">Cancel</button> + </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> - </fieldset> + </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> |