الفرق بين المراجعتين لصفحة: «Bootstrap/spacing»
لا ملخص تعديل |
|||
| سطر 8: | سطر 8: | ||
لا توجد اختصارات للنقاط الحديّة في أسماء الأصناف التي تنطبق على جميع النقاط الحديّة من الصغيرة جدًّا (<code>xs</code>) إلى العريضة جدًّا (<code>xl</code>). يعود السبب في ذلك إلى أنّ هذه الأصناف تُطبَّق من القيمة <code>min-width: 0</code> فأعلى، وبالتالي لا ترتبط باستعلام وسيط محدَّد. تتضمَّن بقيّة الأصناف اختصارات للنقاط الحديّة. | لا توجد اختصارات للنقاط الحديّة في أسماء الأصناف التي تنطبق على جميع النقاط الحديّة من الصغيرة جدًّا (<code>xs</code>) إلى العريضة جدًّا (<code>xl</code>). يعود السبب في ذلك إلى أنّ هذه الأصناف تُطبَّق من القيمة <code>min-width: 0</code> فأعلى، وبالتالي لا ترتبط باستعلام وسيط محدَّد. تتضمَّن بقيّة الأصناف اختصارات للنقاط الحديّة. | ||
تتبع أسماء الأصناف الصيغة <code>{property}{sides}-{size}</code> بالنسبة للنقطة الحديّة <code>xs</code> و<code>{property}{sides}-{breakpoint}-{size}</code> بالنسبة للنقاط الحديّة <code>sm</code>، و<code>md</code>، و<code>lg</code> و<code>xl</code>؛ حيثُ ''property'' تأخذ إحدى القيمتيْن: | تتبع أسماء الأصناف الصيغة <code>{property}{sides}-{size}</code> بالنسبة للنقطة الحديّة <code>xs</code> و<code>{property}{sides}-{breakpoint}-{size}</code> بالنسبة للنقاط الحديّة <code>sm</code>، و<code>md</code>، و<code>lg</code> و<code>xl</code>؛ حيثُ ''property'' تأخذ إحدى القيمتيْن: | ||
* <code>m</code>: للأصناف التي تعيِّن الهامش (<code>margin</code>)، | * <code>m</code>: للأصناف التي تعيِّن الهامش (<code>margin</code>)، | ||
* <code>p</code>: للأصناف التي تعيِّن الحاشيّة (<code>padding</code>). | * <code>p</code>: للأصناف التي تعيِّن الحاشيّة (<code>padding</code>). | ||
| سطر 60: | سطر 60: | ||
== مصادر == | == مصادر == | ||
[https://getbootstrap.com/docs/4.0/utilities/spacing صفحة Spacing في توثيق Bootstrap]. | [https://getbootstrap.com/docs/4.0/utilities/spacing صفحة Spacing في توثيق Bootstrap]. | ||
[[تصنيف:Bootstrap]][[تصنيف:Bootstrap utilities]] | [[تصنيف:Bootstrap]] | ||
[[تصنيف:Bootstrap utilities]] | |||
مراجعة 13:53، 14 أبريل 2018
يحتوي إطار العمل Bootstrap على طيفٍ واسع من الأصناف الخدميّة المتجاوبة للتعديل على مظهر العنصُر.
آليّة العمل
تُستخدَم الأصناف المختصرة لتعديل التباعد التي يقدّمها Bootstrap لتعيين هوامش أو حاشيّات متجاوبة على عنصُر؛ أو على بعضٍ من جوانبه. تتضمَّن الأصناف دعمَ خاصيّات منفردة، أو جميع الخاصيّات، أو الخاصيّات الأفقيّة أو الخاصيّات العموديّة. تُبنَى الأصناف على جدول Sass المبدئيّ وتمتدّ من .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>