Chɛk ɛn redio dɛn
Krio kɔnsistɛns krɔs-brawza ɛn krɔs-divays chɛkbɔks ɛn redio wit wi kɔmplit chɛk kɔmpɔnɛnt we dɛn dɔn rayt bak ɔlsay.
Mit
Brawza difɔlt chɛkbɔks ɛn redio dɛn de riples wit di ɛp fɔ .form-check
, wan siriɔs klas fɔ ɔl tu di kayn input dɛn we de mek di layout ɛn bihayvya fɔ dɛn HTML ɛlimɛnt dɛn bɛtɛ, we de gi big kɔstɔmayshɔn ɛn krɔs brawza kɔnsistɛns. Chɛkbɔks dɛn na fɔ pik wan ɔ sɔm tin dɛn we de na wan list, ɛn redio dɛn na fɔ pik wan tin dɛn frɔm bɔku pan dɛn.
Struktrɔl wan, wi <input>
s ɛn <label>
s na brɔda ɛn sista ɛlimɛnt dɛn as opɔz to wan <input>
insay wan <label>
. Dis na smɔl mɔ verbose as yu fɔ spɛsifa id
ɛn for
atribyut dɛn fɔ rilayt di <input>
ɛn <label>
. Wi de yuz di sibling selector ( ~
) fɔ ɔl wi <input>
stet dɛn, lɛk :checked
ɔ :disabled
. We wi jɔyn wit di .form-check-label
klas, wi kin ebul fɔ stayl di tɛks fɔ ɛni tin izi wan bay di <input>
's stet.
Wi chɛk dɛn de yuz kɔstɔm Bootstrap aykɔn dɛn fɔ sho di stet dɛn we dɛn dɔn chɛk ɔ we dɛn nɔ dɔn disayd.
Chɛk dɛn
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
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">
Checked checkbox
</label>
</div>
I nɔ de disayd fɔ du sɔntin
Chɛkbɔks dɛn kin yuz di :indeterminate
pseudo klas we dɛn sɛt wit dɛn an bay JavaSkript (no HTML atribyut nɔ de fɔ spɛsifa am).
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
Indeterminate checkbox
</label>
</div>
Disebul
Ad di disabled
atribyut ɛn di <label>
s dɛn we gɛt fɔ du wit am de ɔtomɛtik stayl fɔ mach wit layt kɔlɔ fɔ ɛp fɔ sho di input in stet.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
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">
Disabled checked checkbox
</label>
</div>
Redio dɛn
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
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">
Default checked radio
</label>
</div>
Disebul
Ad di disabled
atribyut ɛn di <label>
s dɛn we gɛt fɔ du wit am de ɔtomɛtik stayl fɔ mach wit layt kɔlɔ fɔ ɛp fɔ sho di input in stet.
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
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">
Disabled checked radio
</label>
</div>
Switch dɛn
Swich gɛt di mak fɔ wan kɔstɔm chɛkbɔks bɔt i de yuz di .form-switch
klas fɔ rɛnd wan tɔgl switch. Switch dɛn de sɔpɔt di disabled
atribyut bak.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
Difɔlt (we dɛn dɔn stak) .
Bay difɔlt, ɛni nɔmba fɔ chɛkbɔks ɛn redio dɛn we na brɔda ɛn sista dɛn we de nia dɛnsɛf go de vertikal wan ɛn dɛn go put dɛn spɛshal say wit .form-check
.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
Inlayn
Grup chɛkbɔks ɔ redio dɛn na di sem ɔrizɔntal row bay we yu ad .form-check-inline
to ɛni wan pan dɛn .form-check
.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
Wi nɔ gɛt lɛbl dɛn
Nɔ put di rap .form-check
fɔ chɛk bɔks ɛn redio dɛn we nɔ gɛt lɛbl tɛks. Mɛmba fɔ stil gi sɔm kayn nem we pɔsin kin ebul fɔ yuz fɔ ɛp tɛknɔlɔji dɛn (fɔ ɛgzampul, yuz aria-label
). Si di fɔm dɛn ɔvaviu aksesibiliti sɛkshɔn fɔ di ditel dɛn.
<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>
<div>
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>
Tɔgl di bɔtin dɛn
Krio chɛkbɔks dɛn we tan lɛk bɔtin ɛn redio bɔtin dɛn bay we yu yuz .btn
stayl dɛn pas .form-check-label
fɔ yuz di <label>
ɛlimɛnt dɛn. Yu kin grup dɛn tɔgl bɔtin dɛn ya mɔ na wan bɔtin grup if nid de.
Di bɔtin dɛn we de chenj di chɛk bɔks
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>
Di bɔtin dɛn we de chenj di redio
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>
<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>
Stayl dɛn we dɛn dɔn sho
Difrɛn difrɛn we dɛn fɔ .btn
, lɛk di difrɛn stayl dɛn we dɛn dɔn sho, dɛn de sɔpɔt.
<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>
<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
Sass we bin de
Di tin dɛn we kin chenj
$form-check-input-width: 1em;
$form-check-min-height: $font-size-base * $line-height-base;
$form-check-padding-start: $form-check-input-width + .5em;
$form-check-margin-bottom: .125rem;
$form-check-label-color: null;
$form-check-label-cursor: null;
$form-check-transition: null;
$form-check-input-active-filter: brightness(90%);
$form-check-input-bg: $input-bg;
$form-check-input-border: 1px solid rgba($black, .25);
$form-check-input-border-radius: .25em;
$form-check-radio-border-radius: 50%;
$form-check-input-focus-border: $input-focus-border-color;
$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow;
$form-check-input-checked-color: $component-active-color;
$form-check-input-checked-bg-color: $component-active-bg;
$form-check-input-checked-border-color: $form-check-input-checked-bg-color;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");
$form-check-input-indeterminate-color: $component-active-color;
$form-check-input-indeterminate-bg-color: $component-active-bg;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
$form-check-input-disabled-opacity: .5;
$form-check-label-disabled-opacity: $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity: $btn-disabled-opacity;
$form-check-inline-margin-end: 1rem;