بادئة الإطار ومتغيرات الشبكة | متغيرات CSS في بوتستراب 5

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

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

لماذا تبدأ جميع متغيرات بوتستراب بالبادئة --bs-؟ في المشاريع الحقيقية غالباً ما تجتمع عدة مكتبات للرسوم البيانية ومحررات النصوص في نفس الصفحة؛ ولو سمّى بوتستراب متغيره --primary لتصادم فوراً مع متغيرات مشروعك أو الإضافات الأخرى! وتُشتق هذه البادئة من متغير Sass المركزي $prefix: bs-.

كما تتحكم متغيرات CSS مباشرة في تخطيطات الشبكة الحديثة؛ فمع كلاس .grid يمكنك تغيير عدد الأعمدة الافتراضي من 12 إلى 3 أو 4 عبر --bs-columns، وضبط المسافات عبر --bs-gap، وتتحكم فواصل الشبكة التقليدية .row عبر --bs-gutter-x و--bs-gutter-y.

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

HTML

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

جرّب بنفسك

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

Grid and Prefix Variables بادئة الإطار ومتغيرات الشبكة

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

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