rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #19139 from twbs/v4-custom-forms-validation

Browse Source 
v4: Validation states on custom forms
This commit is contained in:
Mark Otto 2016-02-13 18:04:51 -08:00
commit 6ec9aa34a4
2 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
docs/components/forms.md
View File

@ -764,6 +764,33 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at
</label> </label>
{% endexample %} {% endexample %}
#### Validation states
Add other states to your custom forms with our validation classes.
{% example html %}
<div class="form-group has-success">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
<div class="form-group has-warning">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
<div class="form-group has-danger m-b-0">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
{% endexample %}
#### Stacked #### Stacked

3
scss/mixins/_forms.scss
View File

@ -14,7 +14,8 @@
&.radio label, &.radio label,
&.checkbox label, &.checkbox label,
&.radio-inline label, &.radio-inline label,
&.checkbox-inline label { &.checkbox-inline label,
.custom-control {
color: $color; color: $color;
} }
// Set the border and box shadow on specific inputs to match // Set the border and box shadow on specific inputs to match