انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #6 من درس: مربعات الاختيار والمفاتيح في بوتستراب 5

Toggle Button Checks أزرار التبديل بكلاس btn-check

صمّم مربعات الاختيار وأزرار الراديو والحالة الوسطى والمفاتيح المنزلقة والمحاذاة العكسية وأزرار التبديل المعتمدة على CSS في بوتستراب 5.
5 صفوف تعليمية
بوتستراب 5
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

من أروع التحسينات المعمارية في Bootstrap 5 استبدال إضافة أزرار التبديل القديمة المعتمدة على JavaScript بالكلاس النقي .btn-check. تعتمد الفكرة على وضع عنصر <input class="btn-check" autocomplete="off"> كأخ سابق مباشرة لعنصر <label class="btn ..."> يحمل سمة for مطابقة لمعرّف الحقل.

يخفي بوتستراب حقل الإدخال بصرياً مع إبقائه متاحاً للتركيز بلوحة المفاتيح، وعند نقر المستخدم على التسمية المصممة كزر (سواء كانت زر حد خارجي .btn-outline-primary أو زراً ملوناً)، يتكفل محدد الأخ المباشر في CSS .btn-check:checked + .btn بتلوين الزر وإرسال قيمته مع النموذج تلقائياً!

الصف 2 كود برمجي
HTML 
<input type="checkbox" class="btn-check" id="sslBtn"
       autocomplete="off" checked>
<label class="btn btn-outline-success me-2" for="sslBtn">
  Auto SSL
</label>
<input type="radio" class="btn-check" name="tier" id="t1"
       autocomplete="off">
<label class="btn btn-outline-primary" for="t1">Pro</label>
جرّب بنفسك
الصف 3 شرح توضيحي

يلخص الجدول المرجعي التالي كافة كلاسات وسمات خيارات التحديد والمفاتيح في Bootstrap 5.3:

الكلاس أو الخاصيةموضع التطبيقالوظيفة السلوكية والبصرية
.form-checkالحاوية الأب <div>تنظيم المسافة والمحاذاة بين حقل الاختيار ونص التسمية المرافق
.form-check-input<input type="checkbox|radio">رسم مربع اختيار أو دائرة راديو موحدة عبر المتصفحات بأيقونة SVG
.form-switchالحاوية .form-checkتحويل مربع الاختيار إلى مفتاح منزلق يُرفق بسمة role="switch"
.form-check-inlineالحاوية .form-checkصف عدة خيارات أفقياً في سطر واحد مع التطويق التلقائي على الجوال
.form-check-reverseالحاوية .form-checkنقل المربع أو المفتاح إلى الطرف المقابل لنص التسمية
.btn-check<input> قبل <label class="btn">إخفاء الحقل مع تلوين التسمية المجاورة كزر تبديل تفاعلي بلغة CSS
الصف 4 ملاحظة هامة
الصف 5 شرح توضيحي
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

أتقنت في هذا الدرس بناء مربعات الاختيار وأزرار الراديو الموحدة عبر .form-check، وضبط الحالة الوسطى بالجافاسكريبت، وتصميم المفاتيح المنزلقة .form-switch، والعرض الأفقي والعكسي، وأزرار التبديل المعتمدة كلياً على CSS عبر .btn-check. الخطوة التالية: انتقل الآن إلى درس «أشرطة النطاق الرقمي في بوتستراب 5» لتصميم منزلقات القيم الرقمية وضبط حدودها وقفزاتها وعرض قيمتها لحظياً.

جميع فقرات هذا الدرس (مربعات الاختيار والمفاتيح في بوتستراب 5)