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

add more grid layout options

Browse Source
This commit is contained in:
Mark Otto 2017-02-26 17:14:25 -08:00
parent dcd020b3f7
commit 07f63324d1
1 changed files with 49 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
docs/components/forms.md
View File

@ -392,6 +392,55 @@ Be sure to add `.col-form-label` to your `<label>`s as well so they're verticall
</div> </div>
{% endexample %} {% endexample %}
More complex layouts can also be created with the grid system.
{% example html %}
<div class="container">
<form>
<div class="row">
<div class="form-group col-md-6">
<label for="inputEmail4" class="col-form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4" class="col-form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress" class="col-form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2" class="col-form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="inputCity" class="col-form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState" class="col-form-label">State</label>
<select id="inputState" class="form-control">Choose</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip" class="col-form-label">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
{% endexample %}
Grid-based form layouts also support large and small inputs. Grid-based form layouts also support large and small inputs.
{% example html %} {% example html %}
@ -413,7 +462,6 @@ Grid-based form layouts also support large and small inputs.
</div> </div>
{% endexample %} {% endexample %}
## Checkboxes and radios ## Checkboxes and radios
Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.