إطار Bootstrap 5

فئات المسافات

13 دقيقة الدرس 15 من 40

فهم فئات المسافات في Bootstrap

يوفر Bootstrap فئات قوية للمسافات للتحكم في الهوامش والحشوات. تتبع هذه الفئات نمط تسمية متسق وتسهل إنشاء تخطيطات متباعدة بشكل جيد دون كتابة CSS مخصص.

تدوين المسافات

تستخدم فئات المسافات في Bootstrap تنسيقاً بسيطاً: {property}{sides}-{size}

تفصيل التنسيق:
  • property: m (margin/هامش) أو p (padding/حشوة)
  • sides: t (أعلى)، b (أسفل)، s (بداية/يسار)، e (نهاية/يمين)، x (يسار+يمين)، y (أعلى+أسفل)، أو فارغ (جميع الجوانب)
  • size: 0، 1، 2، 3، 4، 5، أو auto

فئات الهوامش

أضف هوامش للعناصر باستخدام فئات m-*:

<!-- هامش على جميع الجوانب --> <div class="m-0">بدون هامش</div> <div class="m-1">هامش صغير (0.25rem)</div> <div class="m-2">هامش متوسط (0.5rem)</div> <div class="m-3">هامش عادي (1rem)</div> <div class="m-4">هامش كبير (1.5rem)</div> <div class="m-5">هامش كبير جداً (3rem)</div> <!-- هامش علوي --> <div class="mt-3">هامش علوي</div> <!-- هامش سفلي --> <div class="mb-3">هامش سفلي</div> <!-- هامش يساري (بداية) --> <div class="ms-3">هامش بداية (يسار في LTR)</div> <!-- هامش يميني (نهاية) --> <div class="me-3">هامش نهاية (يمين في LTR)</div> <!-- هامش أفقي (يسار + يمين) --> <div class="mx-3">هامش أفقي</div> <!-- هامش عمودي (أعلى + أسفل) --> <div class="my-3">هامش عمودي</div>

فئات الحشوات

أضف حشوات للعناصر باستخدام فئات p-*:

<!-- حشوة على جميع الجوانب --> <div class="p-0">بدون حشوة</div> <div class="p-1">حشوة صغيرة (0.25rem)</div> <div class="p-2">حشوة متوسطة (0.5rem)</div> <div class="p-3">حشوة عادية (1rem)</div> <div class="p-4">حشوة كبيرة (1.5rem)</div> <div class="p-5">حشوة كبيرة جداً (3rem)</div> <!-- حشوة علوية --> <div class="pt-3">حشوة علوية</div> <!-- حشوة سفلية --> <div class="pb-3">حشوة سفلية</div> <!-- حشوة يسارية (بداية) --> <div class="ps-3">حشوة بداية (يسار في LTR)</div> <!-- حشوة يمينية (نهاية) --> <div class="pe-3">حشوة نهاية (يمين في LTR)</div> <!-- حشوة أفقية (يسار + يمين) --> <div class="px-3">حشوة أفقية</div> <!-- حشوة عمودية (أعلى + أسفل) --> <div class="py-3">حشوة عمودية</div>
نصيحة: استخدم px و py لإضافة مسافات أفقية أو عمودية متماثلة بسرعة دون استهداف الجوانب الفردية.

مقياس المسافات

يوفر مقياس المسافات في Bootstrap زيادات متسقة:

<!-- تمثيل بصري لمقياس المسافات --> <div class="border p-1 mb-2">p-1 = 0.25rem = 4px</div> <div class="border p-2 mb-2">p-2 = 0.5rem = 8px</div> <div class="border p-3 mb-2">p-3 = 1rem = 16px</div> <div class="border p-4 mb-2">p-4 = 1.5rem = 24px</div> <div class="border p-5 mb-2">p-5 = 3rem = 48px</div>
الفئة القيمة (rem) القيمة (px عند 16px) حالة الاستخدام
*-0 0 0px إزالة المسافات
*-1 0.25rem 4px مسافة صغيرة جداً، تعديلات دقيقة
*-2 0.5rem 8px مسافة صغيرة، تخطيطات مضغوطة
*-3 1rem 16px مسافة افتراضية، الأكثر شيوعاً
*-4 1.5rem 24px مسافة أكبر، حشوة الأقسام
*-5 3rem 48px مسافة كبيرة جداً، أقسام رئيسية

هامش تلقائي للتوسيط

استخدم auto مع فئات الهوامش لتوسيط العناصر أو دفعها إلى جانب واحد:

<!-- توسيط عنصر كتلة --> <div class="mx-auto" style="width: 200px;"> عنصر موسط </div> <!-- دفع العنصر إلى اليمين --> <div class="ms-auto" style="width: 200px;"> مدفوع إلى اليمين </div> <!-- دفع العنصر إلى اليسار --> <div class="me-auto" style="width: 200px;"> مدفوع إلى اليسار </div> <!-- Flexbox: دفع العنصر إلى النهاية --> <div class="d-flex"> <div>عنصر يسار</div> <div class="ms-auto">عنصر يمين</div> </div>

الهوامش السالبة

يوفر Bootstrap فئات هوامش سالبة لتداخل العناصر أو جذب المحتوى أقرب:

<!-- هامش علوي سالب --> <div class="mt-n3">هامش علوي سالب</div> <!-- هامش سفلي سالب --> <div class="mb-n3">هامش سفلي سالب</div> <!-- هامش بداية سالب --> <div class="ms-n3">هامش بداية سالب</div> <!-- هامش نهاية سالب --> <div class="me-n3">هامش نهاية سالب</div> <!-- مثال: بطاقات متداخلة --> <div class="card"> <img src="image.jpg" class="card-img-top" alt="..."> <div class="card-body mt-n5"> <div class="bg-white shadow rounded p-3"> <h5>محتوى متداخل</h5> </div> </div> </div>
تحذير: يمكن أن تتسبب الهوامش السالبة في تداخل المحتوى أو تمديده خارج حدود الحاوية. استخدمها بحذر واختبرها على أحجام شاشة مختلفة.

المسافات المتجاوبة

طبق المسافات عند نقاط توقف محددة باستخدام متغيرات متجاوبة:

<!-- الهامش يتغير مع نقطة التوقف --> <div class="m-1 m-sm-2 m-md-3 m-lg-4 m-xl-5"> هامش متجاوب </div> <!-- حشوة على الشاشات الكبيرة وما فوق --> <div class="p-0 p-lg-4"> بدون حشوة على الشاشات الصغيرة، حشوة على الشاشات الكبيرة </div> <!-- هوامش علوية مختلفة لكل نقطة توقف --> <div class="mt-2 mt-md-4 mt-lg-5"> هامش متزايد مع نمو الشاشة </div> <!-- توسيط على الشاشات المتوسطة وما فوق --> <div class="mx-0 mx-md-auto" style="width: 300px;"> موسط على الشاشات المتوسطة وما فوق </div>
نقاط التوقف المتجاوبة:
  • -sm = 576px وما فوق
  • -md = 768px وما فوق
  • -lg = 992px وما فوق
  • -xl = 1200px وما فوق
  • -xxl = 1400px وما فوق

دمج فئات المسافات

جمّع فئات مسافات متعددة لتحكم دقيق:

<!-- مسافات مختلفة على كل جانب --> <div class="mt-3 mb-4 ms-2 me-5"> مسافات مخصصة على كل جانب </div> <!-- حشوة وهامش مجتمعين --> <div class="p-4 m-3"> حشوة داخلية، هامش خارجي </div> <!-- إعادة تعيين ثم تخصيص --> <div class="m-0 mt-3"> بدون هامش إلا العلوي </div> <!-- مسافات متجاوبة معقدة --> <div class="p-2 p-md-3 p-lg-4 m-1 m-md-2 m-lg-3"> حشوة وهامش متجاوبين </div>

مثال عملي: تخطيط بطاقة مع مسافات

أنشئ تخطيط بطاقة متباعد جيداً باستخدام فئات المسافات:

<div class="container py-5"> <div class="row g-4"> <div class="col-md-6 col-lg-4"> <div class="card h-100 shadow-sm"> <img src="product1.jpg" class="card-img-top" alt="منتج"> <div class="card-body p-4"> <h5 class="card-title mb-3">اسم المنتج</h5> <p class="card-text text-muted mb-4"> وصف المنتج يأتي هنا مع مسافات مناسبة. </p> <div class="d-flex justify-content-between align-items-center"> <span class="h4 mb-0">29.99$</span> <button class="btn btn-primary">أضف إلى السلة</button> </div> </div> <div class="card-footer bg-transparent border-0 pt-0 px-4 pb-4"> <small class="text-muted">شحن مجاني للطلبات فوق 50$</small> </div> </div> </div> <!-- المزيد من البطاقات... --> </div> </div>

المسافات في تخطيطات Flexbox

اجمع فئات المسافات مع flexbox لتخطيطات قوية:

<!-- قائمة تنقل مع هوامش تلقائية --> <nav class="d-flex align-items-center p-3 bg-light"> <div class="fw-bold">الشعار</div> <div class="ms-auto d-flex gap-3"> <a href="#" class="text-decoration-none">الرئيسية</a> <a href="#" class="text-decoration-none">من نحن</a> <a href="#" class="text-decoration-none">اتصل بنا</a> </div> </nav> <!-- عناصر متباعدة عمودياً --> <div class="d-flex flex-column"> <div class="mb-3">عنصر 1</div> <div class="mb-3">عنصر 2</div> <div class="mb-3">عنصر 3</div> <div class="mt-auto">آخر عنصر مدفوع للأسفل</div> </div>
نصيحة: فئات gap-* (gap-1 حتى gap-5) توفر مسافات بين عناصر flex أو grid دون الحاجة إلى هامش على كل عنصر فرعي.

أنماط المسافات الشائعة

إليك بعض أنماط المسافات المستخدمة بشكل متكرر:

<!-- مسافات القسم --> <section class="py-5"> <div class="container"> <h2 class="mb-4">عنوان القسم</h2> <p class="mb-3">المحتوى...</p> </div> </section> <!-- مسافات مجموعة النموذج --> <div class="mb-3"> <label class="form-label">البريد الإلكتروني</label> <input type="email" class="form-control"> </div> <!-- مجموعة الأزرار --> <div class="d-flex gap-2"> <button class="btn btn-primary">حفظ</button> <button class="btn btn-secondary">إلغاء</button> </div> <!-- مسافات البطاقة --> <div class="card"> <div class="card-body p-4"> <h5 class="card-title mb-3">العنوان</h5> <p class="card-text mb-0">المحتوى</p> </div> </div>

تمرين: بناء صفحة تسعير

أنشئ صفحة تسعير توضح إتقان فئات المسافات:

  1. أنشئ قسم بطل مع حشوة عمودية (py-5)
  2. أضف ثلاث بطاقات تسعير في صف مع فجوات (g-4)
  3. استخدم حشوة جسم البطاقة (p-4) ومسافات مناسبة بين العناصر
  4. أضف مسافات بين السعر والميزات (my-4)
  5. أنشئ تذييلاً مع حشوة ومحتوى موسط (mx-auto)
  6. اجعل المسافات متجاوبة (أصغر على الجوال، أكبر على سطح المكتب)

تحدي إضافي: أضف بطاقة تسعير مميزة تستخدم هوامش سالبة (mt-n3) لتتداخل قليلاً مع القسم أعلاه.

الملخص

  • فئات المسافات تتبع التنسيق: {property}{sides}-{size}
  • استخدم m-* للهوامش و p-* للحشوات
  • استهدف جوانب محددة: t (أعلى)، b (أسفل)، s (بداية)، e (نهاية)، x (أفقي)، y (عمودي)
  • مقياس المسافات يتراوح من 0 إلى 5 (0، 0.25rem، 0.5rem، 1rem، 1.5rem، 3rem)
  • استخدم هوامش auto للتوسيط ومحاذاة flexbox
  • الهوامش السالبة (mt-n*، mb-n*، إلخ) تنشئ تداخلات
  • المسافات المتجاوبة تطبق مسافات مختلفة عند نقاط التوقف
  • اجمع فئات مسافات متعددة لتحكم دقيق
  • فئات Gap توفر مسافات نظيفة في تخطيطات flex و grid
الدرس السابق نظام الألوان في Bootstrap
الدرس التالي الحدود والظلال
العودة للدورة