شرح صفوف ومحتوى الفقرة
لالتزام أرقى معايير نظافة الكود عند تخصيص متغيرات CSS، اتبع القواعد الهندسية الثلاث التالية: أولاً أنشئ كلاساً دلالياً مخصصاً مثل .card-featured أو .btn-brand وأسند المتغيرات بداخله بدلاً من تشويه الكلاس العام .card في كل مكان؛ وثانياً تخلّص تماماً من عادة كتابة !important لأن إسناد المتغير المحلي يكسب تلقائياً؛ وثالثاً راعِ قيم الوضع الداكن عند تخصيص الألوان الثابتة:
<style>
.card-featured {
--bs-card-border-color: #6f42c1;
--bs-card-border-width: 2px;
--bs-card-border-radius: 1rem;
}
</style>
<div class="card card-featured p-3">Clean Scoped Card</div>يلخص الجدول المرجعي التالي أهم فئات متغيرات CSS الحية في بوتستراب 5.3:
| مستوى المتغير | أمثلة قياسية | الاستخدام الأمثل |
|---|---|---|
متغيرات الجذر العامة :root | --bs-body-font-family, --bs-border-radius | توحيد الخط الأساسي ونصف قطر الزوايا العام |
الألوان المزدوجة مع -rgb | --bs-primary + --bs-primary-rgb | تغيير لون الهوية مع بقاء كلاسات الشفافية فعالة |
متغيرات الأزرار .btn | --bs-btn-bg, --bs-btn-hover-bg | ابتكار أزرار مخصصة دون استهداف حالات التمرير يدوياً |
| متغيرات البطاقات والجداول | --bs-card-border-radius, --bs-table-striped-bg | تخصيص الحشو والحدود وتظليل الجداول بدون !important |
| متغيرات التخطيط والشبكة | --bs-columns, --bs-gap, --bs-gutter-x | بناء شبكات بعدد أعمدة وفجوات مخصصة |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: تعلّمت في هذا الدرس تخصيص بوتستراب 5.3 مباشرة في وقت التشغيل عبر متغيرات CSS الجذرية والمحلية، وفهمت ضرورة تحديث متغيرات -rgb الموازية، وتخصيص الأزرار والبطاقات وشبكة CSS Grid بنظافة تامة دون !important.
الخطوة التالية والدرس القادم
انتقل الآن إلى درس «تخصيص Sass والخيارات في بوتستراب 5» لإتقان التخصيص الجذري وقت البناء وترتيب استيراد الملفات وتوسيع خرائط الألوان.