انتقل إلى محتوى الدرس

Inline and Reverse Checks العرض الأفقي والمحاذاة العكسية

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

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

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

تُرتب عناصر .form-check افتراضياً فوق بعضها البعض في أسطر مستقلة. لصفّ عدة خيارات قصيرة أفقياً على سطر واحد (مثل تقييمات سريعة أو أيام الأسبوع)، أضف الكلاس .form-check-inline إلى كل حاوية فرعية.

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

الصف 2 كود برمجي
HTML
<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>
الصف 3 ملاحظة هامة