Sgrùdaidhean agus radios
Cruthaich bogsaichean sgrùdaidh tar-bhrobhsair is tar-inneal agus rèidiothan leis a’ phàirt sgrùdaidh ath-sgrìobhte againn gu tur.
Dòigh-obrach
Bithear a’ cur an àite bogsaichean sgrùdaidh agus rèidiothan àbhaisteach brabhsair le cuideachadh bho .form-check
, sreath de chlasaichean airson an dà sheòrsa cuir a-steach a leasaicheas cruth agus giùlan nan eileamaidean HTML aca, a bheir seachad barrachd gnàthachaidh agus cunbhalachd thar-bhrobhsair. Tha bogsaichean sgrùdaidh airson aon no grunn roghainnean a thaghadh ann an liosta, agus tha rèidiothan airson aon roghainn a thaghadh bho mhòran.
Gu structarail, tha na <input>
s agus na h-eileamaidean againn <label>
nan eileamaidean bràithrean seach taobh a- <input>
staigh <label>
. Tha seo beagan nas gnìomhaiche mar a dh’ fheumas tu a shònrachadh id
agus for
buadhan gus an <input>
agus <label>
. Bidh sinn a’ cleachdadh an roghnaiche sibling ( ~
) airson na <input>
stàitean againn uile, mar :checked
no :disabled
. Nuair a thèid sinn còmhla ris a’ .form-check-label
chlas, is urrainn dhuinn an teacsa airson gach nì a stoidhleachadh gu furasta stèidhichte air an <input>
stàit.
Bidh na sgrùdaidhean againn a’ cleachdadh ìomhaighean àbhaisteach Bootstrap gus stàitean dearbhte no neo-chinnteach a chomharrachadh.
Seicichean
<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>
Neo-chinnteach
Faodaidh bogsaichean-seic an clas meallta a chleachdadh :indeterminate
nuair a thèid a shuidheachadh le làimh tro JavaScript (chan eil feart HTML ri fhaighinn airson a shònrachadh).
<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>
Ciorramach
Cuir ris a’ disabled
fheart agus tha na <label>
s co-cheangailte air an stialladh gu fèin-ghluasadach gus a bhith co-ionnan ri dath nas aotroime gus cuideachadh le bhith a’ comharrachadh staid an ionaid.
<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>
Rèidiothan
<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>
Ciorramach
Cuir ris a’ disabled
fheart agus tha na <label>
s co-cheangailte air an stialladh gu fèin-ghluasadach gus a bhith co-ionnan ri dath nas aotroime gus cuideachadh le bhith a’ comharrachadh staid an ionaid.
<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>
Switches
Tha comharradh bogsa-dearbhaidh àbhaisteach aig suidse ach cleachdaidh e an .form-switch
clas gus suidse toggle a thoirt seachad. Bidh suidsichean cuideachd a’ toirt taic don disabled
fheart.
<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>
Default (cruachadh)
Gu gnàthach, bidh àireamh sam bith de bhogsaichean-seic agus rèidiothan a tha sa bhad bràthair-bràthar air an cruachadh gu dìreach agus air an cuairteachadh gu h-iomchaidh le .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>
In-loidhne
Cuir bogsaichean-seic no rèidiothan buidhne air an aon sreath chòmhnard le bhith a’ cur .form-check-inline
ri faidhle .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>
Às aonais bileagan
Leig seachad am pasgadh .form-check
airson bogsaichean-seic agus rèidiothan aig nach eil teacsa leubail. Cuimhnich fhathast gun toir thu seòrsa de dh’ ainm ruigsinneach airson teicneòlasan taice (mar eisimpleir, a’ cleachdadh aria-label
). Faic an earrann ruigsinneachd tar-shealladh foirmean airson mion-fhiosrachadh.
<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>
Tog na putanan
Cruthaich bogsaichean-seic coltach ri putan agus putanan rèidio le bhith a’ cleachdadh .btn
stoidhlichean seach .form-check-label
air na h- <label>
eileamaidean. Faodar na putanan toggle seo a chur còmhla ann am buidheann putan ma tha feum air.
Togaidh putanan bogsa seic
<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>
Putanan tog radio
<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>
Stoidhlichean dealbhaichte
Thathas a’ toirt taic do dhiofar atharrachaidhean de .btn
, leithid aig na diofar stoidhlichean a tha air am mìneachadh.
<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
Caochlaidhean
$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;