diff options
author | Andres Galante <agalante@gmail.com> | 2017-10-18 20:11:35 +0300 |
---|---|---|
committer | Mark Otto <markd.otto@gmail.com> | 2017-10-18 20:11:35 +0300 |
commit | 008e0b5b683ea91da9fc116d059448c47e5fcddd (patch) | |
tree | 842eac01e0a89901498663c7019ef32b46945b6f /docs | |
parent | 217d344fa8c60b32c9c2855ae373e54589b17b45 (diff) |
Improves forms migration guide, docs, and scss (#24348)
* fixes migration forms guides
* removes container from Horizontal form
* adds col-form-label sizes on form docs
* removes .form-control-label from forms.scss
* add note to migration
Diffstat (limited to 'docs')
-rw-r--r-- | docs/4.0/components/forms.md | 115 | ||||
-rw-r--r-- | docs/4.0/migration.md | 5 |
2 files changed, 73 insertions, 47 deletions
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index ba56338506..84891d8417 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -365,62 +365,87 @@ Create horizontal forms with the grid by adding the `.row` class to form groups Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.col-form-legend` to make them appear similar to regular `<label>` elements. {% example html %} -<div class="container"> - <form> - <div class="form-group row"> - <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> - <div class="col-sm-10"> - <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> - </div> +<form> + <div class="form-group row"> + <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> + <div class="col-sm-10"> + <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> - <div class="form-group row"> - <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label> - <div class="col-sm-10"> - <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> - </div> + </div> + <div class="form-group row"> + <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label> + <div class="col-sm-10"> + <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> - <fieldset class="form-group"> - <div class="row"> - <legend class="col-form-legend col-sm-2">Radios</legend> - <div class="col-sm-10"> - <div class="form-check"> - <label class="form-check-label"> - <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> - Option one is this and that—be sure to include why it's great - </label> - </div> - <div class="form-check"> - <label class="form-check-label"> - <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> - Option two can be something else and selecting it will deselect option one - </label> - </div> - <div class="form-check disabled"> - <label class="form-check-label"> - <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> - Option three is disabled - </label> - </div> - </div> - </div> - </fieldset> - <div class="form-group row"> - <div class="col-sm-2">Checkbox</div> + </div> + <fieldset class="form-group"> + <div class="row"> + <legend class="col-form-legend col-sm-2">Radios</legend> <div class="col-sm-10"> <div class="form-check"> <label class="form-check-label"> - <input class="form-check-input" type="checkbox"> Check me out + <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> + Option one is this and that—be sure to include why it's great + </label> + </div> + <div class="form-check"> + <label class="form-check-label"> + <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> + Option two can be something else and selecting it will deselect option one + </label> + </div> + <div class="form-check disabled"> + <label class="form-check-label"> + <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> + Option three is disabled </label> </div> </div> </div> - <div class="form-group row"> - <div class="col-sm-10"> - <button type="submit" class="btn btn-primary">Sign in</button> + </fieldset> + <div class="form-group row"> + <div class="col-sm-2">Checkbox</div> + <div class="col-sm-10"> + <div class="form-check"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox"> Check me out + </label> </div> </div> - </form> -</div> + </div> + <div class="form-group row"> + <div class="col-sm-10"> + <button type="submit" class="btn btn-primary">Sign in</button> + </div> + </div> +</form> +{% endexample %} + +##### Horizontal form label sizing + +Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`. + +{% example html %} +<form> + <div class="form-group row"> + <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label> + <div class="col-sm-10"> + <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm"> + </div> + </div> + <div class="form-group row"> + <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label> + <div class="col-sm-10"> + <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label"> + </div> + </div> + <div class="form-group row"> + <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label> + <div class="col-sm-10"> + <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg"> + </div> + </div> +</form> {% endexample %} #### Column sizing diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md index 5274e3c4be..bad3738a29 100644 --- a/docs/4.0/migration.md +++ b/docs/4.0/migration.md @@ -18,6 +18,7 @@ While in beta, we aim to have no breaking changes. However, things don't always - Responsive tables now generate classes for each grid breakpoint. This breaks from Beta 1 in that the `.table-responsive` you've been using is more like `.table-responsive-md`. You may now use `.table-responsive` or `.table-responsive-{sm,md,lg,xl}` as needed. - Dropped Bower support as the package manager has been deprecated for alternatives (e.g., Yarn or npm). [See bower/bower#2298](https://github.com/bower/bower/issues/2298) for details. - Bootstrap now requires jQuery 3.0.0 or higher. +- Removed the unused `.form-control-label` class. If you did make use of this class, it was duplicate of the `.col-form-label` class that vertically centered a `<label>` with it's associated input in horizontal form layouts. - Changed the `color-yiq` from a mixin that included the `color` property to a function that returns a value, allowing you to use it for any CSS property. For example, instead of `color-yiq(#000)`, you'd write `color: color-yiq(#000);`. ### Highlights @@ -110,7 +111,7 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version ### Forms - Moved element resets to the `_reboot.scss` file. -- Renamed `.control-label` to `.form-control-label`. +- Renamed `.control-label` to `.col-form-label`. - Renamed `.input-lg` and `.input-sm` to `.form-control-lg` and `.form-control-sm`, respectively. - Dropped `.form-group-*` classes for simplicity's sake. Use `.form-control-*` classes instead now. - Dropped `.help-block` and replaced it with `.form-text` for block-level help text. For inline help text and other flexible options, use utility classes like `.text-muted`. @@ -119,7 +120,7 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version - Horizontal forms overhauled: - Dropped the `.form-horizontal` class requirement. - `.form-group` no longer applies styles from the `.row` via mixin, so `.row` is now required for horizontal grid layouts (e.g., `<div class="form-group row">`). - - Added new `.form-control-label` class to vertically center labels with `.form-control`s. + - Added new `.col-form-label` class to vertically center labels with `.form-control`s. - Added new `.form-row` for compact form layouts with the grid classes (swap your `.row` for a `.form-row` and go). - Added custom forms support (for checkboxes, radios, selects, and file inputs). - Replaced `.has-error`, `.has-warning`, and `.has-success` classes with HTML5 form validation via CSS's `:invalid` and `:valid` pseudo-classes. |