چک و رادیو

با مؤلفه چک‌های کاملاً بازنویسی شده ما، کادرها و رادیوها و رادیوهای بین مرورگر و دستگاه‌های مختلف ایجاد کنید.

در این صفحه

رویکرد

چک باکس‌ها و رادیوهای پیش‌فرض مرورگر با کمک .form-checkیک سری کلاس‌ها برای هر دو نوع ورودی جایگزین می‌شوند که چیدمان و رفتار عناصر HTML آنها را بهبود می‌بخشد، که سفارشی‌سازی بیشتر و سازگاری بین مرورگرها را فراهم می‌کند. چک باکس ها برای انتخاب یک یا چند گزینه در یک لیست هستند، در حالی که رادیوها برای انتخاب یک گزینه از بسیاری از گزینه ها هستند.

از نظر ساختاری، <input>s و <label>s ما عناصر خواهر و برادری هستند در مقابل یک <input>درون a <label>. این کمی پرمخاطب تر است زیرا باید مشخص کنید idو forویژگی هایی را برای مرتبط کردن <input>و <label>. ما از انتخابگر خواهر و برادر ( ~) برای همه <input>ایالت هایمان مانند :checkedیا :disabled. وقتی با .form-check-labelکلاس ترکیب می‌شویم، می‌توانیم به راحتی متن را برای هر آیتم بر اساس وضعیت <input>' استایل دهی کنیم.

چک های ما از نمادهای بوت استرپ سفارشی برای نشان دادن وضعیت های علامت دار یا نامشخص استفاده می کنند.

چک ها

چک باکس پیش فرض

چک باکس علامت زده شد

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و sهای مرتبط <label>به طور خودکار برای مطابقت با رنگ روشن تر استایل داده می شوند تا به نشان دادن وضعیت ورودی کمک کنند.

چک باکس نامشخص غیرفعال شد

چک باکس غیرفعال شد

غیرفعال شده چک باکس علامت زده شد

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کلاس برای ارائه یک سوئیچ تعویض استفاده می کند. برای انتقال دقیق‌تر 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.

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>

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;