متغيرات الجذر وقنوات RGB | متغيرات CSS في بوتستراب 5

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

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

عند فحص المحدد الجذري :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 باللون القديم!

الصف 2 كود برمجي

HTML

<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>

جرّب بنفسك

الصف 3 ملاحظة هامة

Root Variables RGB Values متغيرات الجذر وقنوات RGB

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

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