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

Qutiya kontrolê ya xwerû

Qutiya kontrolê hate kontrol kirin

html

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

Qutiya kontrolê ya nediyar

html

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

Qutiya kontrolê ya nediyar hate astengkirin

Qutiya kontrolê ya astengdar

Qutiya kontrolê ya neçalakkirî

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
    Disabled indeterminate checkbox
  </label>
</div>
<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

Radyoya standard

Radyoya kontrolkirî ya standard

html

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

Radyoya astengdar

Radyoya kontrolkirî ya astengdar

html

<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. Bifikirin ku bikar bînin role="switch"da ku xwezaya kontrolê rasttir ragihînin teknolojiyên arîkar ên ku vê rolê piştgirî dikin. Di teknolojiyên arîkar ên kevn de, ew ê bi tenê wekî qutiya kontrolê ya birêkûpêk wekî paşverû were ragihandin. Switches jî disabledtaybetmendiyê piştgirî dikin.

Ketina qutiya kontrolê ya guhêrbar a xwerû

Ketina qutiya kontrolê ya guhêrbar hate kontrol kirin

Ketina qutiya kontrolê ya guhastinê neçalak kir

Ketina qutiya kontrolê ya guhêrbar a neçalakkirî

html

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" 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" role="switch" 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" role="switch" 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" role="switch" 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.

Qutiya kontrolê ya xwerû

Qutiya kontrolê ya astengdar

html

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

Radyoya standard

Radyoya xwerû ya duyemîn

Radyoya astengdar

html

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

3 (seqet)

html

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

3 (seqet)

html

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

Gara paşî

.form-check-reverseBi çîna guhêrbar re qutiyên kontrolê, radyo û guhêrbarên xwe bixin aliyê dijber .

Reverse checkbox

Qutiya kontrolê ya berevajî seqet kir

Ketina qutiya kontrolê ya berevajî

html

<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
  <label class="form-check-label" for="reverseCheck1">
    Reverse checkbox
  </label>
</div>
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
  <label class="form-check-label" for="reverseCheck2">
    Disabled reverse checkbox
  </label>
</div>

<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
  <label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</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.

html

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

Veguheztina yekane

html

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

Kontrol kirin

html

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

Bêmecel

html

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

Kontrol kirin Radyo Bêmecel Radyo

html

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

Veguheztina yekane
Kontrol kirin
Radyoya serkeftinê kontrol kir Danger radio

html

<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 10 3 3 6-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;