diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index f2e29d6ff3094a18cc1114657958cd87ac27b4f8..95bb29c59377161ced4c2d09cbbde4c6575f5a34 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -207,7 +207,8 @@ {% endhighlight %} <h3>Checkboxes and radios</h3> - <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p> + <p>Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p> + <p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code><label></code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code><fieldset></code>.</p> <h4>Default (stacked)</h4> <div class="bs-example"> <form role="form"> @@ -217,6 +218,12 @@ Option one is this and that—be sure to include why it's great </label> </div> + <div class="checkbox disabled"> + <label> + <input type="checkbox" value="" disabled> + Option two is disabled + </label> + </div> <br> <div class="radio"> <label> @@ -230,6 +237,12 @@ Option two can be something else and selecting it will deselect option one </label> </div> + <div class="radio disabled"> + <label> + <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> + Option three is disabled + </label> + </div> </form> </div><!-- /.bs-example --> {% highlight html %} @@ -239,6 +252,12 @@ Option one is this and that—be sure to include why it's great </label> </div> +<div class="checkbox disabled"> + <label> + <input type="checkbox" value="" disabled> + Option two is disabled + </label> +</div> <div class="radio"> <label> @@ -252,6 +271,12 @@ Option two can be something else and selecting it will deselect option one </label> </div> +<div class="radio disabled"> + <label> + <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> + Option three is disabled + </label> +</div> {% endhighlight %} <h4>Inline checkboxes and radios</h4>