في هذا الدرس 5تصفّح المواضيع
في الماضي كان تغيير لون زر أو تعديل نصف قطر زوايا بطاقة في بوتستراب يضعك أمام خيارين كلاهما مرهق: إما تثبيت بيئة بناء Sass وإعادة ترجمة الحزمة كلها، وإما كتابة محددات CSS معقدة مثقلة بكلمة !important. حلّ بوتستراب 5.2 و5.3 هذه المعضلة بتحويل معظم قيم الإطار ومكوناته إلى متغيرات CSS قياسية CSS Custom Properties تفهمها المتصفحات مباشرة في وقت التشغيل.
بفضل هذه الهندسة الحديثة يمكنك تحميل ملف bootstrap.min.css الجاهز كما هو، ثم إضافة بضعة أسطر نظيفة تغير متغيرات --bs-* على الصفحة أو على قسم بعينه أو حتى ديناميكياً بجافاسكريبت دون أي خطوة ترجمة مسبقة!
عند فحص المحدد الجذري :root في ملف بوتستراب 5.3 ستجد عشرات المتغيرات العامة التي تضبط الخطوط مثل --bs-body-font-family، وأحجام الحواف مثل --bs-border-radius، ولوحة الألوان كاملة.
وستلاحظ تفصيلاً هندسياً بالغ الأهمية: لكل لون دلالي متغيران متلازمان؛ الأول بالصيغة السداسية مثل --bs-primary: #0d6efd، والثاني بثلاثية أرقام مفصولة بفواصل --bs-primary-rgb: 13, 110, 253. يعتمد بوتستراب على صيغة *-rgb داخل دوال مثل rgba(var(--bs-primary-rgb), var(--bs-bg-opacity))، فإذا غيرت لون الهوية في CSS دون تحديث متغير -rgb الموازي له فستظل كلاسات .bg-primary و.text-primary باللون القديم!
<style>
.brand-scope {
--bs-primary: #6f42c1;
--bs-primary-rgb: 111, 66, 193;
}
</style>
<div class="brand-scope p-3 bg-primary bg-opacity-10">
<span class="text-primary fw-bold">Royal Brand</span>
</div>تتجلى القوة الحقيقية لمتغيرات بوتستراب 5.3 على مستوى المكونات نفسها؛ فكل مكوّن رئيسي كالأزرار .btn والبطاقات .card والجداول .table والتنبيهات .alert وشرائط التنقل .navbar يعلن في بدايته قائمة واضحة بمتغيراته المحلية.
فعلى سبيل المثال يقرأ الزر جميع حالاته من متغيرات مثل --bs-btn-color و--bs-btn-bg و--bs-btn-hover-bg و--bs-btn-border-radius، وتقرأ البطاقة حشوها وزواياها من --bs-card-spacer-y و--bs-card-border-radius؛ مما يمكّنك من تصميم فئة زر جديدة بالكامل بتعيين أربعة متغيرات فقط!
<style>
.btn-plum {
--bs-btn-color: #fff;
--bs-btn-bg: #6f42c1;
--bs-btn-hover-bg: #59339d;
--bs-btn-border-radius: 999px;
}
</style>
<button type="button" class="btn btn-plum">Run</button>لماذا تبدأ جميع متغيرات بوتستراب بالبادئة --bs-؟ في المشاريع الحقيقية غالباً ما تجتمع عدة مكتبات للرسوم البيانية ومحررات النصوص في نفس الصفحة؛ ولو سمّى بوتستراب متغيره --primary لتصادم فوراً مع متغيرات مشروعك أو الإضافات الأخرى! وتُشتق هذه البادئة من متغير Sass المركزي $prefix: bs-.
كما تتحكم متغيرات CSS مباشرة في تخطيطات الشبكة الحديثة؛ فمع كلاس .grid يمكنك تغيير عدد الأعمدة الافتراضي من 12 إلى 3 أو 4 عبر --bs-columns، وضبط المسافات عبر --bs-gap، وتتحكم فواصل الشبكة التقليدية .row عبر --bs-gutter-x و--bs-gutter-y.
<style>
.kpi-grid { --bs-columns: 3; --bs-gap: 0.75rem; }
</style>
<div class="grid kpi-grid">
<div class="p-2 border rounded">KPI 1</div>
<div class="p-2 border rounded">KPI 2</div>
<div class="p-2 border rounded">KPI 3</div>
</div>لالتزام أرقى معايير نظافة الكود عند تخصيص متغيرات 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» لإتقان التخصيص الجذري وقت البناء وترتيب استيراد الملفات وتوسيع خرائط الألوان.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS Custom Property متغير CSS القياسي الحي
- متغير قياسي يبدأ بـ --bs- ويبقى حياً في المتصفح ليقبل التعديل الفوري حسب النطاق أو الثيم.
- للمراجعة
- 02 RGB Channel Variable متغير قنوات RGB الثلاثية
- المتغير الرقمي الموازي للون والمكتوب بثلاثة أرقام مفصولة بفواصل لتمكين كلاسات الشفافية من العمل.
- للمراجعة
- 03 Component-Scoped Variable المتغير المحلي للمكوّن
- متغير يُعرّف على الكلاس الأساسي للمكوّن كالزر أو البطاقة لتخصيص مظهره محلياً دون تعارض أولويات.
- للمراجعة
- 04 Variable Prefix البادئة المانعة للتعارض
- البادئة الثابتة bs- التي تسبق متغيرات بوتستراب لمنع تصادم أسمائها مع متغيرات المشروع أو المكتبات الأخرى.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 RGB RGB
- Red Green Blue Channels
- الصيغة الرقمية الثلاثية المخزنة في متغيرات -rgb لتركيب درجات الشفافية ديناميكياً.
- للمراجعة
- 02 DOM DOM
- Document Object Model
- الشجرة الهيكلية للعناصر التي تتورث عبرها متغيرات CSS من الأب إلى الأبناء تلقائياً.
- للمراجعة
- 03 W3C W3C
- World Wide Web Consortium
- الهيئة القياسية واضعة مواصفة متغيرات CSS المتتالية في المتصفحات الحديثة.
- للمراجعة
- 04 KPI KPI
- Key Performance Indicator
- بطاقات الإحصاءات في لوحات التحكم التي تُرتب بمرونة عبر متغير الأعمدة --bs-columns.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
اكتب كلاس .btn-royal يضبط متغيرات اللون والخلفية والحدود وحالة التمرير واستدارة 999px، وطبقه مع الكلاس الأساسي btn على عنصر زر.
-
عرّف كلاساً يضبط --bs-columns: 3 و--bs-gap: 1rem وطبقه على حاوية <div class="grid"> تضم ثلاث بطاقات متجاورة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
عند تعديل قيمة --bs-primary في CSS فقط، أي متغير مرافق يجب تحديثه أيضاً لكي يتغير لون .bg-primary و.text-primary؟
تعتمد كلاسات الخلفية والنص على قنوات الشفافية في --bs-primary-rgb؛ لذا يلزم تحديثه بجانب المتغير السداسي.
ما الصيغة الصحيحة لقيمة الأرقام المخزنة داخل متغيرات --bs-*-rgb في بوتستراب؟
تُكتب كثلاثة أرقام مفصولة بفواصل فقط (مثل 111, 66, 193) دون كلمة rgb() ليسهل دمج الشفافية معها.
هل يسمح معيار CSS باستخدام دالة var(--bs-breakpoint-md) مباشرة داخل شرط @media (min-width: ...)؟
خطأ؛ لا تدعم مواصفة CSS استخدام دوال var() داخل شروط استعلامات الوسائط @media.
لماذا تبدأ جميع متغيرات CSS في بوتستراب بالبادئة --bs-؟
لفصل نطاق أسماء متغيرات الإطار ومنع تصادمها مع متغيرات مشروعك أو الإضافات الخارجية.
أي متغير CSS يغيّر عدد أعمدة حاوية .grid في بوتستراب من 12 عموداً إلى 4 أعمدة؟
تعديل المتغير --bs-columns: 4 على عنصر .grid يحدّث قالب الأعمدة فوراً.
هل يُعد تخصيص المتغير المحلي --bs-btn-bg أنظف هندسياً من فرض اللون بقاعدة !important؟
صحيح؛ يحافظ إسناد المتغيرات المحلية على سلامة حالات التمرير والتعطيل دون كسر أولويات CSS.
أين تُعلن المتغيرات المحلية للمكونات مثل --bs-card-border-radius في بوتستراب 5.3؟
تُعرّف مباشرة داخل الكلاس الأساسي للمكوّن نفسه مثل .card أو .btn أو .table.
هل يتطلب تعديل متغيرات CSS الحية (--bs-*) تشغيل مترجم Sass في كل مرة تختبرها في المتصفح؟
خطأ؛ يفهم المتصفح متغيرات CSS القياسية ويطبق تعديلاتها لحظياً دون الحاجة لأي مترجم Sass.