in English

Ba vérifications na ba radios

Bosala ba cases ya kotiya bilembo ya croix-navigateur mpe croisé-appareil oyo ezali na boyokani mpe ba radios na composante na biso ya ba vérifications oyo ekomami lisusu mobimba.

Na lokasa oyo

Kopusana

Ba cases ya kotiya elembo ya navigateur par défaut mpe ba radios ezo remplacer na aide ya .form-check, série ya ba classes mpo na ba types nionso mibale ya entrée oyo ebongisaka layout mpe comportement ya ba éléments HTML na bango, oyo epesaka personnalisation monene mpe consistance croisée ya navigateur. Ba case ya kotiya bilembo ezali mpo na kopona option moko to mingi na liste, nzokande ba radios ezali mpo na kopona option moko kati na mingi.

Na structure, <input>s na <label>s na biso ezali ba éléments frères na bokeseni na an na <input>kati ya a <label>. Oyo ezali mwa verbose mingi lokola esengeli o préciser idmpe ba forattributs mpo na ko relater na <input>mpe <label>. Tosalelaka moponi ya bandeko ( ~) mpo na ba <input>états na biso nyonso, lokola :checkedto :disabled. Ntango tosangani na .form-check-labelkelasi, tokoki kozanga mpasi mpo na kosala style ya makomi mpo na eloko mokomoko na kotalela <input>ezalela ya 's.

Ba vérifications na biso esalelaka ba icônes ya Bootstrap personnalisés pona kolakisa ba états oyo e vérifier to oyo e déterminer te.

Ba vérifications

Boîte de contrôle par défaut

Etye elembo na esika oyo batyaka elembo

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>

Ezali koyebana te

Ba cases ya kotiya bilembo ekoki kosalela :indeterminateclasse ya pseudo tango etiamaki manuellement na nzela ya JavaScript (ezali na attribut HTML oyo ezali te mpo na kolakisa yango).

Boîte de marque indéterminée

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>

Bakanga

Bakisa disabledattribut mpe ba <label>s oyo esangisi yango ezali automatiquement styled mpo na ko correspondre na couleur ya clair mpo na kosalisa kolakisa état ya entrée.

Boîte de coche indéterminée oyo ekangami

Boîte de coche ya désactivé

Disabled etie elembo na esika ya kotiya elembo

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>

Ba radios

Radio ya liboso

Radio oyo e vérifié par défaut

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>

Bakanga

Bakisa disabledattribut mpe ba <label>s oyo esangisi yango ezali automatiquement styled mpo na ko correspondre na couleur ya clair mpo na kosalisa kolakisa état ya entrée.

Radio oyo ekangami na mosala

Disactivé radio vérifié

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>

Ba interrupteurs

Commutateur ezali na marquage ya case ya kotiya elembo ya personnalisé kasi esalela .form-switchclasse mpo na ko rendre commutateur ya toggle. Tala kosalela role="switch"mpo na kopesa na bosikisiki mingi lolenge ya bokonzi na ba tekiniki ya kosunga oyo ezali kosunga mokumba oyo. Na ba technologies ya kala ya kosunga, ekoyebisama kaka lokola case ya kotiya elembo mbala na mbala lokola fallback. Ba commutateurs pe ezo sunga disabledattribut.

Entrée ya boîte de contrôle ya commutateur par défaut

Entrée ya boîte de contrôle ya commutateur oyo e marqué

Entrée ya case ya kotiya elembo ya commutateur désactivé

Désactivé entrée ya boîte de contrôle ya commutateur oyo e marqué

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>

Par défaut (ezali ebele) .

Na ndenge ya libela, motángo nyonso ya bakɛsi mpe radio oyo ezali ndeko ya penepene ekozala na esika oyo ebongi mpe ekozala na esika oyo ebongi na .form-check.

Boîte de contrôle par défaut

Boîte de coche ya désactivé

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

Radio ya mibale par défaut

Radio oyo ekangami na mosala

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>

Na kati ya molongo

Bosangisi ba cases ya kotiya elembo to ba radios na molongo moko ya horizontal na kobakisa .form-check-inlinena nionso .form-check.

1. 1.

2. 2

3 (bazali na bolɛmbu) .

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>

1. 1.

2. 2

3 (bazali na bolɛmbu) .

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>

Kobalusa

Tia ba cases na yo ya kotiya elembo, ba radios, mpe ba interrupteurs na yo na ngambo mosusu na .form-check-reverseclasse ya modificateur.

Bozongisi elembo na esika bakomi

Désactivé inverse case ya kotiya elembo

Entrée ya case ya kotiya elembo ya interrupteur inverse

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>

Kozanga ba étiquettes

Longola enveloppe .form-checkmpo na ba cases ya kotiya elembo mpe ba radios oyo ezali na texte ya étiquette te. Kobosana te kopesa naino lolenge moko ya nkombo oyo ekoki kozwama mpo na mayele ya kosalisa (na ndakisa, kosalela aria-label). Tala eteni ya botali ya mozindo ya ba formulaires mpo na koyeba makambo mosusu.

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>

Ba boutons ya kobongola

Salá ba cases ya kotiya bilembo oyo ezali lokola ba boutons mpe ba boutons ya radio na kosaleláká .btnba styles na esika ya kosalela .form-check-labelyango na ba <label>éléments. Ba boutons oyo ya kobalusa ekoki lisusu kosangisama na groupe ya ba boutons soki esengeli.

Ba boutons ya kobalusa na case ya kotiya elembo

Toggle moko

html

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

Bazali kosala vérification

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>

Bakanga

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>

Na miso, ba boutons oyo ya kobongola na esika ya kotiya elembo ekokani na ba boutons ya kobongola plugin ya bouton . Kasi esakolami lokola “bouton”/“bouton efinamaki”. Pona kati ya ba approches oyo mibale ekolanda lolenge ya toggle oyo ozali kosala, mpe soki to te toggle ekozala na ntina mpo na basaleli ntango esakolami lokola case ya kotiya elembo to lokola bouton ya solo.

Ba boutons ya kobalusa radio

Bazali kosala vérification Radio Bakanga Radio

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>

Ba styles oyo elakisami

Ba variantes ndenge na ndenge ya .btn, lokola na ba styles ndenge na ndenge oyo elakisami, esungami.

Toggle moko
Bazali kosala vérification
Vérifié radio ya succès Radio ya likama

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

Ba variables oyo ezali

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