المتغيرات المحلية للمكونات | متغيرات CSS في بوتستراب 5

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

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

تتجلى القوة الحقيقية لمتغيرات بوتستراب 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؛ مما يمكّنك من تصميم فئة زر جديدة بالكامل بتعيين أربعة متغيرات فقط!

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

HTML

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

جرّب بنفسك

الصف 3 معاينة حية

Component CSS Variables المتغيرات المحلية للمكونات

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

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