rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

Update grid docs for form layouts

Browse Source 
- Add container to fix padding in mobile views
- Add large and small variations
- Cross link grid classes and mixins
- Fix up some words
This commit is contained in:
Mark Otto 2016-02-09 00:36:05 -08:00
parent 04f145b9d5
commit af400363d2
1 changed files with 72 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
docs/components/forms.md
View File

@ -332,11 +332,12 @@ Because of this, you may need to manually address the width and alignment of ind
### Using the Grid
For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or 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 labels.
{% example html %}
<div class="container">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
@ -389,8 +390,31 @@ Be sure to add `.form-control-label` to your `<label>`s as well so they're verti
</div>
</div>
</form>
</div>
{% endexample %}
Grid-based form layouts also support large and small inputs.
{% example html %}
<div class="container">
<form>
<div class="form-group row">
<label for="lgFormGroupInput" class="col-sm-2 form-control-label form-control-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="you@example.com">
</div>
</div>
<div class="form-group row">
<label for="smFormGroupInput" class="col-sm-2 form-control-label form-control-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="smFormGroupInput" placeholder="you@example.com">
</div>
</div>
</form>
</div>
{% endexample %}
## Checkboxes and radios
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.