mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-24 14:04:09 +03:00
Code Activity

Update labels and form grid examples

Browse Source
This commit is contained in:
Mark Otto
2015-04-23 00:51:39 -07:00
parent 56e267e71f
commit dc3abb5f12
9 changed files with 58 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/forms.md
+34 -6
View File
@@ -240,29 +240,57 @@ Because of this, you may need to manually adddres the width and alignment of ind
### Using the Grid
For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins). 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, you can utilize Bootstrap's predefined grid classes (or mixins). Add the `.row` class to form groups and use the `.col-*` classes to specify the width of your labels and controls. To vertically center the labels with the textual inputs—nearly anything with `.form-control`—use the `.form-control-label` class.
{% example html %}
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<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 control-label">Password</label>
<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">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label class="col-sm-2" for="">Radios</label>
<div class="col-sm-10">
<div class="radio">
<label>
<input type="checkbox"> Remember me
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" 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="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2" for="">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>