Biçe ser naveroka sereke Biçe navîgasyon belgeyan
in English

Kontrol û radyo

Bi pêkhateya meya kontrolê ya bi tevahî ji nû ve hatî nivîsandin, qutiyên kontrolê û radyoyên xaça gerok û cîhaza xaçerê ya domdar biafirînin.

Li ser vê rûpelê

Nêzîkbûhatinî

Qutiyên kontrolê û radyoyên xwerû yên gerokê bi alîkariya .form-check, rêzek çînên ji bo her du celebên têketinê têne guheztin ku sêwirandin û tevgera hêmanên wan ên HTML-ê çêtir dike, ku xwerûkirin û domdariya gerokê ya pirtir peyda dike. Qutikên kontrolê ji bo hilbijartina yek an çend vebijarkan di navnîşek de ne, dema ku radyo ji bo hilbijartina yek vebijarkek ji gelekan in.

Ji hêla avahîsaziyê ve, <input>s û <label>s-yên me hêmanên xwişk-bira ne ku li hember an <input>di hundurê de ne <label>. Ev hinekî devkîtir e ji ber ku divê hûn diyar bikin idû veqetînin da ku bi û for-yê re têkildar <input>bikin <label>. ~Em ji bo hemî <input>dewletên xwe, mîna :checkedan , hilbijêra xwişk û bira ( ) bikar tînin :disabled. Dema ku bi .form-check-labelpolê re were berhev kirin, em dikarin bi hêsanî nivîsê ji bo her babetê li ser bingeha <input>'dewletê şêwaz bikin.

Kontrolên me îkonên Bootstrap-ê yên xwerû bikar tînin da ku dewletên kontrolkirî an nediyar destnîşan bikin.

Checks

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

Bêbiryar

Dema ku bi destan bi JavaScript-ê ve were danîn, qutiyên kontrolê dikarin çîna pseudo bikar bînin :indeterminate(ji bo diyarkirina wê taybetmendiyek HTML-ê ya berdest tune).

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

Bêmecel

Taybetmendiyê lê zêde bikin disabledû s-yên têkildar <label>bixweber têne şêwaz kirin ku bi rengek siviktir li hev bikin da ku alîkariya nîşankirina rewşa têketinê bikin.

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

Radios

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

Bêmecel

Taybetmendiyê lê zêde bikin disabledû s-yên têkildar <label>bixweber têne şêwaz kirin ku bi rengek siviktir li hev bikin da ku alîkariya nîşankirina rewşa têketinê bikin.

<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

Veguhezek nîşana qutiyek kontrolê ya xwerû heye lê .form-switchpolê bikar tîne da ku veguhezek veguhezîne. Switches jî disabledtaybetmendiyê piştgirî dikin.

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

Pêşbirk (lihevkirî)

Ji hêla xwerû ve, her jimarek qutiyên kontrolê û radyoyên ku xwişk û birayên yekser in dê bi rengek vertîkal werin berhev kirin û bi guncan ve bi .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>

Inline

Qutiyên kontrolê an radyoyan li ser heman rêza horizontî kom bikin û li her yekê zêde .form-check-inlinebikin .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>

Bê etîketan

Ji bo qutiyên kontrolê .form-checkû radyoyên ku nivîsa wan a etîketê tune ye, pêçanê bihêle. Bînin bîra xwe ku hûn hîn jî ji bo teknolojiyên arîkar hin formek navekî gihîştî peyda bikin (mînak, karanîna aria-label). Ji bo hûragahiyan li beşa gihîştina serpêhatiya formayan binêrin.

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

Bişkojkên bişkojk bikin

.btnBi karanîna şêwazan ne .form-check-labelli ser <label>hêmanan qutiyên kontrolê yên mîna bişkojk û bişkokên radyoyê biafirînin . Ger hewce be, ev bişkokên guheztinê dikarin bêtir di komek bişkokê de werin kom kirin.

Bişkojkên guheztina qutiya kontrolê

<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>
Bi dîtbarî, van bişkokên guheztina qutiya kontrolê bi bişkokên guheztina pêveka bişkojkê re yek in . Lêbelê, ew ji hêla teknolojiyên arîkar ve cûda têne ragihandin: guheztinên qutiya kontrolê dê ji hêla xwendevanên ekranê ve wekî "kontrolkirî" / "ne kontrolkirî" werin ragihandin (ji ber ku, tevî xuyabûna wan, ew di bingeh de hîn jî qutiyên kontrolê ne), lê bişkokên guheztina pêveka bişkojkê dê bêne diyar kirin. wekî "bişkok"/"bişkok hat pêxistin" hat ragihandin. Hilbijartina di navbera van her du nêzîkatiyan de dê bi celebê guheztina ku hûn diafirînin ve girêdayî be, û gelo gava ku wekî qutiyek kontrolê an wekî bişkokek rastîn were ragihandin dê guheztin ji bikarhêneran re watedar be an na.

Bişkojkên guheztina radyoyê

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

Şêweyên diyarkirî

Guhertoyên cihêreng ên .btn, wekî di şêwazên cûrbecûr diyarkirî de têne piştgirî kirin.



<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

Variables

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