في هذا الدرس 6تصفّح المواضيع
في الماضي كانت المتصفحات ترسم مربعات الاختيار checkbox وأزرار الراديو radio بأحجام وألوان متباينة يصعب التحكم بها، وكان الإصدار الرابع من بوتستراب يفرق بين خيارات المتصفح الافتراضية وخيارات مخصصة معقدة. أما في Bootstrap 5 فقد توحّد النظام بالكامل تحت حاوية .form-check التي تضم عنصر <input class="form-check-input"> متبوعاً بعنصر <label class="form-check-label">.
تُستخدم مربعات الاختيار عندما يحق للمستخدم تحديد عدة بنود مستقلة معاً، بينما تُستخدم أزرار الراديو المتشاركة في سمة name واحدة لحصر الاختيار في بديل واحد فقط من المجموعة.
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="c1">
<label class="form-check-label" for="c1">Backup</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="plan"
id="r1" checked>
<label class="form-check-label" for="r1">Monthly</label>
</div>إلى جانب حالتَي التحديد checked والتعطيل disabled القياسيتين في HTML، يدعم مربع الاختيار حالة ثالثة تُعرف بالحالة الوسطى غير الحاسمة :indeterminate وتظهر بصرياً على هيئة شرطة أفقية بيضاء في منتصف المربع.
تُستخدم هذه الحالة في واجهات الجداول وصلاحيات المستخدمين عندما يحدد المستخدم بعض البنود الفرعية ويترك بعضها الآخر فارغاً. لاحظ أنه لا توجد سمة نصية باسم indeterminate في كود HTML، بل تُضبط حصراً عبر خاصية الكائن في JavaScript بكتابة checkbox.indeterminate = true.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="all">
<label class="form-check-label" for="all">All</label>
</div>
<script>
document.getElementById('all').indeterminate = true;
</script>عند بناء لوحات إعدادات الحسابات (مثل تفعيل الإشعارات الفورية أو المصادقة الثنائية)، يمنح المفتاح المنزلق انطباعاً أوضح بالتفعيل الفوري من مربع الاختيار التقليدي. يحوّل Bootstrap 5 أي مربع اختيار عادي إلى مفتاح منزلق أنيق بمجرد إضافة الكلاس .form-switch إلى جانب .form-check على العنصر الأب.
ولتعزيز دلالة الإتاحة لقارئات الشاشة الحديثة، أضف السمة role="switch" إلى عنصر <input type="checkbox"> ليُعلن عنه كمفتاح تشغيل وإيقاف بدلاً من مربع تحديد عادي.
تُرتب عناصر .form-check افتراضياً فوق بعضها البعض في أسطر مستقلة. لصفّ عدة خيارات قصيرة أفقياً على سطر واحد (مثل تقييمات سريعة أو أيام الأسبوع)، أضف الكلاس .form-check-inline إلى كل حاوية فرعية.
أما في قوائم الإعدادات التي تضع اسم الميزة على طرف السطر والمفتاح المنزلق أو مربع الاختيار على الطرف المقابل، فيوفر الإصدار 5.2+ الكلاس المدمج .form-check-reverse الذي يعكس موضع المربع بالنسبة لنص التسمية بنظام منطقي نظيف.
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox"
role="switch" id="sw" checked>
<label class="form-check-label" for="sw">2FA</label>
</div>
<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="rv">
<label class="form-check-label" for="rv">Reverse</label>
</div>عند وضع مربع اختيار أو زر راديو بمفرده داخل خلية جدول لتحديد الصف دون أي نص بجانبه، استغنِ عن الحاوية الأب .form-check وضع <input class="form-check-input"> مباشرة حتى لا تنشأ هوامش جانبية فارغة تخل بمحاذاة الخلية. وفي هذه الحالة يصبح تزويد الحقل بسمة aria-label إلزامياً لتعريف قارئات الشاشة بالغرض من المربع.
تفاعل مع الأنماط الأربعة للمربعات والمفاتيح وأزرار التبديل في المحاكي الحي التالي:
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس بناء مربعات الاختيار وأزرار الراديو الموحدة عبر .form-check، وضبط الحالة الوسطى بالجافاسكريبت، وتصميم المفاتيح المنزلقة .form-switch، والعرض الأفقي والعكسي، وأزرار التبديل المعتمدة كلياً على CSS عبر .btn-check. الخطوة التالية: انتقل الآن إلى درس «أشرطة النطاق الرقمي في بوتستراب 5» لتصميم منزلقات القيم الرقمية وضبط حدودها وقفزاتها وعرض قيمتها لحظياً.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Indeterminate Checkbox State الحالة الوسطى غير الحاسمة
- حالة بصرية تظهر كشرطة أفقية تُفعّل عبر الجافاسكريبت للدلالة على تحديد جزء من العناصر الفرعية فقط.
- للمراجعة
- 02 Toggle Switch المفتاح المنزلق
- مربع اختيار منسق بكلاس .form-switch وسمة role="switch" لتمثيل خيارات التشغيل والإيقاف الفورية.
- للمراجعة
- 03 Button Check Toggle زر التبديل بالحقل المخفي
- نمط يعتمد على CSS الخالصة عبر وضع حقل input.btn-check قبل عنصر label.btn مباشرة ليعمل كزر تبديل.
- للمراجعة
- 04 Mutually Exclusive Radio Group مجموعة الراديو الحصرية
- عدة أزرار راديو تشترك في قيمة سمة name واحدة بحيث يؤدي اختيار أحدها إلى إلغاء تحديد البقية تلقائياً.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 SVG SVG
- Scalable Vector Graphics
- الرسوميات المتجهية القابلة للتحجيم — ترسم علامة التحديد ونقطة الراديو ودائرة المفتاح المنزلق بدقة متجهية عالية على جميع الشاشات.
- للمراجعة
- 02 ARIA ARIA
- Accessible Rich Internet Applications
- تطبيقات الإنترنت الغنية المتاحة — توفر سمة role="switch" للمفاتيح المنزلقة وaria-label لمربعات التحديد المستقلة بدون نص.
- للمراجعة
- 03 DOM DOM
- Document Object Model
- نموذج كائن المستند — يوفر الخاصية البرمجية .indeterminate على عنصر الإدخال لعدم وجود سمة HTML نصية مناظرة لها.
- للمراجعة
- 04 CSS CSS
- Cascading Style Sheets
- أوراق الأنماط المتتالية — توظف محدد الأخ المجاور :checked + .btn لتشغيل أزرار التبديل بدون الحاجة لأي كود جافاسكريبت.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ ثلاثة مفاتيح .form-check.form-switch مزودة بسمة role="switch" (أحدها مفعل وثانيها غير مفعل وثالثها معطل) مع خيار إضافي بمحاذاة .form-check-reverse.
-
اربط ثلاثة عناصر راديو <input class="btn-check" name="plan" autocomplete="off"> قبل عناصر <label class="btn btn-outline-primary"> مباشرة داخل مجموعة .btn-group.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.