diff options
| author | Mark Otto <[email protected]> | 2012-12-28 14:47:55 -0600 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-12-28 14:47:55 -0600 |
| commit | 5a2dc0b897968838cf09e0ff990b3a411623ed68 (patch) | |
| tree | 7936f30952b931af552247cc4d66704feecffc2b /docs | |
| parent | dc5c6d6be8e46e36aa8a2e1d35f6ed8c8e3cd8cb (diff) | |
| download | bootstrap-5a2dc0b897968838cf09e0ff990b3a411623ed68.tar.xz bootstrap-5a2dc0b897968838cf09e0ff990b3a411623ed68.zip | |
Improve documentation for new form validation styles
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/css.html | 17 | ||||
| -rw-r--r-- | docs/templates/pages/css.mustache | 17 |
2 files changed, 22 insertions, 12 deletions
diff --git a/docs/css.html b/docs/css.html index 31e745378..53cd678d0 100644 --- a/docs/css.html +++ b/docs/css.html @@ -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="[email protected]" 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"> diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index c82d48351..47abef021 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -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="[email protected]" 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"> |