Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
in English

Fanamarinana sy radio

Mamorona boaty fisavana sy radio mifanandrify amin'ny mpitety navigateur sy miampita fitaovana miaraka amin'ny singa fanamarinana voasoratra tanteraka.

Amin'ity pejy ity

fomba Fiasa

Nosoloina ny boaty fisavana sy ny radio default amin'ny navigateur miaraka amin'ny fanampian'ny .form-check, andiana kilasy ho an'ireo karazana fampidirana izay manatsara ny fandrindrana sy ny fitondran-tenan'ireo singa HTML-ny, izay manome fampifanarahana bebe kokoa sy tsy miovaova amin'ny navigateur. Ny boaty fanamarihana dia natao hisafidianana safidy iray na maromaro ao anaty lisitra, raha ny radio kosa dia natao hisafidianana safidy iray amin'ny maro.

Raha ara-drafitra, ny <input>s sy ny <label>s dia singa iray mpirahalahy mifanohitra amin'ny <input>ao anatin'ny <label>. Somary be verbose kokoa ity satria tsy maintsy amaritanao ny toetra idsy forny toetra mifandraika amin'ny <input>and <label>. Ampiasainay ny mpifidy mpiray tampo ( ~) ho an'ny <input>fanjakanay rehetra, toy ny :checkedna :disabled. Rehefa ampiarahina amin'ny .form-check-labelkilasy dia afaka manamboatra mora foana ny lahatsoratra ho an'ny singa tsirairay mifototra amin'ny <input>toetran'ny.

Ny fisavana ataonay dia mampiasa kisary Bootstrap mahazatra hanondro fanjakana voamarika na tsy voafaritra.

taratasim-bola

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

Tsy voafaritra

Afaka mampiasa ny :indeterminatekilasy pseudo ny boaty fanamarihana rehefa apetraka amin'ny tanana amin'ny alalan'ny JavaScript (tsy misy toetra HTML azo hamaritana azy io).

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

sembana

Ampio ny disabledtoetra ary ny <label>s mifandray dia asiana endrika ho azy hifanaraka amin'ny loko maivana kokoa mba hanampiana amin'ny famantarana ny toetran'ny fampidirana.

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

sembana

Ampio ny disabledtoetra ary ny <label>s mifandray dia asiana endrika ho azy hifanaraka amin'ny loko maivana kokoa mba hanampiana amin'ny famantarana ny toetran'ny fampidirana.

<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

Ny switch dia manana mari-pamantarana amin'ny boaty fisavana manokana fa mampiasa ny .form-switchkilasy mba hamoahana switch toggle. Eritrereto ny fampiasana role="switch"mba hampitana amin'ny fomba marina kokoa ny toetran'ny fanaraha-maso amin'ireo teknolojia manampy izay manohana io andraikitra io. Amin'ny teknolojia fanampiana taloha, dia hambara fotsiny ho toy ny boaty fisavana mahazatra ho toy ny fiverenana. Ny switch koa dia manohana ny disabledtoetra.

<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 (mifantina)

Amin'ny alàlan'ny default, izay isan'ny boaty fisaka sy radio izay mpiray tampo akaiky dia hatambatra mitsangana ary apetraka mifanaraka amin'ny .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>

Milahatra

Vondrona boaty na radio amin'ny andalana marindrano mitovy amin'ny fanampiana .form-check-inlineamin'ny .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>

Tsy misy etikety

Esory ny famonosana .form-checkny boaty sy radio izay tsy misy soratra misy marika. Tsarovy fa mbola manome endrika anarana azo idirana ho an'ny teknolojia manampy (ohatra, mampiasa aria-label). Jereo ny fizarana fidirana amin'ny endrika topimaso momba ny antsipiriany.

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

Toggle bokotra

Mamorona boaty fisavana toy ny bokotra sy bokotra radio amin'ny fampiasana .btnfomba fa tsy .form-check-labelamin'ny <label>singa. Ireo bokotra toggle ireo dia azo atambatra ao anaty vondrona bokotra raha ilaina.

Bokotra toggle boaty

<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>
Raha jerena dia mitovy amin'ny bokotra toggle plugin ireo bokotra toggle . Na izany aza, samy hafa ny fampitana azy ireo amin'ny alàlan'ny teknolojia manampy: hambaran'ny mpamaky efijery ho "voamarina" / "tsy voamarika" ny fanodikodinam-pandrefesana (satria, na dia eo aza ny bika aman'endriny, dia mbola boxes ihany izy ireo), fa ny bokotra toggle plugin nambara ho “bokotra”/ “bokotra voatsindry”. Ny safidy eo amin'ireo fomba roa ireo dia hiankina amin'ny karazana toggle noforoninao, ary raha toa ka misy dikany amin'ny mpampiasa ny toggle na tsia rehefa nambara ho boaty na bokotra tena izy.

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

Styles voasoritra

Ny karazany samihafa amin'ny .btn, toy ny amin'ny fomba voafaritra voafaritra, dia tohana.



<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

hiovaova

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