Ávísanir og talstöðvar

Búðu til samræmda gátreiti og útvarpstæki í gegnum vafra og tæki með algjörlega endurskrifuðum ávísunarhlutanum okkar.

Á þessari síðu

Nálgun

Sjálfgefnum gátreitum og útvarpstækjum í vafra er skipt út með hjálp .form-check, röð flokka fyrir báðar inntakstegundir sem bætir útlit og hegðun HTML þátta þeirra, sem veita meiri aðlögun og samkvæmni milli vafra. Gátreitir eru til að velja einn eða fleiri valmöguleika á lista, en útvarp eru til að velja einn valmöguleika af mörgum.

Byggingarlega séð eru <input>s og <label>s systkinaþættir öfugt við <input>innan <label>. Þetta er örlítið orðrétt þar sem þú verður að tilgreina idog foreiginleika til að tengja <input>og <label>. Við notum systkinavalið ( ~) fyrir öll <input>fylki okkar, eins og :checkedeða :disabled. Þegar það er sameinað .form-check-labelbekknum getum við auðveldlega stílað textann fyrir hvert atriði út frá <input>ástandinu 's.

Athuganir okkar nota sérsniðin Bootstrap tákn til að gefa til kynna merkt eða óákveðið ástand.

Ávísanir

Sjálfgefinn gátreitur

Hakaður gátreitur

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>

Óákveðið

Gátreitir geta notað :indeterminategerviflokkinn þegar þeir eru stilltir handvirkt í gegnum JavaScript (engin HTML eiginleiki er tiltækur til að tilgreina hann).

Óákveðinn gátreitur

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>

Öryrkjar

Bættu við disabledeigindinni og tilheyrandi <label>s eru sjálfkrafa stíluð til að passa við ljósari lit til að hjálpa til við að gefa til kynna ástand inntaksins.

Óákveðinn gátreitur óvirkur

Óvirkur gátreitur

Óvirkt hakað við gátreitinn

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>

Útvarpstæki

Sjálfgefið útvarp

Sjálfgefið athugað útvarp

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>

Öryrkjar

Bættu við disabledeigindinni og tilheyrandi <label>s eru sjálfkrafa stíluð til að passa við ljósari lit til að hjálpa til við að gefa til kynna ástand inntaksins.

Óvirkt útvarp

Óvirkt athugað útvarp

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>

Rofar

Rofi hefur merkingu sérsniðins gátreits en notar .form-switchflokkinn til að gera skiptirofa. Íhugaðu að nota role="switch"til að miðla nákvæmari eðli eftirlitsins til hjálpartækni sem styðja þetta hlutverk. Í eldri hjálpartækjum verður það einfaldlega tilkynnt sem venjulegur gátreitur sem varahluti. Rofar styðja einnig disabledeiginleikann.

Sjálfgefin inntak fyrir gátreit fyrir rofa

Merkt inntak fyrir gátreit rofa

Slökkt á inntak gátreits rofa

Óvirkt hakað inntak gátreits fyrir rofa

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>

Sjálfgefið (staflað)

Sjálfgefið er að hvaða fjölda gátreita og útvarpsstöðva sem eru strax systkini verða lóðrétt staflað og á viðeigandi bili með .form-check.

Sjálfgefinn gátreitur

Óvirkur gátreitur

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>

Sjálfgefið útvarp

Annað sjálfgefið útvarp

Óvirkt útvarp

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>

Í línu

Flokkaðu gátreiti eða útvarpstæki í sömu láréttu röðina með því að bæta .form-check-inlinevið hvaða .form-check.

3 (óvirkur)

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 (óvirkur)

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>

Öfugt

Settu gátreitina þína, útvarp og rofa á gagnstæða hlið með .form-check-reversebreytingaflokknum.

Reverse gátreitur

Slökkt á bakhlið gátreits

Inntak gátreits fyrir öfugt rofa

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>

Án merkimiða

Slepptu umbúðunum .form-checkfyrir gátreiti og útvarp sem hafa engan merkitexta. Mundu að gefa samt upp einhvers konar aðgengilegt heiti fyrir hjálpartæki (til dæmis með því að nota aria-label). Sjá yfirlit yfir aðgengishluta eyðublaða fyrir frekari upplýsingar.

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>

Skiptu um hnappa

Búðu til hnappalíka gátreiti og útvarpshnappa með því að nota .btnstíla frekar en .form-check-labelá <label>þættina. Hægt er að flokka þessa skiptahnappa frekar í hnappahóp ef þörf krefur.

Skiptahnappar fyrir gátreit

Einn rofi

html

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

Merkt

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>

Öryrkjar

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>

Sjónrænt eru þessir skiptahnappar fyrir gátreitinn eins og skiptahnappar fyrir hnappaviðbót . Hins vegar eru þær fluttar á annan hátt með hjálpartækni: skjálesendur munu tilkynna að gátreitirnir séu „merktir“/“ekki merktir“ (þar sem þeir eru í grundvallaratriðum enn gátreitir, þrátt fyrir útlitið), en hnappaviðbótunarhnapparnir verða tilkynnt sem „hnappur“/“hnappur ýtt á“. Valið á milli þessara tveggja aðferða fer eftir tegund skipta sem þú ert að búa til, og hvort skiptan mun vera skynsamleg fyrir notendur þegar tilkynnt er um gátreit eða sem raunverulegan hnapp.

Útvarpsskiptahnappar

Merkt Útvarp Öryrkjar Útvarp

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>

Útlínur stíll

Mismunandi afbrigði af .btn, svo sem í hinum ýmsu útlistuðu stílum, eru studd.

Einn rofi
Merkt
Athugaði árangursútvarp Hættuútvarp

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

Breytur

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