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

Fixes #18573: Change name of .form-control-label to .col-form-label (and .form-control-legend to .col-form-legend) to reiterate use for only grid layouts

Browse Source
This commit is contained in:
Mark Otto 2016-04-08 21:05:23 -05:00
parent fd260961e6
commit 0a4d3155ab
2 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
docs/components/forms.md
View File

@ -172,79 +172,79 @@ Here are examples of `.form-control` applied to each textual HTML5 `<input>` `ty
{% example html %} {% example html %}
<div class="form-group row"> <div class="form-group row">
<label for="example-text-input" class="col-xs-2 form-control-label">Text</label> <label for="example-text-input" class="col-xs-2 col-form-label">Text</label>
<div class="col-xs-10"> <div class="col-xs-10">
<input class="form-control" type="text" value="Artisanal kale" id="example-text-input"> <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="example-search-input" class="col-xs-2 form-control-label">Search</label> <label for="example-search-input" class="col-xs-2 col-form-label">Search</label>
<div class="col-xs-10"> <div class="col-xs-10">
<input class="form-control" type="search" value="How do I shoot web" id="example-search-input"> <input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="example-email-input" class="col-xs-2 form-control-label">Email</label> <label for="example-email-input" class="col-xs-2 col-form-label">Email</label>
<div class="col-xs-10"> <div class="col-xs-10">
<input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input"> <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="example-url-input" class="col-xs-2 form-control-label">URL</label> <label for="example-url-input" class="col-xs-2 col-form-label">URL</label>
<div class="col-xs-10"> <div class="col-xs-10">
<input class="form-control" type="url" value="http://getbootstrap.com" id="example-url-input"> <input class="form-control" type="url" value="http://getbootstrap.com" id="example-url-input">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="example-tel-input" class="col-xs-2 form-control-label">Telephone</label> <label for="example-tel-input" class="col-xs-2 col-form-label">Telephone</label>
<div class="col-xs-10"> <div class="col-xs-10">
<input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input"> <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="example-password-input" class="col-xs-2 form-control-label">Password</label> <label for="example-password-input" class="col-xs-2 col-form-label">Password</label>
<div class="col-xs-10"> <div class="col-xs-10">
<input class="form-control" type="password" value="hunter2" id="example-password-input"> <input class="form-control" type="password" value="hunter2" id="example-password-input">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="example-number-input" class="col-xs-2 form-control-label">Number</label> <label for="example-number-input" class="col-xs-2 col-form-label">Number</label>
<div class="col-xs-10"> <div class="col-xs-10">
<input class="form-control" type="number" value="42" id="example-number-input"> <input class="form-control" type="number" value="42" id="example-number-input">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="example-datetime-local-input" class="col-xs-2 form-control-label">Date and time</label> <label for="example-datetime-local-input" class="col-xs-2 col-form-label">Date and time</label>
<div class="col-xs-10"> <div class="col-xs-10">
<input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input"> <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="example-date-input" class="col-xs-2 form-control-label">Date</label> <label for="example-date-input" class="col-xs-2 col-form-label">Date</label>
<div class="col-xs-10"> <div class="col-xs-10">
<input class="form-control" type="date" value="2011-08-19" id="example-date-input"> <input class="form-control" type="date" value="2011-08-19" id="example-date-input">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="example-month-input" class="col-xs-2 form-control-label">Month</label> <label for="example-month-input" class="col-xs-2 col-form-label">Month</label>
<div class="col-xs-10"> <div class="col-xs-10">
<input class="form-control" type="month" value="2011-08" id="example-month-input"> <input class="form-control" type="month" value="2011-08" id="example-month-input">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="example-week-input" class="col-xs-2 form-control-label">Week</label> <label for="example-week-input" class="col-xs-2 col-form-label">Week</label>
<div class="col-xs-10"> <div class="col-xs-10">
<input class="form-control" type="week" value="2011-W33" id="example-week-input"> <input class="form-control" type="week" value="2011-W33" id="example-week-input">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="example-time-input" class="col-xs-2 form-control-label">Time</label> <label for="example-time-input" class="col-xs-2 col-form-label">Time</label>
<div class="col-xs-10"> <div class="col-xs-10">
<input class="form-control" type="time" value="13:45:00" id="example-time-input"> <input class="form-control" type="time" value="13:45:00" id="example-time-input">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="example-color-input" class="col-xs-2 form-control-label">Color</label> <label for="example-color-input" class="col-xs-2 col-form-label">Color</label>
<div class="col-xs-10"> <div class="col-xs-10">
<input class="form-control" type="color" value="#563d7c" id="example-color-input"> <input class="form-control" type="color" value="#563d7c" id="example-color-input">
</div> </div>
@ -342,25 +342,25 @@ Because of this, you may need to manually address the width and alignment of ind
For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes](/layout/grid/#predefined-classes) or [mixins](/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls. For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes](/layout/grid/#predefined-classes) or [mixins](/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
Be sure to add `.form-control-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.form-control-legend` to make them appear similar to regular `<label>` elements. 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 %} {% example html %}
<div class="container"> <div class="container">
<form> <form>
<div class="form-group row"> <div class="form-group row">
<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="inputPassword3" class="col-sm-2 form-control-label">Password</label> <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div> </div>
</div> </div>
<fieldset class="form-group row"> <fieldset class="form-group row">
<legend class="form-control-legend col-sm-2">Radios</legend> <legend class="col-form-legend col-sm-2">Radios</legend>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="radio"> <div class="radio">
<label> <label>
@ -407,13 +407,13 @@ Grid-based form layouts also support large and small inputs.
<div class="container"> <div class="container">
<form> <form>
<div class="form-group row"> <div class="form-group row">
<label for="lgFormGroupInput" class="col-sm-2 form-control-label form-control-label-lg">Email</label> <label for="lgFormGroupInput" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="you@example.com"> <input type="email" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="you@example.com">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="smFormGroupInput" class="col-sm-2 form-control-label form-control-label-sm">Email</label> <label for="smFormGroupInput" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="smFormGroupInput" placeholder="you@example.com"> <input type="email" class="form-control form-control-sm" id="smFormGroupInput" placeholder="you@example.com">
</div> </div>
@ -517,13 +517,13 @@ When you need to place plain text next to a form label within a form, use the `.
{% example html %} {% example html %}
<form> <form>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 form-control-label">Email</label> <label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10"> <div class="col-sm-10">
<p class="form-control-static">email@example.com</p> <p class="form-control-static">email@example.com</p>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="inputPassword" class="col-sm-2 form-control-label">Password</label> <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password"> <input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div> </div>
@ -670,7 +670,7 @@ 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. Here's a rundown of how they work: Bootstrap includes validation styles for danger, warning, and success states on form controls. Here's a rundown of how they work:
- 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. - To use, add `.has-warning`, `.has-danger`, or `.has-success` to the parent element. Any `.col-form-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. - 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.
@ -696,19 +696,19 @@ Ensure that an alternative indication of state is also provided. For instance, y
{% example html %} {% example html %}
<div class="form-group has-success"> <div class="form-group has-success">
<label class="form-control-label" for="inputSuccess1">Input with success</label> <label class="col-form-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control form-control-success" id="inputSuccess1"> <input type="text" class="form-control form-control-success" id="inputSuccess1">
<div class="form-control-feedback">Success! You've done it.</div> <div class="form-control-feedback">Success! You've done it.</div>
<small class="text-muted">Example help text that remains unchanged.</small> <small class="text-muted">Example help text that remains unchanged.</small>
</div> </div>
<div class="form-group has-warning"> <div class="form-group has-warning">
<label class="form-control-label" for="inputWarning1">Input with warning</label> <label class="col-form-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control form-control-warning" id="inputWarning1"> <input type="text" class="form-control form-control-warning" id="inputWarning1">
<div class="form-control-feedback">Shucks, check the formatting of that and try again.</div> <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
<small class="text-muted">Example help text that remains unchanged.</small> <small class="text-muted">Example help text that remains unchanged.</small>
</div> </div>
<div class="form-group has-danger"> <div class="form-group has-danger">
<label class="form-control-label" for="inputDanger1">Input with danger</label> <label class="col-form-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1"> <input type="text" class="form-control form-control-danger" id="inputDanger1">
<div class="form-control-feedback">Shit, that username's taken. Try another?</div> <div class="form-control-feedback">Shit, that username's taken. Try another?</div>
<small class="text-muted">Example help text that remains unchanged.</small> <small class="text-muted">Example help text that remains unchanged.</small>

8
scss/_forms.scss
View File

@ -75,19 +75,19 @@ select.form-control {
// For use with horizontal and inline forms, when you need the label text to // For use with horizontal and inline forms, when you need the label text to
// align with the form controls. // align with the form controls.
.form-control-label { .col-form-label {
padding-top: $input-padding-y; padding-top: $input-padding-y;
padding-bottom: $input-padding-y; padding-bottom: $input-padding-y;
margin-bottom: 0; // Override the `<label>` default margin-bottom: 0; // Override the `<label>` default
} }
.form-control-label-lg { .col-form-label-lg {
padding-top: $input-padding-y-lg; padding-top: $input-padding-y-lg;
padding-bottom: $input-padding-y-lg; padding-bottom: $input-padding-y-lg;
font-size: $font-size-lg; font-size: $font-size-lg;
} }
.form-control-label-sm { .col-form-label-sm {
padding-top: $input-padding-y-sm; padding-top: $input-padding-y-sm;
padding-bottom: $input-padding-y-sm; padding-bottom: $input-padding-y-sm;
font-size: $font-size-sm; font-size: $font-size-sm;
@ -100,7 +100,7 @@ select.form-control {
// For use with horizontal and inline forms, when you need the legend text to // For use with horizontal and inline forms, when you need the legend text to
// be the same size as regular labels, and to align with the form controls. // be the same size as regular labels, and to align with the form controls.
.form-control-legend { .col-form-legend {
padding-top: $input-padding-y; padding-top: $input-padding-y;
padding-bottom: $input-padding-y; padding-bottom: $input-padding-y;
margin-bottom: 0; margin-bottom: 0;