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

Default boaty

Voamarika boaty

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>

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

Kisary tsy voafaritra

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>

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.

Kisendrasendra tsy voafaritra

Kilemaina ny boaty

Kilemaina voamarika boaty

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

Radio mahazatra

Radio voamarika default

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>

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.

Radio kilemaina

Radio voazaha kilemaina

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

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.

Fampidirana boaty fanokafana default

Voamarika ny fidirana amin'ny boaty fika

Fampidirana amin'ny boaty fika tsy miasa

Fampidirana ao amin'ny boaty fakan-tsarimihetsika voasakana

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>

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.

Default boaty

Kilemaina ny boaty

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>

Radio mahazatra

Radio default faharoa

Radio kilemaina

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>

Milahatra

Vondrona boaty na radio amin'ny andalana marindrano mitovy amin'ny fanampiana .form-check-inlineamin'ny .form-check.

3 (kilemaina)

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

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>

Reverse

Apetraho eo amin'ny ilany mifanohitra amin'ny .form-check-reversekilasin'ny fanovana ny boaty fisavanao, radio, ary switch.

Avereno ny boaty

Kisendrasendra mivadika

Ampidiro ao anaty boaty fanodikodinana

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>

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.

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>

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

Toggle tokana

html

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

avy amin'ny teny anglisy

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>

sembana

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>

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

avy amin'ny teny anglisy fampielezam-peo sembana fampielezam-peo

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>

Styles voasoritra

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

Toggle tokana
avy amin'ny teny anglisy
Nanamarina ny radio fahombiazana Radio loza

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

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