Bootstrap/spacing

يحتوي إطار العمل Bootstrap على طيفٍ واسع من الأصناف الخدميّة المتجاوبة للتعديل على مظهر العنصُر.

آليّة العمل

تُستخدَم الأصناف المختصرة لتعديل التباعد التي يقدّمها Bootstrap لتعيين هوامش أو حاشيّات متجاوبة على عنصُر؛ أو على بعضٍ من جوانبه. تتضمَّن الأصناف دعمَ خاصيّات منفردة، أو جميع الخاصيّات، أو الخاصيّات الأفقيّة أو الخاصيّات العموديّة. تُبنَى الأصناف على جدول Sass ‏(Sass map) المبدئيّ وتمتدّ من ‎.25rem إلى 3rem.

تسميّة الأصناف

لا توجد اختصارات للنقاط الحديّة في أسماء الأصناف التي تنطبق على جميع النقاط الحديّة من الصغيرة جدًّا (xs) إلى العريضة جدًّا (xl). يعود السبب في ذلك إلى أنّ هذه الأصناف تُطبَّق من القيمة min-width: 0 فأعلى، وبالتالي لا ترتبط باستعلام وسيط محدَّد. تتضمَّن بقيّة الأصناف اختصارات للنقاط الحديّة.

تتبع أسماء الأصناف الصيغة ‎{property}{sides}-{size}‎ بالنسبة للنقطة الحديّة xs و‎{property}{sides}-{breakpoint}-{size}‎ بالنسبة للنقاط الحديّة sm، وmd، وlg وxl؛ حيثُ property تأخذ إحدى القيمتيْن:

• m: للأصناف التي تعيِّن الهامش (margin)،
• p: للأصناف التي تعيِّن الحاشيّة (padding).

و sides واحدة من القيم التاليّة:

• t: للأصناف التي تعيِّن إحدى الخاصيّتيْن margin-top أو padding-top،
• b: للأصناف التي تعيِّن margin-bottom أو padding-bottom،
• l: للأصناف التي تعيِّن margin-left أو padding-left،
• r: للأصناف التي تعيِّن margin-right أو padding-right،
• x: للأصناف التي تعيِّن ‎*‎-left أو ‎*-right،
• y: للأصناف التي تعيِّن ‎*-top أو ‎*-bottom،
• فراغ للأصناف التي تعيِّن حاشيّة أو هامشًا على الجوانب الأربعة للعنصُر.

أما size فتأخذ واحدةً من القيّم التاليّة:

• 0: للأصناف التي تحذف الحاشيّة أو الهامش بإسناد القيمة 0 لها،
• 1: (مبدئيًّا) للأصناف التي تعيِّن الحاشيّة أو الهامش إلى ‎$spacer * .25،
• 2: (مبدئيًّا) للأصناف التي تعيِّن الحاشيّة أو الهامش إلى ‎$spacer * .5،
• 3: (مبدئيًّا) للأصناف التي تعيِّن الحاشيّة أو الهامش إلى ‎$spacer،
• 4: (مبدئيًّا) للأصناف التي تعيِّن الحاشيّة أو الهامش إلى ‎$spacer * 1.5،
• 5: (مبدئيًّا) للأصناف التي تعيِّن الحاشيّة أو الهامش إلى ‎$spacer * 3،
• auto: للأصناف التي تعيِّن الحاشيّة إلى القيمة auto.

(بالإمكان إضافة قياسات أخرى بإضافة مُدخَلات إلى جدول Sass ‏‎$spacer.

أمثلة

في ما يلي أمثلة توضيحيّة للأصناف السابقة:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

التوسيط الأفقي

يوفّر Bootstrap - علاوة على الأصناف المذكورة أعلاه - الصنفَ ‎.mx-auto لتوسيط المحتوى في العناصر الكتليّة مثبَّتة العرض؛ أي المحتوى ذي القيمة display: block وعرض (width) مُعيَّن. يعمل الصنف ‎.mx-auto على إسناد القيمة auto إلى الهوامش الأفقيّة.

<div class="mx-auto" style="width: 200px;">
  عنصُر مُوسَّط
</div>

الهامش السالب

تسمح CSS بإعطاء خاصية الهامش margin قيمة سالبة (على خلاف padding). ابتداء من الإصدار 4.2، أصبح bootstrap يسمح باعطاء الهوامش قيمة عددية صحيحة سالبة لكل الأعداد التي ذكرناها آنفا (مثل: 1 - 2 - 3 - 4 - 5). هذه الخاصية مفيدة لتخصيص الهوامش بين شبكات الأعمدة في كل النقاط الحدية.

لا تختلف الصياغة كثيرا عن صياغة الهوامش الموجبة، باستثناء أنّ عليك إضافة n قبل الحجم. هذا مثال على صنف مقابل لـ ‎.mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

مصادر

• صفحة Spacing في توثيق Bootstrap.