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

v5: .form-check layout changes (#29322)

Browse Source 
* Scope .form-check-input layout to the .form-check parent

* Remove margin-bottom from list-group-items in case they are label elements

* document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs
This commit is contained in:
Mark Otto
2019-10-02 12:19:45 -07:00
committed by XhmikosR
parent c306e963e8
commit 707973ebdd
5 changed files with 71 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/4.3/forms/checks.md
+6 -5
View File
@@ -198,13 +198,14 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
## Without labels
Add `.position-static` to inputs within `.form-check` that don't have any label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
Omit the wrapping `.form-check` for checkboxes and radios that have no label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
{{< example >}}
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>
<div class="form-check">
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
<div>
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>
{{< /example >}}
site/content/docs/4.3/forms/input-group.md
+2 -2
View File
@@ -101,7 +101,7 @@ Place any checkbox or radio option within an input group's addon instead of text
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
<input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
@@ -110,7 +110,7 @@ Place any checkbox or radio option within an input group's addon instead of text
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio" aria-label="Radio button for following text input">
<input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">