kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Fixes #20608 and #20578: Consistent checkbox and radio markup (#20629)

Browse source 
- Update docs examples to use newer .form-check suite of classes
- Update form validation mixin to use newer classes as well
This commit is contained in:
Mark Otto 2016-09-05 11:39:37 -07:00 committed by GitHub
parent dc5c1421c6
commit 7e18498b64
2 changed files with 26 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
docs/components/forms.md
View file

@ -59,28 +59,29 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
</div> </div>
<fieldset class="form-group"> <fieldset class="form-group">
<legend>Radio buttons</legend> <legend>Radio buttons</legend>
<div class="radio"> <div class="form-check">
<label> <label class="form-check-label">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great Option one is this and that&mdash;be sure to include why it's great
</label> </label>
</div> </div>
<div class="radio"> <div class="form-check">
<label> <label class="form-check-label">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one Option two can be something else and selecting it will deselect option one
</label> </label>
</div> </div>
<div class="radio disabled"> <div class="form-check disabled">
<label> <label class="form-check-label">
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled Option three is disabled
</label> </label>
</div> </div>
</fieldset> </fieldset>
<div class="checkbox"> <div class="form-check">
<label> <label class="form-check-label">
<input type="checkbox"> Check me out <input type="checkbox" class="form-check-input">
Check me out
</label> </label>
</div> </div>
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
@ -150,10 +151,8 @@ Below is a complete list of the specific form controls supported by Bootstrap an
<tr> <tr>
<td class="text-nowrap"> <td class="text-nowrap">
{% markdown %} {% markdown %}
`.radio`<br> `.form-check`<br>
`.radio-inline`<br> `.form-check-inline`
`.checkbox`<br>
`.checkbox-inline`
{% endmarkdown %} {% endmarkdown %}
</td> </td>
<td class="text-nowrap"> <td class="text-nowrap">
@ -730,21 +729,21 @@ Ensure that an alternative indication of state is also provided. For instance, y
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<div class="checkbox has-success"> <div class="form-check has-success">
<label> <label class="form-check-label">
<input type="checkbox" id="checkboxSuccess" value="option1"> <input type="checkbox" class="form-check-input" id="checkboxSuccess" value="option1">
Checkbox with success Checkbox with success
</label> </label>
</div> </div>
<div class="checkbox has-warning"> <div class="form-check has-warning">
<label> <label class="form-check-label">
<input type="checkbox" id="checkboxWarning" value="option1"> <input type="checkbox" class="form-check-input" id="checkboxWarning" value="option1">
Checkbox with warning Checkbox with warning
</label> </label>
</div> </div>
<div class="checkbox has-danger"> <div class="form-check has-danger">
<label> <label class="form-check-label">
<input type="checkbox" id="checkboxDanger" value="option1"> <input type="checkbox" class="form-check-input" id="checkboxDanger" value="option1">
Checkbox with danger Checkbox with danger
</label> </label>
</div> </div>

10
scss/mixins/_forms.scss
View file

@ -7,14 +7,8 @@
// Color the label and help text // Color the label and help text
.form-control-feedback, .form-control-feedback,
.form-control-label, .form-control-label,
.radio, .form-check-label,
.checkbox, .form-check-inline,
.radio-inline,
.checkbox-inline,
&.radio label,
&.checkbox label,
&.radio-inline label,
&.checkbox-inline label,
.custom-control { .custom-control {
color: $color; color: $color;
} }