.text-help is dead, long live .form-control-feedback

Uses a new more specific class, adds some basic spacing, and clarifies
that this class is only for validation feedback.

Clears up the help text class question in
https://github.com/twbs/bootstrap/pull/18704#issuecomment-168241731 and
addresses the vertical spacing in #18703.
This commit is contained in:
Mark Otto 2016-02-09 01:10:05 -08:00
parent 6140be7a09
commit 371fbdb0e8
3 changed files with 7 additions and 1 deletions

View File

@ -663,6 +663,8 @@ Block help text—for below inputs or for longer lines of help text—can be eas
Bootstrap includes validation styles for danger, warning, and success states on form controls. Bootstrap includes validation styles for danger, warning, and success states on form controls.
- To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles. - To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles.
- To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.form-control-label`, `.form-control`, or custom form element will receive the validation styles.
- Contextual validation text, in addition to your usual form field help text, can be added with the use of `.form-control-feedback`. This text will adapt to the parent `.has-*` class. By default it only includes a bit of `margin` for spacing and a modified `color` for each state.
- Validation icons are `url()`s configured via Sass variables that are applied to `background-image` declarations for each state. - Validation icons are `url()`s configured via Sass variables that are applied to `background-image` declarations for each state.
- You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling. - You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling.
- Icons can also be disabled entirely by setting the variables to `none` or commenting out the source Sass. - Icons can also be disabled entirely by setting the variables to `none` or commenting out the source Sass.

View File

@ -265,6 +265,10 @@ input[type="checkbox"] {
// //
// Apply contextual and semantic states to individual form controls. // Apply contextual and semantic states to individual form controls.
.form-control-feedback {
margin-top: .5rem;
}
.form-control-success, .form-control-success,
.form-control-warning, .form-control-warning,
.form-control-danger { .form-control-danger {

View File

@ -5,7 +5,7 @@
@mixin form-control-validation($color) { @mixin form-control-validation($color) {
// Color the label and help text // Color the label and help text
.text-help, .form-control-feedback,
.form-control-label, .form-control-label,
.radio, .radio,
.checkbox, .checkbox,