rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

document fieldset[disabled] styling added in #6199; per @mdo

Browse Source
This commit is contained in:
Chris Rebert 2012-12-10 01:33:02 -08:00
parent 3b5d4f52a3
commit 48759eee94
2 changed files with 74 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
docs/css.html
View File

@ -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">
&lt;form class="form-inline"&gt;
&lt;fieldset disabled&gt;
&lt;input type="text" class="span4" placeholder="These controls are all disabled just"&gt;
&lt;select class="span4"&gt;
&lt;option&gt;by being under a disabled fieldset&lt;/option&gt;
&lt;/select&gt;
&lt;div class="checkbox"&gt;
&lt;label&gt;
&lt;input type="checkbox"&gt; Can't check this
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
</pre>
<p>
<span class="label label-info">Heads up!</span>
<code>&lt;a&gt;</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>

37
docs/templates/pages/css.mustache vendored
View File

@ -1665,6 +1665,43 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled&gt;
</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">
&lt;form class="form-inline"&gt;
&lt;fieldset disabled&gt;
&lt;input type="text" class="span4" placeholder="These controls are all disabled just"&gt;
&lt;select class="span4"&gt;
&lt;option&gt;by being under a disabled fieldset&lt;/option&gt;
&lt;/select&gt;
&lt;div class="checkbox"&gt;
&lt;label&gt;
&lt;input type="checkbox"&gt; Can't check this
&lt;/label&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
</pre>
<p>
<span class="label label-info">Heads up!</span>
<code>&lt;a&gt;</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>