پشکنین و ڕادیۆکان

دروستکردنی سندوقی هەڵبژاردن و ڕادیۆی بەردەوامی cross-browser و cross-device بە پێکهاتەی پشکنینە تەواو نووسراوەکانمان.

لەم پەیجەدا

نزیک بوونەوە

بۆکسەکانی هەڵبژاردنی پێشوەختەی وێبگەڕ و ڕادیۆکان بە یارمەتی .form-check، زنجیرەیەک پۆل بۆ هەردوو جۆری چوونەژوورەوە دەگۆڕدرێن کە شێواز و هەڵسوکەوتی توخمەکانی HTML یان باشتر دەکات، کە تایبەتمەندی زیاتر و یەکدەنگی وێبگەڕی بڕبڕەیی دابین دەکەن. بۆکسەکانی هەڵبژاردن بۆ هەڵبژاردنی یەک یان چەند بژاردەیەک لە لیستێکدا، لە کاتێکدا ڕادیۆکان بۆ هەڵبژاردنی یەک بژاردەیە لە زۆرێک.

لە ڕووی پێکهاتەییەوە، <input>s و <label>s ی ئێمە توخمە خوشک و براکانن بە پێچەوانەی an <input>لەناو a <label>. ئەمە کەمێک زارەکیترە وەک چۆن دەبێت دیاری بکەیت idو forتایبەتمەندییەکان بۆ پەیوەستکردنی <input>و <label>. ئێمە هەڵبژێرەری خوشک و برا ( ~) بۆ هەموو <input>ویلایەتەکانمان بەکاردەهێنین، وەک :checkedیان :disabled. کاتێک لەگەڵ .form-check-labelپۆلەکەدا تێکەڵ دەکرێت، دەتوانین بە ئاسانی دەقەکە بۆ هەر بابەتێک بە پشتبەستن بە دۆخی <input>'s ستایل بکەین.

پشکنینەکانمان ئایکۆنی تایبەت بە Bootstrap بەکاردەهێنن بۆ ئاماژەدان بە حاڵەتە پشکنینکراوەکان یان نادیاریکراوەکان.

پشکنین دەکات

بۆکسی هەڵبژاردنی پێشوەختە

بۆکسی هەڵبژاردن هەڵبژێردرا

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>

نادیاریکراو

سندوقەکانی هەڵبژاردن دەتوانن :indeterminateپۆلی ساختە بەکاربهێنن کاتێک بە دەست لە ڕێگەی جاڤاسکڕێپتەوە ڕێکدەخرێت (هیچ تایبەتمەندییەکی HTML بەردەست نییە بۆ دیاریکردنی).

بۆکسی هەڵبژاردنی نادیاریکراو

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>

کەم ئەندام

disabledتایبەتمەندیەکە زیاد بکە و <label>s پەیوەندیدارەکان بە شێوەیەکی ئۆتۆماتیکی ستایل دەکرێن بۆ ئەوەی لەگەڵ ڕەنگێکی سووکتردا بگونجێت بۆ یارمەتیدان لە ئاماژەدان بە دۆخی هاتنەژوورەوە.

بۆکسی هەڵبژاردنی نادیاریکراو لەکارخراوە

بۆکسی هەڵبژاردن لەکارخراوە

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>

ڕادیۆکان

ڕادیۆی پێشوەختە

ڕادیۆی پشکنینی پێشوەختە

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>

کەم ئەندام

ڕادیۆی لەکارخراوە

ڕادیۆی پشکنینکراو لەکارخراوە

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>

سویچەکان

سویچێک مارکاپی بۆکسێکی هەڵبژاردنی تایبەتمەندی هەیە بەڵام .form-switchپۆلەکە بەکاردەهێنێت بۆ ڕەندەری سویچی toggle. بیر لە بەکارهێنان بکەرەوە role="switch"بۆ گەیاندنی وردتر سروشتی کۆنتڕۆڵەکە بۆ تەکنەلۆژیا یارمەتیدەرەکان کە پشتگیری ئەم ڕۆڵە دەکەن. لە تەکنەلۆژیا یارمەتیدەرە کۆنەکاندا، بە سادەیی وەک بۆکسێکی هەڵبژاردنی ئاسایی وەکو پاشەکشە ڕادەگەیەنرێت. هەروەها سویچەکان پشتگیری لە disabledتایبەتمەندییەکە دەکەن.

هاتنە ژوورەوەی بۆکسی هەڵبژاردنی سویچی پێشوەختە

هاتنە ژوورەوەی بۆکسی هەڵبژاردنی سویچ هەڵبژێردرا

هاتنە ژوورەوەی بۆکسی هەڵبژاردنی سویچ لەکارخراوە

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>

پێشوەختە (کۆکراوە)

بە شێوازی پێشوەختە، هەر ژمارەیەک لە سندوقەکانی هەڵبژاردن و ڕادیۆکان کە خوشک و برایەکی دەستبەجێن بە شێوەی ڕاست لەسەر یەک کۆدەکرێنەوە و بە شێوەیەکی گونجاو لەگەڵ .form-check.

بۆکسی هەڵبژاردنی پێشوەختە

بۆکسی هەڵبژاردن لەکارخراوە

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>

ڕادیۆی پێشوەختە

دووەم ڕادیۆی پێشوەختە

ڕادیۆی لەکارخراوە

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>

لە هێڵ

بۆکسەکانی هەڵبژاردن یان ڕادیۆکان لەسەر هەمان ڕیزی ئاسۆیی گروپ بکە بە زیادکردن .form-check-inlineبۆ هەر .form-check.

1. 1

2. 2

3 (لەکارکەوتوو)

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 (لەکارکەوتوو)

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>

پێچەوانە کردنەوە

بۆکسەکانی هەڵبژاردن و ڕادیۆ و سویچەکانت لە لایەنی بەرامبەردا دابنێ لەگەڵ .form-check-reverseپۆلی دەستکاریکەر.

بۆکسی هەڵبژاردن پێچەوانە بکەرەوە

بۆکسی هەڵبژاردنی پێچەوانە لەکارخراوە

هاتنە ژوورەوەی بۆکسی هەڵبژاردنی سویچی پێچەوانە

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>

بەبێ لیبێڵ

پێچانەکە .form-checkبۆ ئەو سندوق و ڕادیۆیانە بهێڵەرەوە کە هیچ دەقێکی ناویان نییە. لەبیرت بێت کە هێشتا هەندێک جۆری ناوی دەستڕاگەیشتن بۆ تەکنەلۆژیا یارمەتیدەرەکان دابین بکەیت (بۆ نموونە، بەکارهێنانی aria-label). بۆ زانیاری زیاتر سەیری بەشی دەستڕاگەیشتن بە تێڕوانینێکی گشتی فۆڕمەکان بکە.

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>

دوگمەکان بگۆڕە

دروستکردنی بۆکسی هەڵبژاردن و دوگمەی ڕادیۆیی هاوشێوەی دوگمە بە بەکارهێنانی .btnستایلەکان نەک .form-check-labelلەسەر <label>توخمەکان. ئەم دوگمانەی گۆڕین دەتوانرێت زیاتر لە گروپی دوگمەکاندا گرووپ بکرێن ئەگەر پێویست بوو.

دوگمەکانی گۆڕینی بۆکسی هەڵبژاردن

تاکە گۆڕانکاری

html

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

پشکنی

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>

کەم ئەندام

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>

لە ڕووی بینراوەوە، ئەم دوگمانەی گۆڕینی سندوقی هەڵبژاردن هاوشێوەی دوگمەکانی گۆڕینی پێوەکراوی دوگمەکانن . بەڵام، ئەوان بە شێوەیەکی جیاواز لەلایەن تەکنەلۆژیا یارمەتیدەرەکانەوە دەگوازرێنەوە: گۆڕینی سندوقی هەڵبژاردن لەلایەن خوێنەرانی شاشەوە وەک "پشکنین"/"پشکنین نەکراوە" ڕادەگەیەنرێت (لەبەرئەوەی، سەرەڕای دەرکەوتنیان، ئەوان لە بنەڕەتدا هێشتا سندوقی هەڵبژاردنن)، لە کاتێکدا دوگمەکانی گۆڕینی پێوەکراوەکانی دوگمەکان دەبن بە “دوگمە”/“دوگمە فشاردراو” ڕادەگەیەنرێت. هەڵبژاردنی نێوان ئەم دوو ڕێگایە بەندە بە جۆری ئەو گۆڕانکارییەی کە تۆ دروستی دەکەیت، و ئایا گۆڕانکارییەکە بۆ بەکارهێنەران مانای دەبێت یان نا کاتێک وەک سندوقی هەڵبژاردن یان وەک دوگمەی ڕاستەقینە ڕادەگەیەنرێت.

دوگمەکانی گۆڕینی ڕادیۆ

پشکنی ڕادیۆ کەم ئەندام ڕادیۆ

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>

شێوازە هێڵکارییەکان

جۆرە جیاوازەکانی .btn, وەک لە شێوازە جیاوازەکانی هێڵکاریکراو، پشتگیری دەکرێن.

تاکە گۆڕانکاری
پشکنی
ڕادیۆی سەرکەوتنی پشکنی ڕادیۆی مەترسی

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>

ساس

گۆڕاوەکان

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