Update grid docs for form layouts
- 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
parent
04f145b9d5
commit
af400363d2
|
|
@ -332,65 +332,89 @@ 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 %}
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword3" class="col-sm-2 form-control-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 class="col-sm-2">Radios</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="radio">
|
||||
<label>
|
||||
<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="radio">
|
||||
<label>
|
||||
<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="radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
<div class="container">
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2">Checkbox</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Check me out
|
||||
</label>
|
||||
<div class="form-group row">
|
||||
<label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-offset-2 col-sm-10">
|
||||
<button type="submit" class="btn btn-secondary">Sign in</button>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2">Radios</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="radio">
|
||||
<label>
|
||||
<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="radio">
|
||||
<label>
|
||||
<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="radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2">Checkbox</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Check me out
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-offset-2 col-sm-10">
|
||||
<button type="submit" class="btn btn-secondary">Sign in</button>
|
||||
</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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue