U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
in English

Jeegaga iyo raadiyaha

Samee sanduuqa jeegaga ee iskutallaabaha iyo qalabka isdhaafka ah ee joogtada ah iyo raadiyaha oo leh qaybtayada hubinta oo gabi ahaanba dib loo qoray.

Boggan

Habka

Sanduuqyada hubinta ee Browser-ka iyo raadiyaha waxaa lagu beddelaa caawinta .form-check, taxane ah oo ah fasallo labada nooc ah oo wax gelinta ah kuwaas oo wanaajinaya qaabeynta iyo hab-dhaqanka canaasiirta HTML, kuwaas oo siinaya is-beddel weyn iyo isku-duubnaanta browserka. Sanduuqyada hubinta waxaa loogu talagalay in lagu xusho hal ama dhowr ikhtiyaar oo liiska ku jira, halka raadiyayaashu ay yihiin kuwa badan oo laga dooranayo hal doorasho.

Dhisme ahaan, innaga <input>iyo <label>iintayadu waa xubno walaalo ah oo ka soo horjeeda <input>gudaha a <label>. Kani waa ka hadal badan yahay maadaama ay tahay inaad qeexdo idiyo forsifooyinka aad la xidhiidho <input>iyo <label>. Waxaan u isticmaalnaa xulashada walaalaha ( ~) dhammaan <input>gobolladeena, sida :checkedama :disabled. Marka lagu daro .form-check-labelfasalka, waxaan si fudud u habayn karnaa qoraalka shay kasta iyada oo ku saleysan <input>gobolka.

Jeegagayagu waxa ay isticmaalaan summada Bootstrap-ka caadiga ah si ay u muujiyaan gobollo la hubiyay ama aan la garanayn.

Hubinta

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

Aan go'aamin

Sanduuqyada hubinta waxay isticmaali karaan :indeterminatefasalka beenta ah marka gacanta lagu dhejiyo JavaScript (ma jirto sifo HTML ah oo la heli karo oo lagu qeexayo).

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

Naafada

Ku dar disabledsifada iyo <label>s laxidhiidha si toos ah ayaa loo qaabeeyey si ay ula midoobaan midab khafiif ah si ay gacan uga geystaan ​​muujinta xaaladda gelinta.

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

Idaacadaha

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

Naafada

Ku dar disabledsifada iyo <label>s laxidhiidha si toos ah ayaa loo qaabeeyey si ay ula midoobaan midab khafiif ah si ay gacan uga geystaan ​​muujinta xaaladda gelinta.

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

Gawaarida

Beddelku waxa uu leeyahay calaamadaynta sanduuqa hubinta ee caadiga ah laakiin waxa uu isticmaalaa .form-switchfasalka si uu u sameeyo beddelka beddelka. Tixgeli isticmaalka role="switch"si aad si sax ah ugu gudbiso dabeecadda xakamaynta tignoolajiyada caawinta ee taageera doorkan. Tignoolajiyada caawinta ee duugga ah, waxa si fudud loogu dhawaaqi doonaa sidii sanduuq hubin oo caadi ah dib-u-dhac ahaan. Gawaarida sidoo kale waxay taageeraan disabledsifada.

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

Default (la dulsaaray)

Sida caadiga ah, tiro kasta oo sanduuqyada hubinta ah iyo raadiyaha ee walaalaha ah ayaa si toosan loo dhejin doonaa oo si habboon loo kala fogayn doonaa .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

Koox sanduuqyada hubinta ama raadiyaha ku yaal saf toosan adoo ku daraya .form-check-inlinemid kasta .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>

Aan lahayn calaamado

Iska daa duuduubka sanduuqyada .form-checkhubinta iyo raadiyaha aan lahayn qoraal summadeed. Xusuusnow inaad wali bixiso nooc ka mid ah magaca la heli karo ee tignoolajiyada caawinta (tusaale ahaan, adigoo isticmaalaya aria-label). Faahfaahinta ka eeg foomka guudmarka ee qaybta gelitaanka

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

Beddel badhamada

Samee sanduuqyada hubinta ee u eg badhanka iyo badhamada raadiyaha adiga oo isticmaalaya .btnqaabab halkii aad ka isticmaali .form-check-labellahayd <label>walxaha. Badhamadan beddelka ah waxa lagu sii dayn karaa koox badhan haddii loo baahdo.

Hubi sanduuqa beddelka badhamada

<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>
Muuqaal ahaan, badhamada beddesha sanduuqa jeeggu waxay la mid yihiin badhamada beddelka badhanka . Si kastaba ha ahaatee, waxaa loo gudbiyaa si ka duwan tignoolajiyada caawinta: sanduuqa jeeggu waxa ay ku dhawaaqi doonaan akhristayaasha shaashada sida "la saxay"/"aan la hubin" lagu dhawaaqay sida "badhanka"/"badhanka la riixay". Doorashada labadan hab waxay ku xirnaan doontaa nooca toggle ee aad abuurayso, iyo haddii beddelaadku macno samayn doono isticmaalayaasha marka lagu dhawaaqo sanduuqa hubinta ama badhanka dhabta ah.

Badhamada beddelka raadiyaha

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

Hababka qeexan

Noocyada kala duwan ee .btn, sida qaababka kala duwan ee la qeexay, ayaa la taageeray.



<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

Kala duwanaansho

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