mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Remove outdated documentation
* Remove about generated button of file form * Remove and merge layout examples of custom forms * Clarify id/for * Change some spacing classes for consistency
This commit is contained in:
ysds
Mark Otto
parent
b4bf0ab371
commit
c0a64e989a
@ -46,4 +46,4 @@ Longer placeholder text is truncated and an ellipsis is added when there's not e
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
We hide the default file `<input>` via `opacity` and instead style the `<label>`. The button is generated and positioned with `::after`. Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.
|
||||
We hide the default file `<input>` via `opacity` and instead style the `<label>`, and declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.
|
||||
|
||||
@ -239,18 +239,27 @@ The example below uses a flexbox utility to vertically center the contents and c
|
||||
<form>
|
||||
<div class="form-row align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="sr-only" for="inlineFormInput">Name</label>
|
||||
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
|
||||
<label class="sr-only" for="autoSizingInput">Name</label>
|
||||
<input type="text" class="form-control mb-2" id="autoSizingInput" placeholder="Jane Doe">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label class="sr-only" for="inlineFormInputGroup">Username</label>
|
||||
<label class="sr-only" for="autoSizingInputGroup">Username</label>
|
||||
<div class="input-group mb-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">@</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
|
||||
<input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<label class="sr-only" for="autoSizingSelect">Preference</label>
|
||||
<select class="form-select mb-2" id="autoSizingSelect">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
|
||||
@ -272,41 +281,21 @@ You can then remix that once again with size-specific column classes.
|
||||
<form>
|
||||
<div class="form-row align-items-center">
|
||||
<div class="col-sm-3 my-1">
|
||||
<label class="sr-only" for="inlineFormInputName">Name</label>
|
||||
<input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
|
||||
<label class="sr-only" for="specificSizeInputName">Name</label>
|
||||
<input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
|
||||
</div>
|
||||
<div class="col-sm-3 my-1">
|
||||
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
|
||||
<label class="sr-only" for="specificSizeInputGroupUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">@</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
|
||||
<input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto my-1">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
|
||||
<label class="form-check-label" for="autoSizingCheck2">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto my-1">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{{< /example >}}
|
||||
|
||||
And of course [custom form controls](#custom-forms) are supported.
|
||||
|
||||
{{< example >}}
|
||||
<form>
|
||||
<div class="form-row align-items-center">
|
||||
<div class="col-auto my-1">
|
||||
<label class="mr-sm-2 sr-only" for="inlineFormSelect">Preference</label>
|
||||
<select class="form-select mr-sm-2" id="inlineFormSelect">
|
||||
<div class="col-sm-3 my-1">
|
||||
<label class="sr-only" for="specificSizeSelect">Preference</label>
|
||||
<select class="form-select" id="specificSizeSelect">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
@ -314,9 +303,11 @@ And of course [custom form controls](#custom-forms) are supported.
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-auto my-1">
|
||||
<div class="form-check mr-sm-2">
|
||||
<input type="checkbox" class="form-check-input" id="formCheckAutosizing">
|
||||
<label class="form-check-label" for="formCheckAutosizing">Remember my preference</label>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
|
||||
<label class="form-check-label" for="autoSizingCheck2">
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto my-1">
|
||||
@ -338,17 +329,25 @@ You may need to manually address the width and alignment of individual form cont
|
||||
|
||||
{{< example >}}
|
||||
<form class="form-inline">
|
||||
<label class="sr-only" for="inlineFormInputName2">Name</label>
|
||||
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
|
||||
<label class="sr-only" for="inlineFormInputName">Name</label>
|
||||
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName" placeholder="Jane Doe">
|
||||
|
||||
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
|
||||
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
|
||||
<div class="input-group mb-2 mr-sm-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">@</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
|
||||
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
|
||||
</div>
|
||||
|
||||
<label class="sr-only" for="inlineFormSelectPref">Preference</label>
|
||||
<select class="form-select mb-2 mr-sm-2" id="inlineFormSelectPref">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
|
||||
<div class="form-check mb-2 mr-sm-2">
|
||||
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
|
||||
<label class="form-check-label" for="inlineFormCheck">
|
||||
@ -360,27 +359,6 @@ You may need to manually address the width and alignment of individual form cont
|
||||
</form>
|
||||
{{< /example >}}
|
||||
|
||||
Custom form controls and selects are also supported.
|
||||
|
||||
{{< example >}}
|
||||
<form class="form-inline">
|
||||
<label class="my-1 mr-2" for="inlineFormSelectPref">Preference</label>
|
||||
<select class="form-select my-1 mr-sm-2" id="inlineFormSelectPref">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
|
||||
<div class="form-check my-1 mr-sm-2">
|
||||
<input type="checkbox" class="form-check-input" id="formCheckInline">
|
||||
<label class="form-check-label" for="formCheckInline">Remember my preference</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary my-1">Submit</button>
|
||||
</form>
|
||||
{{< /example >}}
|
||||
|
||||
{{< callout warning >}}
|
||||
### Alternatives to hidden labels
|
||||
|
||||
|
||||
@ -259,9 +259,8 @@ We recommend using client-side validation, but in case you require server-side v
|
||||
Validation styles are available for the following form controls and components:
|
||||
|
||||
- `<input>`s and `<textarea>`s with `.form-control` (including up to one `.form-control` in input groups)
|
||||
- `<select>`s with `.form-control` or `.form-select`
|
||||
- `<select>`s with `.form-select`
|
||||
- `.form-check`s
|
||||
- `.custom-checkbox`s and `.custom-radio`s
|
||||
- `.form-file`
|
||||
|
||||
{{< example >}}
|
||||
@ -274,19 +273,19 @@ Validation styles are available for the following form controls and components:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="custom-control custom-checkbox mb-3">
|
||||
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
|
||||
<label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
|
||||
<label class="form-check-label" for="validationFormCheck1">Check this checkbox</label>
|
||||
<div class="invalid-feedback">Example invalid feedback text</div>
|
||||
</div>
|
||||
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
|
||||
<label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
|
||||
<div class="form-check">
|
||||
<input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required>
|
||||
<label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio mb-3">
|
||||
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
|
||||
<label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
|
||||
<div class="form-check mb-3">
|
||||
<input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required>
|
||||
<label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>
|
||||
<div class="invalid-feedback">More example invalid feedback text</div>
|
||||
</div>
|
||||
|
||||
@ -297,13 +296,13 @@ Validation styles are available for the following form controls and components:
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">Example invalid custom select feedback</div>
|
||||
<div class="invalid-feedback">Example invalid select feedback</div>
|
||||
</div>
|
||||
|
||||
<div class="form-file">
|
||||
<input type="file" class="form-file-input" id="validatedCustomFile" required>
|
||||
<label class="form-file-label" for="validatedCustomFile">Choose file...</label>
|
||||
<div class="invalid-feedback">Example invalid custom file feedback</div>
|
||||
<input type="file" class="form-file-input" id="validationFormFile" required>
|
||||
<label class="form-file-label" for="validationFormFile">Choose file...</label>
|
||||
<div class="invalid-feedback">Example invalid form file feedback</div>
|
||||
</div>
|
||||
</form>
|
||||
{{< /example >}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user