mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-18 15:54:26 +01:00
Rearrange forms content
This commit is contained in:
parent
6993fadf7e
commit
3d74c670d3
237
docs/css.html
237
docs/css.html
@ -1267,6 +1267,125 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Form control states</h2>
|
||||||
|
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
|
||||||
|
|
||||||
|
<h3 id="forms-input-focus">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="focused" id="focusedInput" type="text" value="This is focused...">
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<input id="focusedInput" type="text" value="This is focused...">
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
|
||||||
|
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
|
||||||
|
<form class="bs-docs-example form-inline">
|
||||||
|
<input class="span3" type="email" placeholder="test@example.com" required>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<input class="span3" type="email" required>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
|
||||||
|
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
|
||||||
|
<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 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
|
||||||
|
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
|
||||||
|
<form class="bs-docs-example form-inline">
|
||||||
|
<fieldset disabled>
|
||||||
|
<div>
|
||||||
|
<input type="text" class="span4" placeholder="Disabled input">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<select class="span4">
|
||||||
|
<option>Disabled select</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox"> Can't check this
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<form class="form-inline">
|
||||||
|
<fieldset disabled>
|
||||||
|
<input type="text" class="span4" placeholder="Disabled input">
|
||||||
|
<select class="span4">
|
||||||
|
<option>Disabled select</option>
|
||||||
|
</select>
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox"> Can't check this
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3 id="forms-validation">Validation states</h3>
|
||||||
|
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
|
||||||
|
<li>Add .input-with-feedback to the field(s) in question</li>
|
||||||
|
</ul>
|
||||||
|
<p>Validation styles are applied on a per-input basis. With horizontal forms, the <code><label class="control-label"></code> will always be styled.</p>
|
||||||
|
|
||||||
|
<form class="bs-docs-example form-horizontal">
|
||||||
|
<div class="control-group has-warning">
|
||||||
|
<label class="control-label" for="inputWarning">Input with warning</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" class="input-with-feedback" id="inputWarning">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group has-error">
|
||||||
|
<label class="control-label" for="inputError">Input with error</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" class="input-with-feedback" id="inputError">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group has-success">
|
||||||
|
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" class="input-with-feedback" id="inputSuccess">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<div class="control-group has-warning">
|
||||||
|
<label class="control-label" for="inputWarning">Input with warning</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" class="input-with-feedback" id="inputWarning">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group has-error">
|
||||||
|
<label class="control-label" for="inputError">Input with error</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" class="input-with-feedback" id="inputError">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group has-success">
|
||||||
|
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" class="input-with-feedback id="inputSuccess"">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<h2 id="forms-extending">Extending form controls</h2>
|
<h2 id="forms-extending">Extending form controls</h2>
|
||||||
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
|
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
|
||||||
|
|
||||||
@ -1341,7 +1460,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
<h4>Buttons instead of text</h4>
|
<h4>Buttons instead of text</h4>
|
||||||
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
|
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
|
||||||
<form class="bs-docs-example">
|
<form class="bs-docs-example">
|
||||||
@ -1616,123 +1734,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||||||
<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>
|
<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>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
<h2>Form control states</h2>
|
|
||||||
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
|
|
||||||
|
|
||||||
<h3 id="forms-input-focus">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="focused" id="focusedInput" type="text" value="This is focused...">
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<input id="focusedInput" type="text" value="This is focused...">
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
|
|
||||||
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
|
|
||||||
<form class="bs-docs-example form-inline">
|
|
||||||
<input class="span3" type="email" placeholder="test@example.com" required>
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<input class="span3" type="email" required>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
|
|
||||||
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
|
|
||||||
<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 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
|
|
||||||
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
|
|
||||||
<form class="bs-docs-example form-inline">
|
|
||||||
<fieldset disabled>
|
|
||||||
<div>
|
|
||||||
<input type="text" class="span4" placeholder="Disabled input">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<select class="span4">
|
|
||||||
<option>Disabled select</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="checkbox">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox"> Can't check this
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary">Submit</button>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<form class="form-inline">
|
|
||||||
<fieldset disabled>
|
|
||||||
<input type="text" class="span4" placeholder="Disabled input">
|
|
||||||
<select class="span4">
|
|
||||||
<option>Disabled select</option>
|
|
||||||
</select>
|
|
||||||
<div class="checkbox">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox"> Can't check this
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary">Submit</button>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="forms-validation">Validation states</h3>
|
|
||||||
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
|
|
||||||
<ul>
|
|
||||||
<li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
|
|
||||||
<li>Add .input-with-feedback to the field(s) in question</li>
|
|
||||||
</ul>
|
|
||||||
<p>Validation styles are applied on a per-input basis. With horizontal forms, the <code><label class="control-label"></code> will always be styled.</p>
|
|
||||||
|
|
||||||
<form class="bs-docs-example form-horizontal">
|
|
||||||
<div class="control-group has-warning">
|
|
||||||
<label class="control-label" for="inputWarning">Input with warning</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" class="input-with-feedback" id="inputWarning">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group has-error">
|
|
||||||
<label class="control-label" for="inputError">Input with error</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" class="input-with-feedback" id="inputError">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group has-success">
|
|
||||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" class="input-with-feedback" id="inputSuccess">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<div class="control-group has-warning">
|
|
||||||
<label class="control-label" for="inputWarning">Input with warning</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" class="input-with-feedback" id="inputWarning">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group has-error">
|
|
||||||
<label class="control-label" for="inputError">Input with error</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" class="input-with-feedback" id="inputError">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group has-success">
|
|
||||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" class="input-with-feedback id="inputSuccess"">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
237
docs/templates/pages/css.mustache
vendored
237
docs/templates/pages/css.mustache
vendored
@ -1207,6 +1207,125 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Form control states</h2>
|
||||||
|
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
|
||||||
|
|
||||||
|
<h3 id="forms-input-focus">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="focused" id="focusedInput" type="text" value="This is focused...">
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<input id="focusedInput" type="text" value="This is focused...">
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
|
||||||
|
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
|
||||||
|
<form class="bs-docs-example form-inline">
|
||||||
|
<input class="span3" type="email" placeholder="test@example.com" required>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<input class="span3" type="email" required>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
|
||||||
|
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
|
||||||
|
<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 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
|
||||||
|
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
|
||||||
|
<form class="bs-docs-example form-inline">
|
||||||
|
<fieldset disabled>
|
||||||
|
<div>
|
||||||
|
<input type="text" class="span4" placeholder="Disabled input">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<select class="span4">
|
||||||
|
<option>Disabled select</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox"> Can't check this
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<form class="form-inline">
|
||||||
|
<fieldset disabled>
|
||||||
|
<input type="text" class="span4" placeholder="Disabled input">
|
||||||
|
<select class="span4">
|
||||||
|
<option>Disabled select</option>
|
||||||
|
</select>
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox"> Can't check this
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<h3 id="forms-validation">Validation states</h3>
|
||||||
|
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
|
||||||
|
<ul>
|
||||||
|
<li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
|
||||||
|
<li>Add .input-with-feedback to the field(s) in question</li>
|
||||||
|
</ul>
|
||||||
|
<p>Validation styles are applied on a per-input basis. With horizontal forms, the <code><label class="control-label"></code> will always be styled.</p>
|
||||||
|
|
||||||
|
<form class="bs-docs-example form-horizontal">
|
||||||
|
<div class="control-group has-warning">
|
||||||
|
<label class="control-label" for="inputWarning">Input with warning</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" class="input-with-feedback" id="inputWarning">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group has-error">
|
||||||
|
<label class="control-label" for="inputError">Input with error</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" class="input-with-feedback" id="inputError">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group has-success">
|
||||||
|
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" class="input-with-feedback" id="inputSuccess">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<pre class="prettyprint linenums">
|
||||||
|
<div class="control-group has-warning">
|
||||||
|
<label class="control-label" for="inputWarning">Input with warning</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" class="input-with-feedback" id="inputWarning">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group has-error">
|
||||||
|
<label class="control-label" for="inputError">Input with error</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" class="input-with-feedback" id="inputError">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="control-group has-success">
|
||||||
|
<label class="control-label" for="inputSuccess">Input with success</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" class="input-with-feedback id="inputSuccess"">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<h2 id="forms-extending">Extending form controls</h2>
|
<h2 id="forms-extending">Extending form controls</h2>
|
||||||
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
|
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
|
||||||
|
|
||||||
@ -1281,7 +1400,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
<h4>Buttons instead of text</h4>
|
<h4>Buttons instead of text</h4>
|
||||||
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
|
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
|
||||||
<form class="bs-docs-example">
|
<form class="bs-docs-example">
|
||||||
@ -1556,123 +1674,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||||||
<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>
|
<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>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
<h2>Form control states</h2>
|
|
||||||
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
|
|
||||||
|
|
||||||
<h3 id="forms-input-focus">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="focused" id="focusedInput" type="text" value="This is focused...">
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<input id="focusedInput" type="text" value="This is focused...">
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
|
|
||||||
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
|
|
||||||
<form class="bs-docs-example form-inline">
|
|
||||||
<input class="span3" type="email" placeholder="test@example.com" required>
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<input class="span3" type="email" required>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
|
|
||||||
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
|
|
||||||
<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 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
|
|
||||||
<p>Add the <code>disabled</code> attribute to a <code><fieldset></code> to disable all the controls within the <code><fieldset></code> at once. Link buttons (with the <code><a></code> element) will be aesthetically disabled, but you will need custom JavaScript to disable their behavior.</p>
|
|
||||||
<form class="bs-docs-example form-inline">
|
|
||||||
<fieldset disabled>
|
|
||||||
<div>
|
|
||||||
<input type="text" class="span4" placeholder="Disabled input">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<select class="span4">
|
|
||||||
<option>Disabled select</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="checkbox">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox"> Can't check this
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary">Submit</button>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<form class="form-inline">
|
|
||||||
<fieldset disabled>
|
|
||||||
<input type="text" class="span4" placeholder="Disabled input">
|
|
||||||
<select class="span4">
|
|
||||||
<option>Disabled select</option>
|
|
||||||
</select>
|
|
||||||
<div class="checkbox">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox"> Can't check this
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary">Submit</button>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="forms-validation">Validation states</h3>
|
|
||||||
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use:</p>
|
|
||||||
<ul>
|
|
||||||
<li>Add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element</li>
|
|
||||||
<li>Add .input-with-feedback to the field(s) in question</li>
|
|
||||||
</ul>
|
|
||||||
<p>Validation styles are applied on a per-input basis. With horizontal forms, the <code><label class="control-label"></code> will always be styled.</p>
|
|
||||||
|
|
||||||
<form class="bs-docs-example form-horizontal">
|
|
||||||
<div class="control-group has-warning">
|
|
||||||
<label class="control-label" for="inputWarning">Input with warning</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" class="input-with-feedback" id="inputWarning">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group has-error">
|
|
||||||
<label class="control-label" for="inputError">Input with error</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" class="input-with-feedback" id="inputError">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group has-success">
|
|
||||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" class="input-with-feedback" id="inputSuccess">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<pre class="prettyprint linenums">
|
|
||||||
<div class="control-group has-warning">
|
|
||||||
<label class="control-label" for="inputWarning">Input with warning</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" class="input-with-feedback" id="inputWarning">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group has-error">
|
|
||||||
<label class="control-label" for="inputError">Input with error</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" class="input-with-feedback" id="inputError">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group has-success">
|
|
||||||
<label class="control-label" for="inputSuccess">Input with success</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" class="input-with-feedback id="inputSuccess"">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user