in English
Awọn sọwedowo ati awọn redio
Ṣẹda ẹrọ aṣawakiri deede ati awọn apoti ayẹwo ẹrọ-agbelebu ati awọn redio pẹlu paati sọwedowo ti a tun kọ patapata.
Lori iwe yi
Ona
Apoti aiyipada ti aṣawakiri ati awọn redio ti rọpo pẹlu iranlọwọ ti .form-check, lẹsẹsẹ awọn kilasi fun awọn oriṣi titẹ sii mejeeji ti o ṣe ilọsiwaju iṣeto ati ihuwasi ti awọn eroja HTML wọn, ti o pese isọdi nla ati aitasera aṣawakiri. Awọn apoti ayẹwo jẹ fun yiyan ọkan tabi pupọ awọn aṣayan ninu atokọ kan, lakoko ti awọn redio wa fun yiyan aṣayan kan lati ọpọlọpọ.
Ni igbekalẹ, awọn <input>s ati <label>s wa jẹ awọn eroja arakunrin ni ilodi si <input>laarin a <label>. Eyi jẹ ọrọ-ọrọ diẹ sii bi o ṣe gbọdọ pato idati forawọn abuda lati ṣe ibatan <input>ati <label>. A lo oluyan arakunrin ( ~) fun gbogbo awọn <input>ipinlẹ wa, bii :checkedtabi :disabled. Nigba ti ni idapo pelu .form-check-labelkilasi, a le awọn iṣọrọ ara awọn ọrọ fun kọọkan ohun kan da lori awọn <input>'state.
Awọn sọwedowo wa lo awọn aami Bootstrap aṣa lati tọkasi awọn ipinlẹ ti a ṣayẹwo tabi ti ko ni ipinnu.
Awọn sọwedowo
<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>Ailopin
Awọn apoti ayẹwo le lo :indeterminatekilasi pseudo nigbati a ṣeto pẹlu ọwọ nipasẹ JavaScript (ko si abuda HTML ti o wa fun sisọ rẹ).
<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>Alaabo
Ṣafikun abuda naa disabledati awọn <label>s ti o somọ jẹ aṣa laifọwọyi lati baramu pẹlu awọ fẹẹrẹfẹ lati ṣe iranlọwọ tọka ipo igbewọle naa.
<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
<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>Alaabo
Ṣafikun abuda naa disabledati awọn <label>s ti o somọ jẹ aṣa laifọwọyi lati baramu pẹlu awọ fẹẹrẹfẹ lati ṣe iranlọwọ tọka ipo igbewọle naa.
<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>Yipada
Iyipada kan ni isamisi ti apoti ayẹwo aṣa ṣugbọn o nlo .form-switchkilasi lati ṣe iyipada iyipada kan. Awọn iyipada tun ṣe atilẹyin abuda naa disabled.
<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>Aiyipada (tolera)
Nipa aiyipada, nọmba eyikeyi ti awọn apoti ayẹwo ati awọn redio ti o jẹ arakunrin lẹsẹkẹsẹ yoo wa ni tolera ati ni aye ni deede pẹlu .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>Ni tito
Awọn apoti ayẹwo ẹgbẹ tabi awọn redio lori ila petele kanna nipa fifi kun .form-check-inlinesi eyikeyi .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>Laisi awọn akole
Fi ipari si awọn .form-checkapoti ayẹwo ati awọn redio ti ko ni ọrọ aami. Ranti lati tun pese diẹ ninu awọn orukọ wiwọle fun awọn imọ-ẹrọ iranlọwọ (fun apẹẹrẹ, lilo aria-label). Wo apakan iraye si Akopọ awọn fọọmu fun awọn alaye.
<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>Yipada awọn bọtini
Ṣẹda awọn apoti ayẹwo bi bọtini ati awọn bọtini redio nipa lilo .btnawọn aza ju .form-check-labellori awọn <label>eroja. Awọn bọtini yiyi wọnyi le ṣe akojọpọ siwaju si ẹgbẹ bọtini kan ti o ba nilo.
Awọn bọtini iyipada apoti
<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>
Ni wiwo, awọn bọtini yiyi apoti apoti jẹ aami kanna si awọn
bọtini itanna toggle awọn bọtini . Bibẹẹkọ, wọn ti gbejade ni oriṣiriṣi nipasẹ awọn imọ-ẹrọ iranlọwọ: awọn toggles apoti ni yoo kede nipasẹ awọn oluka iboju bi “ti a ṣayẹwo”/“kii ṣe ayẹwo” (niwon, laibikita irisi wọn, wọn jẹ awọn apoti ayẹwo ni ipilẹ), lakoko ti awọn bọtini toggle ohun itanna yoo jẹ kede bi "bọtini"/"bọtini ti a tẹ". Yiyan laarin awọn ọna meji wọnyi yoo dale lori iru toggle ti o ṣẹda, ati boya tabi kii ṣe toggle yoo jẹ oye si awọn olumulo nigbati a kede bi apoti ayẹwo tabi bi bọtini gangan.
Awọn bọtini iyipada 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>Awọn aza ti a ṣe ilana
Awọn iyatọ oriṣiriṣi ti .btn, gẹgẹbi orisirisi awọn aza ti a ṣe ilana, ni atilẹyin.
<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
Awọn oniyipada
$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;