diff options
author | Chris Rebert <github@rebertia.com> | 2012-12-10 13:33:02 +0400 |
---|---|---|
committer | Chris Rebert <github@rebertia.com> | 2012-12-10 13:33:02 +0400 |
commit | 48759eee941729a2e21a89215123b2e05c0b8549 (patch) | |
tree | 28c07d971ee07b94261eb2b7cf877ce33bb5184b /docs | |
parent | 3b5d4f52a3c2a11ec732fd9ca3b58e83290cd03c (diff) |
document fieldset[disabled] styling added in #6199; per @mdo
Diffstat (limited to 'docs')
-rw-r--r-- | docs/css.html | 37 | ||||
-rw-r--r-- | docs/templates/pages/css.mustache | 37 |
2 files changed, 74 insertions, 0 deletions
diff --git a/docs/css.html b/docs/css.html index 728dac389f..f2f54a3fc1 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1725,6 +1725,43 @@ For example, <code><section></code> should be wrapped as inlin <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> </pre> + <h3>Disabled fieldsets</h3> + <p>Add the <code>disabled</code> attribute on a <code>fieldset</code> to disable all the controls within the fieldset at once.</p> + <form class="bs-docs-example form-inline"> + <fieldset disabled> + <input type="text" class="span4" placeholder="These controls are all disabled just"> + <select class="span4"> + <option>by being under a disabled fieldset</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 class="prettyprint linenums"> +<form class="form-inline"> + <fieldset disabled> + <input type="text" class="span4" placeholder="These controls are all disabled just"> + <select class="span4"> + <option>by being under a disabled fieldset</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> + <p> + <span class="label label-info">Heads up!</span> + <code><a></code> buttons within a <code>fieldset[disabled]</code> will be styled like they each had the <code>.disabled</code> class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional. + </p> + <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> diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index cf99025196..790c0442bc 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1665,6 +1665,43 @@ For example, <code><section></code> should be wrapped as inlin <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> </pre> + <h3>Disabled fieldsets</h3> + <p>Add the <code>disabled</code> attribute on a <code>fieldset</code> to disable all the controls within the fieldset at once.</p> + <form class="bs-docs-example form-inline"> + <fieldset disabled> + <input type="text" class="span4" placeholder="These controls are all disabled just"> + <select class="span4"> + <option>by being under a disabled fieldset</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 class="prettyprint linenums"> +<form class="form-inline"> + <fieldset disabled> + <input type="text" class="span4" placeholder="These controls are all disabled just"> + <select class="span4"> + <option>by being under a disabled fieldset</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> + <p> + <span class="label label-info">Heads up!</span> + <code><a></code> buttons within a <code>fieldset[disabled]</code> will be styled like they each had the <code>.disabled</code> class, but this only affects aesthetics; you must use custom JavaScript to actually make such links non-functional. + </p> + <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> |