Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
in English

Cheklar va radiolar

To'liq qayta yozilgan tekshirish komponentimiz bilan izchil o'zaro brauzer va qurilmalar o'rtasida belgilash katakchalari va radiolarni yarating.

Ushbu sahifada

Yondashuv

Brauzerning birlamchi belgilash kataklari va radiostantsiyalari yordamida .form-checkhar ikkala kiritish turi uchun bir qator sinflar almashtiriladi, bu ularning HTML elementlarining joylashuvi va xatti-harakatlarini yaxshilaydi, bu ko'proq moslashtirish va o'zaro brauzer izchilligini ta'minlaydi. Belgilash katakchalari ro'yxatdagi bir yoki bir nechta variantni tanlash uchun, radiolar esa ko'p variantlardan bittasini tanlash uchun.

Strukturaviy jihatdan bizning <input>s va s lar ichidagi a <label>dan farqli ravishda qardosh elementlardir . Bu biroz batafsilroq, chunki va bilan bog'lanish uchun atributlar va xususiyatlarni belgilashingiz kerak . Biz yoki kabi barcha holatlarimiz uchun aka-uka selektoridan ( ) foydalanamiz . Sinf bilan birlashganda , biz har bir element uchun matnni holatiga qarab osongina uslublashimiz mumkin .<input><label>idfor<input><label>~<input>:checked:disabled.form-check-label<input>

Bizning cheklarimiz belgilangan yoki noaniq holatlarni ko'rsatish uchun maxsus Bootstrap piktogrammalaridan foydalanadi.

Tekshiruvlar

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

Noaniq

Belgilash kataklari JavaScript orqali qo'lda o'rnatilganda psevdo sinfdan foydalanishi mumkin :indeterminate(uni belgilash uchun mavjud HTML atributi mavjud emas).

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

O'chirilgan

Atributni qo'shing va disabledtegishli <label>s avtomatik tarzda ochilgan rangga mos keladigan tarzda kiritiladi va kirish holatini ko'rsatishga yordam beradi.

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

Radiolar

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

O'chirilgan

Atributni qo'shing va disabledtegishli <label>s avtomatik tarzda ochilgan rangga mos keladigan tarzda kiritiladi va kirish holatini ko'rsatishga yordam beradi.

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

Kalitlar

Kommutatorda maxsus belgilash katagiga belgi qo'yilgan, biroq .form-switcho'tish tugmachasini ko'rsatish uchun sinfdan foydalanadi. role="switch"Ushbu rolni qo'llab-quvvatlaydigan yordamchi texnologiyalarga boshqaruv xarakterini aniqroq etkazish uchun foydalanishni ko'rib chiqing . Eski yordamchi texnologiyalarda u zaxira sifatida oddiy belgilash qutisi sifatida e'lon qilinadi. Kalitlar ham atributni qo'llab-quvvatlaydi disabled.

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

Birlamchi (stacked)

Odatiy bo'lib, bevosita birodar bo'lgan har qanday miqdordagi belgilash katakchalari va radiostantsiyalar vertikal ravishda joylashtiriladi va bilan mos ravishda joylashtiriladi .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>

Mos ravishda

Belgilash katakchalari yoki radiolarni bir xil gorizontal qatorga qo'shish orqali .form-check-inlineguruhlang .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>

Yorliqlarsiz

.form-checkYorliq matni bo'lmagan belgilash katakchalari va radiolar uchun o'rashni o'tkazib yubormang . Yordamchi texnologiyalar uchun foydalanish mumkin bo'lgan nomni taqdim etishni unutmang (masalan, yordamida aria-label). Tafsilotlar uchun shakllar umumiy koʻrinishining maxsus imkoniyatlari boʻlimiga qarang.

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

Oʻchirish tugmalari

Elementlarda emas , .btnbalki uslublardan foydalanib, tugma kabi belgilash katakchalari va radio tugmalarini yarating . Agar kerak bo'lsa , ushbu o'tish tugmachalarini yana tugmalar guruhiga guruhlash mumkin ..form-check-label<label>

Belgilash katakchasini almashtirish tugmalari

<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>
Vizual ravishda, bu belgilash katakchalarini almashtirish tugmalari plaginni almashtirish tugmalari bilan bir xil . Biroq, ular yordamchi texnologiyalar orqali boshqacha tarzda uzatiladi: belgilash katakchalarini almashtirish ekranli o'quvchilar tomonidan "belgilangan"/"belgilanmagan" deb e'lon qilinadi (chunki tashqi ko'rinishiga qaramay, ular hali ham belgilash katakchalari), plagin tugmachalarini almashtirish tugmalari esa shunday bo'ladi. "tugma"/"tugma bosildi" deb e'lon qilindi. Ushbu ikki yondashuv o'rtasidagi tanlov siz yaratayotgan almashtirish turiga bog'liq bo'ladi va o'tish tugmasi tasdiqlash qutisi yoki haqiqiy tugma sifatida e'lon qilinganda foydalanuvchilarga mantiqiy bo'ladimi yoki yo'qmi.

Radio o'tish tugmalari

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

Belgilangan uslublar

ning turli xil variantlari .btn, masalan, har xil tasvirlangan uslublar qo'llab-quvvatlanadi.



<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

O'zgaruvchilar

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