0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00

Docs: Simplify ids for checks, radios and switches (#41228)
Some checks failed
BrowserStack / browserstack (push) Has been skipped
Bundlewatch / bundlewatch (push) Failing after 1s
CodeQL / Analyze (push) Failing after 1s
cspell / cspell (push) Failing after 0s
CSS / css (push) Failing after 1s
Docs / docs (push) Failing after 1s
JS Tests / JS Tests (push) Failing after 1s
Lint / lint (push) Failing after 1s
CSS (node-sass) / css (push) Failing after 1s
Release notes / update_release_draft (push) Has been skipped

Co-authored-by: Julien Déramond <juderamond@gmail.com>
This commit is contained in:
Christian Oliff 2025-02-16 16:05:23 +09:00 committed by GitHub
parent 0f13e1c2e7
commit 669079dff6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 36 additions and 36 deletions

View File

@ -369,8 +369,8 @@ direction: rtl
<input type="file" class="form-control" id="customFile">
</div>
<div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">زر على شكل مفتاح اختيار.</label>
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
<label class="form-check-label" for="switchCheckChecked">زر على شكل مفتاح اختيار.</label>
</div>
<div class="mb-3">
<label for="customRange3" class="form-label">مثال على حقل اختيار نطاقي</label>

View File

@ -368,8 +368,8 @@ body_class: "bg-body-tertiary"
<input type="file" class="form-control" id="customFile">
</div>
<div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
<label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="mb-3">
<label for="customRange3" class="form-label">Example range</label>

View File

@ -21,8 +21,8 @@ body_class: "d-flex align-items-center py-4 bg-body-tertiary"
</div>
<div class="form-check text-start my-3">
<input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
<input class="form-check-input" type="checkbox" value="remember-me" id="checkDefault">
<label class="form-check-label" for="checkDefault">
Remember me
</label>
</div>

View File

@ -19,14 +19,14 @@ Our checks use custom Bootstrap icons to indicate checked or indeterminate state
{{< example >}}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
<input class="form-check-input" type="checkbox" value="" id="checkDefault">
<label class="form-check-label" for="checkDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
<input class="form-check-input" type="checkbox" value="" id="checkChecked" checked>
<label class="form-check-label" for="checkChecked">
Checked checkbox
</label>
</div>
@ -38,8 +38,8 @@ Checkboxes can utilize the `:indeterminate` pseudo class when manually set via J
{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
<input class="form-check-input" type="checkbox" value="" id="checkIndeterminate">
<label class="form-check-label" for="checkIndeterminate">
Indeterminate checkbox
</label>
</div>
@ -51,20 +51,20 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
<label class="form-check-label" for="flexCheckIndeterminateDisabled">
<input class="form-check-input" type="checkbox" value="" id="checkIndeterminateDisabled" disabled>
<label class="form-check-label" for="checkIndeterminateDisabled">
Disabled indeterminate checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
<input class="form-check-input" type="checkbox" value="" id="checkDisabled" disabled>
<label class="form-check-label" for="checkDisabled">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexCheckCheckedDisabled">
<input class="form-check-input" type="checkbox" value="" id="checkCheckedDisabled" checked disabled>
<label class="form-check-label" for="checkCheckedDisabled">
Disabled checked checkbox
</label>
</div>
@ -74,14 +74,14 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
{{< example >}}
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
<input class="form-check-input" type="radio" name="radioDefault" id="radioDefault1">
<label class="form-check-label" for="radioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
<input class="form-check-input" type="radio" name="radioDefault" id="radioDefault2" checked>
<label class="form-check-label" for="radioDefault2">
Default checked radio
</label>
</div>
@ -93,14 +93,14 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
{{< example >}}
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
<input class="form-check-input" type="radio" name="radioDisabled" id="radioDisabled" disabled>
<label class="form-check-label" for="radioDisabled">
Disabled radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexRadioCheckedDisabled">
<input class="form-check-input" type="radio" name="radioDisabled" id="radioCheckedDisabled" checked disabled>
<label class="form-check-label" for="radioCheckedDisabled">
Disabled checked radio
</label>
</div>
@ -112,20 +112,20 @@ A switch has the markup of a custom checkbox but uses the `.form-switch` class t
{{< example >}}
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckDefault">
<label class="form-check-label" for="switchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
<label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckDisabled" disabled>
<label class="form-check-label" for="switchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
<input class="form-check-input" type="checkbox" role="switch" id="switchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="switchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
{{< /example >}}
@ -222,8 +222,8 @@ Put your checkboxes, radios, and switches on the opposite side with the `.form-c
</div>
<div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
<label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
<input class="form-check-input" type="checkbox" id="switchCheckReverse">
<label class="form-check-label" for="switchCheckReverse">Reverse switch checkbox input</label>
</div>
{{< /example >}}