mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Improve documentation for new form validation styles
This commit is contained in:
Mark Otto
parent
dc5c6d6be8
commit
5a2dc0b897
2 changed files with 22 additions and 12 deletions
|
|
@ -1603,7 +1603,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||
<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>
|
||||
<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="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">
|
||||
|
|
@ -1612,7 +1612,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||
<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
|
||||
</pre>
|
||||
|
||||
<h3>Invalid inputs</h3>
|
||||
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
|
||||
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<input class="span3" type="email" placeholder="test@example.com" required>
|
||||
|
|
@ -1621,7 +1621,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||
<input class="span3" type="email" required>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled inputs</h3>
|
||||
<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>
|
||||
|
|
@ -1630,7 +1630,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled fieldsets</h3>
|
||||
<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>
|
||||
|
|
@ -1667,8 +1667,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>Validation states</h3>
|
||||
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
|
||||
<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">
|
||||
|
|
|
|||
17
docs/templates/pages/css.mustache
vendored
17
docs/templates/pages/css.mustache
vendored
|
|
@ -1543,7 +1543,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||
<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>
|
||||
<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="input-xlarge focused" id="focusedInput" type="text" value="This is focused...">
|
||||
|
|
@ -1552,7 +1552,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||
<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
|
||||
</pre>
|
||||
|
||||
<h3>Invalid inputs</h3>
|
||||
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
|
||||
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.</p>
|
||||
<form class="bs-docs-example form-inline">
|
||||
<input class="span3" type="email" placeholder="test@example.com" required>
|
||||
|
|
@ -1561,7 +1561,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||
<input class="span3" type="email" required>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled inputs</h3>
|
||||
<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>
|
||||
|
|
@ -1570,7 +1570,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
|
||||
</pre>
|
||||
|
||||
<h3>Disabled fieldsets</h3>
|
||||
<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>
|
||||
|
|
@ -1607,8 +1607,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped
|
|||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>Validation states</h3>
|
||||
<p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
|
||||
<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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue