في هذا الدرس 7تصفّح المواضيع
يُعد ضبط المسافات الفارغة حول العناصر وبداخلها العمود الفقري لجمال أي واجهة مستخدم. ولتفادي كتابة عشرات الكلاسات المخصصة في كل صفحة، ابتكر بوتستراب صيغة تسمية قياسية مختصرة تتألف من ثلاثة مقاطع متتالية: {property}{sides}-{size} للشاشات كافة، أو {property}{sides}-{breakpoint}-{size} لتخصيص نقطة توقف معينة.
يرمز الحرف الأول إلى نوع الخاصية: m للهامش الخارجي margin الذي يبعد العنصر عن جيرانه، وp للحشو الداخلي padding الذي يوسع المساحة بين إطار العنصر ومحتواه النصي، وعند ترك خانة الجهة فارغة مثل .p-3 أو .m-2 تسري المسافة على الجهات الأربع دفعة واحدة.
يتكون سلم المسافات الرقمي في بوتستراب 5 من ست درجات مدروسة تبدأ من الصفر وحتى الرقم خمسة:
- الدرجة
0: تلغي الهامش أو الحشو تماماً (0rem) مثل.m-0و.p-0. - الدرجة
1: ربع الوحدة الأساسية (0.25rem=4px) للمسافات الدقيقة جداً. - الدرجة
2: نصف الوحدة (0.5rem=8px) للعناصر المدمجة. - الدرجة
3: الوحدة الكاملة القياسية (1rem=16px) وهي الأكثر شيوعاً للبطاقات والفقرات. - الدرجة
4: مرة ونصف (1.5rem=24px) لفصل الكتل المتجاورة بوضوح. - الدرجة
5: ثلاثة أضعاف الوحدة (3rem=48px) لفصل أقسام الصفحة الكبرى.
<div class="p-1 mb-2 text-bg-secondary">p-1 (4px)</div>
<div class="p-2 mb-2 text-bg-primary">p-2 (8px)</div>
<div class="p-3 mb-2 text-bg-success">p-3 (16px)</div>
<div class="p-4 text-bg-dark">p-4 (24px)</div>تُعد النقلة من الاتجاهات الفيزيائية الجامدة إلى الاتجاهات المنطقية أهم تحديث هندسي في بوتستراب 5 لدعم اللغة العربية؛ إذ أُلغيت نهائياً كلاسات الإصدار الرابع القديمة ml-* وmr-* وpl-* وpr-* وحلت محلها حروف البداية والنهاية:
- حرف البداية
s(start): في.ms-*و.ps-*يعني الحافة اليمنى في العربيةRTLوالحافة اليسرى في الإنجليزيةLTR. - حرف النهاية
e(end): في.me-*و.pe-*يعني الحافة اليسرى في العربيةRTLوالحافة اليمنى في الإنجليزيةLTR.
بينما يبقى حرفا الأعلى t (.mt-* / .pt-*) والأسفل b (.mb-* / .pb-*) ثابتين في جميع اللغات.
<div class="p-3 rounded
bg-primary-subtle text-primary-emphasis">
<i class="bi bi-check-circle-fill me-2"
aria-hidden="true"></i>
<span>Logical me-2 space after icon.</span>
</div>بدلاً من تكرار كلاسين متطابقين للجانبين المتقابلين مثل كتابة ps-4 pe-4 أو mt-3 mb-3، يوفر بوتستراب حرفي المحاور المتماثلة لتقليص طول الكود:
- المحور الأفقي
x: يضبط البداية والنهاية معاً عبر.mx-0..5للهوامش و.px-0..5للحشو الأفقي. - المحور الرأسي
y: يضبط الأعلى والأسفل معاً عبر.my-0..5للهوامش و.py-0..5للحشو الرأسي (مثلpx-3 py-2الشائع جداً لتبطين الشارات والأزرار).
لتوسيط صندوق كتلي في منتصف حاويته أفقياً، يوفر بوتستراب كلاس .mx-auto الذي يضبط الهامشين الأفقيين على القيمة التلقائية margin-right: auto; margin-left: auto.
تذكر الشرطين الهندسيين لنجاح .mx-auto: أولاً أن يكون العنصر كتلي العرض (display: block)، وثانياً أن يكون عرضه أقل من 100% من عرض أبيه (عبر تحديد كلاس عمود مثل .col-md-8 أو عرض محدد)؛ إذ لا توجد مساحة فارغة لتوزيعها إذا كان العنصر يملأ السطر بالكامل.
المسافة الرحبة التي تبدو أنيقة على شاشة الحاسوب مثل .p-5 (48px من كل جهة) قد تلتهم نصف عرض شاشة الهاتف الصغير وتضغط النص في عمود ضيق! وهنا تتجلى مرونة نقاط التوقف المدمجة في جميع كلاسات التباعد.
اكتب القيمة المدمجة للهاتف أولاً بدون لاحقة مثل p-3 mb-3، ثم أضف القيمة الأوسع للأجهزة اللوحية والحواسيب مثل p-md-4 p-lg-5 mb-lg-5 ليتنفس التصميم تلقائياً كلما اتسعت الشاشة.
<div class="col-11 col-md-8 mx-auto
p-3 p-md-4 p-lg-5 text-bg-dark rounded">
<h2 class="h4 mb-2">Adaptive Hero Box</h2>
<p class="mb-0">Compact mobile, wide desktop.</p>
</div>عند ترتيب عدة عناصر داخل حاوية شبكية حديثة مثل .grid، بدلاً من إعطاء هامش سفلي وجانبي لكل عنصر فرعي ثم معالجة زيادة الهامش على العنصر الأخير، يوفر بوتستراب 5 كلاسات الفجوات المباشرة .gap-0 حتى .gap-5 على الحاوية الأب نفسها.
وإذا رغبت في فصل المسافة الرأسية بين الصفوف عن المسافة الأفقية بين الأعمدة، استخدم .row-gap-0..5 و.column-gap-0..5 بنسخها المتجاوبة:
<div class="grid row-gap-2 column-gap-4">
<div class="g-col-6 p-2 text-bg-primary">Item A</div>
<div class="g-col-6 p-2 text-bg-primary">Item B</div>
<div class="g-col-6 p-2 text-bg-dark">Item C</div>
<div class="g-col-6 p-2 text-bg-dark">Item D</div>
</div>يجمع الجدول المرجعي التالي رموز صيغة التباعد وسلم القياسات المعتمدة في بوتستراب 5.3:
| الرمز أو المقياس | المعنى والقيمة المحسوبة | مثال تطبيقي |
|---|---|---|
m / p | الهامش الخارجي margin / الحشو الداخلي padding | .m-0, .p-3 |
t / b / s / e | أعلى، أسفل، بداية منطقية، نهاية منطقية | .mt-2, .mb-4, .ms-3, .pe-2 |
x / y | المحور الأفقي معاً / المحور الرأسي معاً | .px-3, .py-2, .mx-auto |
المقياس 0 .. 5 | 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem | .p-2 p-md-4 p-lg-5 |
.gap-* / .row-gap-* / .column-gap-* | فجوات داخلية بين عناصر الشبكة والصندوق المرن | .grid .gap-3 |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس معادلة تسمية كلاسات الهوامش والحشو، وسلم القياسات الستة المبني على وحدة rem، واستخدام الاتجاهات المنطقية ms وme وps وpe لدعم العربية تلقائياً، والتوسيط الأفقي عبر mx-auto والتباعد المتجاوب وفواصل gap.
الخطوة التالية والدرس القادم
انتقل الآن إلى درس «الحدود والأبعاد والظلال في بوتستراب 5» لتشكيل العناصر بالإطارات الملونة واستدارة الحواف ونسب العرض والارتفاع ودرجات الظلال.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Logical Spacing Sides جهات التباعد المنطقية
- حرفا البداية s والنهاية e في كلاسات الهوامش والحشو اللذان ينعكسان تلقائياً بين الإنجليزية والعربية.
- للمراجعة
- 02 Spacer Scale سلم المسافات القياسي
- ست درجات رقمية قياسية من 0 حتى 5 مشتقة من وحدة 1rem لضبط إيقاع المسافات بتناغم.
- للمراجعة
- 03 Symmetric Axis Utilities كلاسات المحاور المتماثلة
- مختصرات المحور الأفقي x والمحور الرأسي y لضبط الجهتين المتقابلتين معاً بكلاس واحد.
- للمراجعة
- 04 Gap Utility أداة الفجوات البينية
- كلاسات توضع على الحاوية الأب لتحديد المسافة الفاصلة بين العناصر الأبناء مباشرة دون هوامش خارجية زائدة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 REM REM
- Root Em Unit
- وحدة القياس النسبية المعتمدة على حجم خط عنصر html الجذري والتي يبنى عليها سلم التباعد.
- للمراجعة
- 02 RTL RTL
- Right-to-Left
- اتجاه الواجهة العربية حيث تمثل البداية s جهة اليمين وتمثل النهاية e جهة اليسار.
- للمراجعة
- 03 LTR LTR
- Left-to-Right
- اتجاه الواجهة الإنجليزية حيث تمثل البداية s جهة اليسار وتمثل النهاية e جهة اليمين.
- للمراجعة
- 04 CSS CSS
- Cascading Style Sheets
- توفر خصائص نموذج الصندوق للهوامش والحشو والفجوات التي تختصرها كلاسات التباعد.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
أنشئ كتلة بأعمدة col-10 col-md-8 متوسطة بكلاس mx-auto تبدأ بحشو مدمج p-2 وهامش mb-2 على الهاتف وتتوسع إلى p-md-4 وp-lg-5 على الشاشات الأكبر.
-
أنشئ حاوية <div class="grid gap-3"> تضم عنصرين بكلاس g-col-6 وحشو px-3 py-2، وضع قبل النص أيقونة مزودة بكلاس التباعد المنطقي me-2.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي8 أسئلة تنتظرك ＋
ما الكلاس الحديث في بوتستراب 5 الذي حل محل الكلاس الملغى .ml-3؟
استبدل بوتستراب 5 الاتجاه الفيزيائي الأيسر ml بالبداية المنطقية .ms-3.
بافتراض وحدة الأساس الافتراضية 1rem، ما مقدار الحشو الذي يطبقه الكلاس .p-5؟
تعادل الدرجة الخامسة في سلم التباعد ثلاثة أضعاف الوحدة الأساسية أي 3rem (48px).
في صفحة عربية باتجاه RTL مع ملف bootstrap.rtl.min.css، أي جهة فيزيائية يبطنها الكلاس .ps-4؟
تمثل البداية المنطقية s في اللغة العربية الحافة اليمنى للعنصر.
هل تعمل كلاسات الهوامش السالبة مثل .mt-n2 افتراضياً في ملف بوتستراب 5 الجاهز دون تعديل Sass؟
خطأ؛ عُطلت كلاسات الهوامش السالبة افتراضياً في حزمة بوتستراب 5 المترجمة لتقليص حجم الملف.
ما الخاصيتان اللتان يضبطهما الكلاس المختصر .py-3 على العنصر؟
يضبط حرف المحور الرأسي y الحشو العلوي والسفلي معاً بمقدار 1rem.
ما الشرط الأساسي لكي ينجح كلاس .mx-auto في توسيط العنصر أفقياً داخل حاويته؟
يجب أن يكون العنصر كتلي العرض (block) وبعرض أقل من 100% من عرض الحاوية الأب.
هل يمنح الكلاس المزدوج "p-2 p-lg-5" العنصر حشواً قدره 0.5rem على الهاتف ويرفعه إلى 3rem بدءاً من عرض 992px؟
صحيح؛ يسري p-2 للهواتف أولاً ثم يتجاوزه p-lg-5 عند بلوغ شاشات lg (992px فأكثر).
أي كلاس يتحكم في المسافة الأفقية بين الأعمدة فقط داخل حاوية .grid دون تغيير المسافة الرأسية للصفوف؟
يضبط الكلاس .column-gap-* المسافة الأفقية بين الأعمدة بشكل مستقل عن فجوة الصفوف.