شرح صفوف ومحتوى الفقرة
عند ترتيب عدة عناصر داخل حاوية شبكية حديثة مثل .grid، بدلاً من إعطاء هامش سفلي وجانبي لكل عنصر فرعي ثم معالجة زيادة الهامش على العنصر الأخير، يوفر بوتستراب 5 كلاسات الفجوات المباشرة .gap-0 حتى .gap-5 على الحاوية الأب نفسها.
وإذا رغبت في فصل المسافة الرأسية بين الصفوف عن المسافة الأفقية بين الأعمدة، استخدم .row-gap-0..5 و.column-gap-0..5 بنسخها المتجاوبة:
<div class="grid row-gap-2 column-gap-4">
<div class="g-col-6 p-2 text-bg-primary">Item A</div>
<div class="g-col-6 p-2 text-bg-primary">Item B</div>
<div class="g-col-6 p-2 text-bg-dark">Item C</div>
<div class="g-col-6 p-2 text-bg-dark">Item D</div>
</div>يجمع الجدول المرجعي التالي رموز صيغة التباعد وسلم القياسات المعتمدة في بوتستراب 5.3:
| الرمز أو المقياس | المعنى والقيمة المحسوبة | مثال تطبيقي |
|---|---|---|
m / p | الهامش الخارجي margin / الحشو الداخلي padding | .m-0, .p-3 |
t / b / s / e | أعلى، أسفل، بداية منطقية، نهاية منطقية | .mt-2, .mb-4, .ms-3, .pe-2 |
x / y | المحور الأفقي معاً / المحور الرأسي معاً | .px-3, .py-2, .mx-auto |
المقياس 0 .. 5 | 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem | .p-2 p-md-4 p-lg-5 |
.gap-* / .row-gap-* / .column-gap-* | فجوات داخلية بين عناصر الشبكة والصندوق المرن | .grid .gap-3 |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس معادلة تسمية كلاسات الهوامش والحشو، وسلم القياسات الستة المبني على وحدة rem، واستخدام الاتجاهات المنطقية ms وme وps وpe لدعم العربية تلقائياً، والتوسيط الأفقي عبر mx-auto والتباعد المتجاوب وفواصل gap.
الخطوة التالية والدرس القادم
انتقل الآن إلى درس «الحدود والأبعاد والظلال في بوتستراب 5» لتشكيل العناصر بالإطارات الملونة واستدارة الحواف ونسب العرض والارتفاع ودرجات الظلال.