الشيكات وأجهزة الراديو

قم بإنشاء مربعات اختيار وأجهزة راديو متسقة عبر المتصفح وعبر الأجهزة باستخدام مكون الشيكات المعاد كتابته بالكامل.

على هذه الصفحة

يقترب

يتم استبدال مربعات الاختيار وأجهزة الراديو الافتراضية للمتصفح بمساعدة .form-check، سلسلة من الفئات لكل من أنواع الإدخال التي تعمل على تحسين تخطيط وسلوك عناصر HTML الخاصة بهم ، والتي توفر تخصيصًا أكبر واتساقًا عبر المستعرضات. خانات الاختيار مخصصة لتحديد خيار واحد أو عدة خيارات في القائمة ، بينما تستخدم أجهزة الراديو لتحديد خيار واحد من بين العديد من الخيارات.

من الناحية الهيكلية ، فإن عناصرنا <input>وعناصرنا <label>هي عناصر أشقاء بدلاً من <input>داخل أ <label>. هذا مطول أكثر قليلاً حيث يجب عليك تحديد السمات والسمات لربط idو . نستخدم محدد الأخوة ( ) لجميع حالاتنا ، مثل أو . عند دمجها مع الفصل ، يمكننا بسهولة نمط النص لكل عنصر بناءً على حالة ''.for<input><label>~<input>:checked:disabled.form-check-label<input>

تستخدم الشيكات الخاصة بنا أيقونات Bootstrap مخصصة للإشارة إلى الحالات المحددة أو غير المحددة.

الفحوصات

خانة الاختيار الافتراضية

خانة اختيار

لغة البرمجة

<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فئة pseudo عند تعيينها يدويًا عبر JavaScript (لا توجد سمة 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>تلقائيًا لتتطابق مع لون أفتح للمساعدة في الإشارة إلى حالة الإدخال.

مربع اختيار معطل غير محدد

مربع اختيار معطل

تم تحديد خانة الاختيار معطل

لغة البرمجة

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

أجهزة الراديو

الراديو الافتراضي

الاختيار الافتراضي للراديو

لغة البرمجة

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

عاجز

راديو معطل

تعطيل فحص الراديو

لغة البرمجة

<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السمة.

مفتاح الإدخال الافتراضي لمربع الاختيار

تم تحديد إدخال خانة الاختيار التبديل

تعطيل إدخال مربع الاختيار

تم تعطيل إدخال خانة الاختيار التبديل

لغة البرمجة

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

خانة الاختيار الافتراضية

مربع اختيار معطل

لغة البرمجة

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

في النسق

قم بتجميع مربعات الاختيار أو أجهزة الراديو في نفس الصف الأفقي عن طريق الإضافة .form-check-inlineإلى أي منها .form-check.

3 (معطل)

لغة البرمجة

<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 (معطل)

لغة البرمجة

<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فئة المعدل.

خانة الاختيار العكسي

مربع الاختيار العكسي معطل

عكس إدخال خانة الاختيار التبديل

لغة البرمجة

<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). راجع قسم إمكانية الوصول نظرة عامة على النماذج للحصول على التفاصيل.

لغة البرمجة

<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>. يمكن أيضًا تجميع أزرار التبديل هذه في مجموعة أزرار إذا لزم الأمر.

أزرار تبديل خانة الاختيار

تبديل واحد

لغة البرمجة

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

بصريًا ، تتطابق أزرار تبديل مربع الاختيار هذه مع أزرار تبديل المكون الإضافي للزر . ومع ذلك ، يتم نقلها بشكل مختلف عن طريق التقنيات المساعدة: سيتم الإعلان عن مفاتيح تبديل مربع الاختيار بواسطة برامج قراءة الشاشة على أنها "محددة" / "غير محددة" (نظرًا لأنها ، على الرغم من مظهرها ، لا تزال مربعات اختيار بشكل أساسي) ، بينما ستكون أزرار تبديل الزر الإضافي أعلن على أنه "زر" / "زر مضغوط". سيعتمد الاختيار بين هذين الأسلوبين على نوع التبديل الذي تقوم بإنشائه ، وما إذا كان التبديل سيكون منطقيًا للمستخدمين أم لا عند الإعلان عنه كمربع اختيار أو كزر فعلي.

أزرار تبديل الراديو

التحقق مذياع عاجز مذياع

لغة البرمجة

<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، مثل الأنماط المحددة المختلفة.

تبديل واحد
التحقق
تم التحقق من راديو النجاح راديو خطر

لغة البرمجة

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