الفرق بين المراجعتين لصفحة: «Bootstrap/spacing»
لا ملخص تعديل |
|||
| (مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
| سطر 3: | سطر 3: | ||
== آليّة العمل == | == آليّة العمل == | ||
تُستخدَم الأصناف المختصرة لتعديل التباعد التي يقدّمها Bootstrap لتعيين هوامش أو حاشيّات متجاوبة على عنصُر؛ أو على بعضٍ من جوانبه. تتضمَّن الأصناف دعمَ خاصيّات منفردة، أو جميع الخاصيّات، أو الخاصيّات الأفقيّة أو الخاصيّات العموديّة. تُبنَى الأصناف على جدول Sass المبدئيّ وتمتدّ من <code>.25rem</code> إلى <code>3rem</code>. | تُستخدَم الأصناف المختصرة لتعديل التباعد التي يقدّمها Bootstrap لتعيين هوامش أو حاشيّات متجاوبة على عنصُر؛ أو على بعضٍ من جوانبه. تتضمَّن الأصناف دعمَ خاصيّات منفردة، أو جميع الخاصيّات، أو الخاصيّات الأفقيّة أو الخاصيّات العموديّة. تُبنَى الأصناف على جدول Sass (Sass map) المبدئيّ وتمتدّ من <code>.25rem</code> إلى <code>3rem</code>. | ||
== تسميّة الأصناف == | == تسميّة الأصناف == | ||
لا توجد اختصارات للنقاط الحديّة في أسماء الأصناف التي تنطبق على جميع النقاط الحديّة من الصغيرة جدًّا (<code>xs</code>) إلى العريضة جدًّا (<code>xl</code>). يعود السبب في ذلك إلى أنّ هذه الأصناف تُطبَّق من القيمة <code>min-width: 0</code> فأعلى، وبالتالي لا ترتبط باستعلام وسيط محدَّد. تتضمَّن بقيّة الأصناف اختصارات للنقاط الحديّة. | لا توجد اختصارات للنقاط الحديّة في أسماء الأصناف التي تنطبق على جميع النقاط الحديّة من الصغيرة جدًّا (<code>xs</code>) إلى العريضة جدًّا (<code>xl</code>). يعود السبب في ذلك إلى أنّ هذه الأصناف تُطبَّق من القيمة <code>[[CSS/min-width|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>؛ حيثُ ''<code>property</code>'' تأخذ إحدى القيمتيْن: | ||
* <code>m</code>: للأصناف التي تعيِّن الهامش (<code>margin</code>)، | * <code>m</code>: للأصناف التي تعيِّن الهامش (<code>[[CSS/margin|margin]]</code>)، | ||
* <code>p</code>: للأصناف التي تعيِّن الحاشيّة (<code>padding</code>). | * <code>p</code>: للأصناف التي تعيِّن الحاشيّة (<code>[[CSS/padding|padding]]</code>). | ||
و ''sides'' واحدة من القيم التاليّة: | و ''<code>sides</code>'' واحدة من القيم التاليّة: | ||
* <code>t</code>: للأصناف التي تعيِّن إحدى الخاصيّتيْن <code>margin-top</code> أو <code>padding-top</code>، | * <code>t</code>: للأصناف التي تعيِّن إحدى الخاصيّتيْن <code>[[CSS/margin-top|margin-top]]</code> أو <code>[[CSS/padding-top|padding-top]]</code>، | ||
* <code>b</code>: للأصناف التي تعيِّن <code>margin-bottom</code> أو <code>padding-bottom</code>، | * <code>b</code>: للأصناف التي تعيِّن <code>[[CSS/margin-bottom|margin-bottom]]</code> أو <code>[[CSS/padding-bottom|padding-bottom]]</code>، | ||
* <code>l</code>: للأصناف التي تعيِّن <code>margin-left</code> أو <code>padding-left</code>، | * <code>l</code>: للأصناف التي تعيِّن <code>[[CSS/margin-left|margin-left]]</code> أو <code>[[CSS/padding-left|padding-left]]</code>، | ||
* <code>r</code>: للأصناف التي تعيِّن <code>margin-right</code> أو <code>padding-right</code>، | * <code>r</code>: للأصناف التي تعيِّن <code>[[CSS/margin-right|margin-right]]</code> أو <code>[[CSS/padding-right|padding-right]]</code>، | ||
* <code>x</code>: للأصناف التي تعيِّن <code>*-left</code> أو <code>*-right</code>، | * <code>x</code>: للأصناف التي تعيِّن <code>*-left</code> أو <code>*-right</code>، | ||
* <code>y</code>: للأصناف التي تعيِّن <code>*-top</code> أو <code>*-bottom</code>، | * <code>y</code>: للأصناف التي تعيِّن <code>*-top</code> أو <code>*-bottom</code>، | ||
* فراغ للأصناف التي تعيِّن حاشيّة أو هامشًا على الجوانب الأربعة للعنصُر. | * فراغ للأصناف التي تعيِّن حاشيّة أو هامشًا على الجوانب الأربعة للعنصُر. | ||
أما ''size'' فتأخذ واحدةً من القيّم التاليّة: | أما ''<code>size</code>'' فتأخذ واحدةً من القيّم التاليّة: | ||
* <code>0</code>: للأصناف التي تحذف الحاشيّة أو الهامش بإسناد القيمة <code>0</code> لها، | * <code>0</code>: للأصناف التي تحذف الحاشيّة أو الهامش بإسناد القيمة <code>0</code> لها، | ||
* <code>1</code>: (مبدئيًّا) للأصناف التي تعيِّن الحاشيّة أو الهامش إلى <code>$spacer * .25</code>، | * <code>1</code>: (مبدئيًّا) للأصناف التي تعيِّن الحاشيّة أو الهامش إلى <code>$spacer * .25</code>، | ||
| سطر 49: | سطر 49: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== التوسيط الأفقي === | |||
يوفّر Bootstrap - علاوة على الأصناف المذكورة أعلاه - الصنفَ <code>.mx-auto</code> لتوسيط المحتوى في العناصر الكتليّة مثبَّتة العرض؛ أي المحتوى ذي القيمة<code>display: block</code> وعرض (<code>width</code>) مُعيَّن. يعمل الصنف <code>.mx-auto</code> على إسناد القيمة <code>auto</code> إلى الهوامش الأفقيّة.<syntaxhighlight lang="html"> | يوفّر Bootstrap - علاوة على الأصناف المذكورة أعلاه - الصنفَ <code>.mx-auto</code> لتوسيط المحتوى في العناصر الكتليّة مثبَّتة العرض؛ أي المحتوى ذي القيمة <code>[[CSS/display|display]]: block</code> وعرض (<code>[[CSS/width|width]]</code>) مُعيَّن. يعمل الصنف <code>.mx-auto</code> على إسناد القيمة <code>auto</code> إلى الهوامش الأفقيّة.<syntaxhighlight lang="html"> | ||
<div class="mx-auto" style="width: 200px;"> | <div class="mx-auto" style="width: 200px;"> | ||
عنصُر مُوسَّط | عنصُر مُوسَّط | ||
| سطر 56: | سطر 56: | ||
</syntaxhighlight> | |||
== الهامش السالب == | |||
تسمح CSS بإعطاء خاصية الهامش <code>margin</code> قيمة سالبة (على خلاف <code>padding</code>). ابتداء من الإصدار 4.2، أصبح bootstrap يسمح باعطاء الهوامش قيمة عددية صحيحة سالبة لكل الأعداد التي ذكرناها آنفا (مثل: <code>1</code> - <code>2</code> - <code>3</code> - <code>4</code> - <code>5</code>). هذه الخاصية مفيدة لتخصيص الهوامش بين شبكات الأعمدة في كل النقاط الحدية. | |||
لا تختلف الصياغة كثيرا عن صياغة الهوامش الموجبة، باستثناء أنّ عليك إضافة <code>n</code> قبل الحجم. هذا مثال على صنف مقابل لـ <code>.mt-1</code>:<syntaxhighlight lang="css"> | |||
.mt-n1 { | |||
margin-top: -0.25rem !important; | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
== مصادر == | == مصادر == | ||
[https://getbootstrap.com/docs/4. | * [https://getbootstrap.com/docs/4.5/utilities/spacing/ صفحة Spacing في توثيق Bootstrap]. | ||
[[تصنيف:Bootstrap]] | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | ||
[[تصنيف:Bootstrap utilities]] | [[تصنيف:Bootstrap utilities|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 09:04، 13 يوليو 2020
يحتوي إطار العمل 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>
الهامش السالب
تسمح CSS بإعطاء خاصية الهامش margin قيمة سالبة (على خلاف padding). ابتداء من الإصدار 4.2، أصبح bootstrap يسمح باعطاء الهوامش قيمة عددية صحيحة سالبة لكل الأعداد التي ذكرناها آنفا (مثل: 1 - 2 - 3 - 4 - 5). هذه الخاصية مفيدة لتخصيص الهوامش بين شبكات الأعمدة في كل النقاط الحدية.
لا تختلف الصياغة كثيرا عن صياغة الهوامش الموجبة، باستثناء أنّ عليك إضافة n قبل الحجم. هذا مثال على صنف مقابل لـ .mt-1:
.mt-n1 {
margin-top: -0.25rem !important;
}