in English

Cheekii fi raadiyoo

Qaama sakatta'iinsaa keenya guutummaatti irra deebi'amee barreeffame waliin saanduqawwan filannoo qaxxaamuraa-browzarii fi qaxxaamuraa meeshaa fi raadiyoowwan walfakkaatan uumi.

Fuula kana irratti

Akkaataa

Sanduuqawwan filannoo durtii biraawzarii fi raadiyoowwan gargaarsa .form-check, tartiiba gita gosoota galtee lamaaniif kan haalata fi amala qaamolee HTML isaanii fooyyessu, kanneen dhuunfachiisaa guddaa fi walsimannaa qaxxaamuraa biraawwaaraa kennan bakka bu'u. Sanduuqonni filannoo tarree tokko keessatti filannoo tokko ykn hedduu filachuuf yoo ta'an, raadiyoowwan ammoo filannoo tokko baay'ee keessaa filachuuf.

Caasaadhaan, <input>s fi s keenya <label>elementoota obbolaa yoo ta’an faallaa an <input>keessaa a <label>. Kun xiqqoo jechoota caalaa waan ta'eef fi amaloota idfi forwalqabsiisuuf ifteessuu qabda . Filataa obbolaa ( ) kutaalee keenya hundaaf fayyadamna, akka ykn . Yeroo gita waliin walitti makamu , barruu tokkoon tokkoo wantaaf haala 's irratti hundaa'uun salphaatti akkaataa itti ta'uu dandeenya .<input><label>~<input>:checked:disabled.form-check-label<input>

Sakatta'iinsi keenya haalawwan sakatta'aman ykn hin murtoofne agarsiisuuf mallattoolee Bootstrap amala fayyadamu.

Cheekii godha

Sanduuqa filannoo durtii

Sanduuqa filannoo mallatteeffame

<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>

Murteessuu hin dandeenye

Sanduuqonni filannoo gita sobaa fayyadamuu danda'u :indeterminateyeroo harkaan karaa JaavaScript saagamu (amalli HTML ifteessuuf hin jiru).

Sanduuqa filannoo hin murtoofne

<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>

Miidhamaa

Amala dabali disabledfi s walqabatan <label>ofumaan akkaataa galtee agarsiisuuf gargaaruuf halluu ifa ta'een walsimsiisuuf akkaataa itti taasifamu.

Sanduuqa filannoo hanqifame

Sanduuqa filannoo hanqifame kan mallatteeffame

<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>

Raadiyoowwan

Raadiyoo durtii

Raadiyoo durtii sakatta'ame

<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>

Miidhamaa

Amala dabali disabledfi s walqabatan <label>ofumaan akkaataa galtee agarsiisuuf gargaaruuf halluu ifa ta'een walsimsiisuuf akkaataa itti taasifamu.

Raadiyoo hojii irraa oolche

Raadiyoo sakatta'ame hojii irraa oolche

<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>

Jijjiirraa

Jijjiirraan mallattoo sanduuqa filannoo amala qaba garuu .form-switchjijjiiraa jijjiirraa agarsiisuuf gita fayyadama. Jijjiirraawwan amallichas ni deeggaru disabled.

Galtee sanduuqa filannoo jijjiiramaa durtii

Galtee sanduuqa filannoo jijjiiramaa mallatteeffame

Galtee sanduuqa filannoo jijjiiramaa hanqifame

Galtee sanduuqa filannoo jijjiiramaa mallatteeffame hanqifame

<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>

Durtii (tuulame) .

Akka durtiitti, lakkoofsi kamiyyuu saanduqawwan filannoo fi raadiyoowwan obboleessa battalaa ta'an vertikaaliin tuulamanii fi haala sirrii ta'een addaan baafamanii .form-check.

Sanduuqa filannoo durtii

Sanduuqa filannoo hanqifame

<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>

Raadiyoo durtii

Raadiyoo durtii lammaffaa

Raadiyoo hojii irraa oolche

<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>

Sarara keessaa

Sanduuqawwan filannoo ykn raadiyoo tarree qajeelaa walfakkaataa irratti .form-check-inlinekamiyyuu irratti dabaluudhaan garee .form-check.

1. 1.

2. 2.

3 (qaama miidhame) .

<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>

1. 1.

2. 2.

3 (qaama miidhame) .

<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>

Asxaa malee

.form-checkSanduuqawwan filannoo fi raadiyoowwan barruu asxaa hin qabneef marfata dhiisi . Ammas teeknooloojiiwwan gargaarsaaf maqaa dhaqqabamaa bifa tokko tokko kennuu yaadadhu (fakkeenyaaf, fayyadamuu aria-label). Bal'ina isaaf kutaa dhaqqabummaa ilaalcha waliigalaa unkaalee ilaali .

<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>

Qabduu jijjiiri

Sanduuqawwan filannoo qaree fakkaatu fi qaree raadiyoo elementoota irratti .btnosoo hin taane akkaataa fayyadamuun uumi. Qabduulee jijjiirraa kun yoo barbaachise garee qaree keessatti daran garee ta'uu danda'u..form-check-label<label>

Qabduulee jijjiirraa sanduuqa filannoo

Tokkicha toggle

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>

Sakatta'ame

<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>

Miidhamaa

<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>

Mul'ataan, qaree jijjiirraa sanduuqa filannoo kun qaree jijjiirraa ifteessaa qaree wajjin walfakkaata . Haa ta’u malee, isaan teknooloojiiwwan gargaarsaatiin haala adda ta’een dabarfamu: jijjiirraan saanduqa filannoo dubbistoota iskiriiniitiin akka “mallatteeffame”/“hin mallatteeffamne” ta’ee ni beeksifama (sababni isaas, mul’atanis, bu’uuraan ammallee saanduqa filannoo waan ta’aniif), qafooleen jijjiirraa pilaagii buttooni garuu ni ta’u “button”/“button pressed” jedhamee beeksise. Filannoon malawwan lamaan kana gidduu jiru gosa jijjiirraa ati uumtu irratti hundaa'a, fi jijjiirraan fayyadamtootaaf hiika qabaachuu fi dhiisuu isaa yeroo akka sanduuqa filannootti ykn akka qaree qabatamaatti beeksifamu.

Qabduu jijjiirraa raadiyoo

Sakatta'ame Raadiyoo Miidhamaa Raadiyoo

<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>

Akkaataawwan ibsaman

Garaagarummaan adda addaa .btnkan , kan akka akkaataa adda addaa ibsaman irratti, ni deeggaramu.

Tokkicha toggle
Sakatta'ame
Raadiyoo milkaa'ina sakatta'e Raadiyoo balaa

<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 jedhama

Jijjiiramoota

$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;