mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Remove unnecessary <form> elements, add a submit button to validation example

Browse Source
This commit is contained in:
Patrick H. Lauke
2020-03-22 20:09:20 +00:00
committed by XhmikosR
parent c96f6391e8
commit a68f73e754
4 changed files with 54 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/4.3/forms/layout.md
+29 -33
View File
@@ -23,16 +23,14 @@ Since Bootstrap applies `display: block` and `width: 100%` to almost all our for
Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or nearly any other element.
{{< example >}}
<form>
<div class="mb-3">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
</form>
<div class="mb-3">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
{{< /example >}}
## Form grid
@@ -40,14 +38,14 @@ Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. **Requires the `$enable-grid-classes` Sass variable to be enabled** (on by default).
{{< example >}}
<form class="row">
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</form>
</div>
{{< /example >}}
## Gutters
@@ -55,14 +53,14 @@ More complex forms can be built using our grid classes. Use these for form layou
By adding [gutter modifier classes]({{< docsref "/layout/grid#gutters" >}}), you can have control over the gutter width in as well the inline as block direction. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (on by default).
{{< example >}}
<form class="row g-3">
<div class="row g-3">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</form>
</div>
{{< /example >}}
More complex layouts can also be created with the grid system.
@@ -179,26 +177,24 @@ At times, you maybe need to use margin or padding utilities to create that perfe
Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
{{< example >}}
<form>
<div class="row mb-3">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
<div class="row mb-3">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
<div class="row mb-3">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="row mb-3">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
<div class="row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
<div class="row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</form>
</div>
{{< /example >}}
## Column sizing
@@ -206,7 +202,7 @@ Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s o
As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col`s equally split the rest, with specific column classes like `.col-sm-7`.
{{< example >}}
<form class="row g-3">
<div class="row g-3">
<div class="col-sm-7">
<input type="text" class="form-control" placeholder="City">
</div>
@@ -216,7 +212,7 @@ As shown in the previous examples, our grid system allows you to place any numbe
<div class="col-sm">
<input type="text" class="form-control" placeholder="Zip">
</div>
</form>
</div>
{{< /example >}}
## Auto-sizing