أدوات التباعد Spacing في إطار العمل Bootstrap
يحتوي إطار العمل 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 تأخذ إحدى القيمتيْن:
و 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>