انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #6 من درس: أدوات التباعد والهوامش في بوتستراب 5

Responsive Spacing Tiers التباعد المتجاوب عبر الشاشات

أتقن أدوات التباعد والهوامش والحشو في بوتستراب 5 عبر معادلة التسمية الموحدة، ومقياس المسافات القياسي من 0 إلى 5، والكلاسات المنطقية الداعمة للعربية، والتوسيط الأفقي وفواصل gap.
2 صفوف تعليمية
بوتستراب 5
1 مشاهدة

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

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

المسافة الرحبة التي تبدو أنيقة على شاشة الحاسوب مثل .p-5 (48px من كل جهة) قد تلتهم نصف عرض شاشة الهاتف الصغير وتضغط النص في عمود ضيق! وهنا تتجلى مرونة نقاط التوقف المدمجة في جميع كلاسات التباعد.

اكتب القيمة المدمجة للهاتف أولاً بدون لاحقة مثل p-3 mb-3، ثم أضف القيمة الأوسع للأجهزة اللوحية والحواسيب مثل p-md-4 p-lg-5 mb-lg-5 ليتنفس التصميم تلقائياً كلما اتسعت الشاشة.

الصف 2 كود برمجي
HTML 
<div class="col-11 col-md-8 mx-auto
  p-3 p-md-4 p-lg-5 text-bg-dark rounded">
  <h2 class="h4 mb-2">Adaptive Hero Box</h2>
  <p class="mb-0">Compact mobile, wide desktop.</p>
</div>
جرّب بنفسك

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