rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'v4-forms-cleanup' of https://github.com/twbs/bootstrap into v4-forms-cleanup

Browse Source
This commit is contained in:
Mark Otto 2016-05-09 19:25:42 -07:00
commit 73d9815343
2 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/components/forms.md
View File

@ -427,10 +427,12 @@ Grid-based form layouts also support large and small inputs.
Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Disabled checkboxes and radios are supported, but to provide a `not-allowed` cursor on hover of the parent `<label>`, you'll need to add the `.disabled` class to the parent `.form-check`.
Disabled checkboxes and radios are supported, but to provide a `not-allowed` cursor on hover of the parent `<label>`, you'll need to add the `.disabled` class to the parent `.form-check`. The disabled class will also lighten the text color to help indicate the input's state.
### Default (stacked)
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.
{% example html %}
<div class="form-check">
<label class="form-check-label">
@ -444,7 +446,9 @@ Disabled checkboxes and radios are supported, but to provide a `not-allowed` cur
Option two is disabled
</label>
</div>
{% endexample %}
{% example html %}
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>

1
scss/_forms.scss
View File

@ -198,6 +198,7 @@ select.form-control-lg {
&.disabled {
.form-check-label {
color: $text-muted;
cursor: $cursor-disabled;
}
}