التباعد (Spacing)

الهوامش (Margin) والهامش الداخلي (padding)

قم بتعيين قيم margin أو padding متوافقة مع الشاشات (Responsive) لعنصر ما أو لمجموعة فرعية من جوانبه باستخدام الفئات (classes) المختصرة. يتضمن ذلك دعماً للخصائص الفردية، وجميع الخصائص، والخصائص الرأسية والأفقية. يتم بناء الفئات (classes) من الخريطة (map) الافتراضية لـ الـ Sass والتي تتراوح من .25rem إلى 3rem .

الترميز

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

يتم تسمية الفئات (classes) باستخدام التنسيق {property}{sides}-{size} لـ xs و {property}{sides}-{breakpoint}-{size} لـ sm و md و lg و xl و xxl.

حيث تكون خاصية واحدة من:

• m - للفئات (classes) التي تعين الـ margin
• p - للفئات (classes) التي تعين الهامش الداخلي padding

حيث تكون الجانبين واحدة من:

• t - للفئات (classes) التي تعين margin-top أو padding-top
• b - للفئات (classes) التي تعين margin-bottom أو padding-bottom
• s - (البداية/start) للفئات (classes) التي تعين margin-left أو padding-left في وضع LTR، و margin-right أو padding-right في وضع RTL
• e - (النهاية/end) للفئات (classes) التي تعين margin-right أو padding-right في وضع LTR، و margin-left أو padding-left في وضع RTL
• x - للفئات (classes) التي تعين كلاً من *-left و *-right
• y - للفئات (classes) التي تعين كلاً من *-top و *-bottom
• فارغ - للفئات (classes) التي تعين الـ margin أو الهامش الداخلي padding على جميع الجوانب الأربعة للعنصر

حيث يكون الحجم واحداً من:

• 0 - للفئات (classes) التي تلغي الـ margin أو الهامش الداخلي (padding) عن طريق تعيينه إلى 0
• 1 - (افتراضياً) للفئات (classes) التي تعين الـ margin أو الهامش الداخلي (padding) إلى $spacer * .25
• 2 - (افتراضياً) للفئات (classes) التي تعين الـ margin أو الهامش الداخلي (padding) إلى $spacer * .5
• 3 - (افتراضياً) للفئات (classes) التي تعين الـ margin أو الهامش الداخلي (padding) إلى $spacer
• 4 - (افتراضياً) للفئات (classes) التي تعين الـ margin أو الهامش الداخلي (padding) إلى $spacer * 1.5
• 5 - (افتراضياً) للفئات (classes) التي تعين الـ margin أو الهامش الداخلي (padding) إلى $spacer * 3
• auto - للفئات (classes) التي تعين الـ margin إلى auto

(يمكنك إضافة المزيد من الأحجام بإضافة إدخالات إلى متغير الخريطة (map) الخاص بـ Sass وهو $spacers.)

أمثلة

فيما يلي بعض الأمثلة التمثيلية لهذه الفئات (classes):

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

.ms-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 لتوسيط المحتوى ذو العرض الثابت على مستوى الكتلة (block level) أفقياً—أي المحتوى الذي لديه display: block و width محدد وذلك عن طريق ضبط الهوامش الأفقية إلى auto.

<div class="mx-auto p-2" style="width: 200px;">
  Centered element
</div>

الهوامش السالبة

في CSS، يمكن لخصائص margin استخدام قيم سالبة (بينما لا يمكن لـ padding ذلك). هذه الهوامش السلبية تكون معطلة افتراضياً، ولكن يمكن تفعيلها في Sass عن طريق تعيين $enable-negative-margins: true.

التنسيق مشابه تقريباً للفئات (classes) المساعدة للهوامش الإيجابية الافتراضية، ولكن مع إضافة حرف n قبل الحجم المطلوب. إليك مثال لفئة (class) تكون عكس الفئة .mt-1:

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

الفراغات (gap)

عند استخدام display: grid أو display: flex ، يمكنك الاستفادة من أدوات الفراغات (gap) على العنصر الأب. يمكن أن يوفر هذا عناء إضافة أدوات الهوامش (margin) إلى العناصر الأبناء الفردية في حاوية grid أو flex. تكون أدوات الفراغات (gap) متوافقة مع الشاشات (Responsive) افتراضياً، ويتم إنشاؤها عبر الـ utilities API الخاصة بنا، بناءً على خريطة (map) الـ Sass المسماة $spacers.

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

تتضمن خيارات متوافقة مع الشاشات (Responsive) لجميع نقاط توقف الشبكة (grid breakpoints) الخاصة بـ Bootstrap، بالإضافة إلى ستة أحجام من الخريطة (map) $spacers (0–5). لا توجد فئة (class) مساعدة .gap-auto لأنها فعلياً نفس الفئة .gap-0.

الفراغات بين الصفوف (row-gap)

تقوم row-gap بتعيين المساحة الرأسية بين العناصر الأبناء في الحاوية المحددة.

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

الفرغات بين الأعمدة (column-gap)

تضبط column-gap المساحة الأفقية بين العناصر الأبناء في الحاوية المحددة.

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
  <div class="p-2">Grid item 1</div>
  <div class="p-2">Grid item 2</div>
  <div class="p-2">Grid item 3</div>
  <div class="p-2">Grid item 4</div>
</div>

الـ (CSS)

خرائط الـ (Sass)

يتم التصريح عن أدوات التباعد (Spacing utilities) عبر الخريطة (map) الخاصة بـ الـ Sass ثم يتم إنشاؤها باستخدام الـ utilities API الخاصة بنا.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

واجهة برمجة تطبيقات أدوات Sass (Sass utilities API)

يتم التصريح عن أدوات التباعد (Spacing utilities) في الـ utilities API الخاصة بنا في scss/_utilities.scss. تعلم كيفية استخدام الـ utilities API.

"margin": (
  responsive: true,
  property: margin,
  class: m,
  values: map-merge($spacers, (auto: auto))
),
"margin-x": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: map-merge($spacers, (auto: auto))
),
"margin-y": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: map-merge($spacers, (auto: auto))
),
"margin-top": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: map-merge($spacers, (auto: auto))
),
"margin-end": (
  responsive: true,
  property: margin-right,
  class: me,
  values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: map-merge($spacers, (auto: auto))
),
"margin-start": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
  responsive: true,
  property: margin,
  class: m,
  values: $negative-spacers
),
"negative-margin-x": (
  responsive: true,
  property: margin-right margin-left,
  class: mx,
  values: $negative-spacers
),
"negative-margin-y": (
  responsive: true,
  property: margin-top margin-bottom,
  class: my,
  values: $negative-spacers
),
"negative-margin-top": (
  responsive: true,
  property: margin-top,
  class: mt,
  values: $negative-spacers
),
"negative-margin-end": (
  responsive: true,
  property: margin-right,
  class: me,
  values: $negative-spacers
),
"negative-margin-bottom": (
  responsive: true,
  property: margin-bottom,
  class: mb,
  values: $negative-spacers
),
"negative-margin-start": (
  responsive: true,
  property: margin-left,
  class: ms,
  values: $negative-spacers
),
// Padding utilities
"padding": (
  responsive: true,
  property: padding,
  class: p,
  values: $spacers
),
"padding-x": (
  responsive: true,
  property: padding-right padding-left,
  class: px,
  values: $spacers
),
"padding-y": (
  responsive: true,
  property: padding-top padding-bottom,
  class: py,
  values: $spacers
),
"padding-top": (
  responsive: true,
  property: padding-top,
  class: pt,
  values: $spacers
),
"padding-end": (
  responsive: true,
  property: padding-right,
  class: pe,
  values: $spacers
),
"padding-bottom": (
  responsive: true,
  property: padding-bottom,
  class: pb,
  values: $spacers
),
"padding-start": (
  responsive: true,
  property: padding-left,
  class: ps,
  values: $spacers
),
// Gap utility
"gap": (
  responsive: true,
  property: gap,
  class: gap,
  values: $spacers
),
"row-gap": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $spacers
),
"column-gap": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $spacers
),