تباعد

يتضمن Bootstrap نطاقًا واسعًا من فئات الهامش المتجاوبة ، والحشو ، والفجوة لتعديل مظهر العنصر.

على هذه الصفحة

الهامش والحشو

marginقم بتعيين قيم أو صديقة سريعة الاستجابة paddingلعنصر أو مجموعة فرعية من جوانبها بفئات الاختزال. يتضمن دعمًا للخصائص الفردية وجميع الخصائص والخصائص الرأسية والأفقية. يتم إنشاء الفئات من خريطة Sass افتراضية تتراوح من .25remإلى 3rem.

باستخدام وحدة تخطيط شبكة CSS؟ ضع في اعتبارك استخدام أداة الفجوة بدلاً من ذلك.

الرموز

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

تتم تسمية الفئات باستخدام التنسيق من {property}{sides}-{size}أجل xsو و و و و .{property}{sides}-{breakpoint}-{size}smmdlgxlxxl

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

m- للفئات التي تم تعيينهاmargin
p- للفئات التي تم تعيينهاpadding

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

t- للفئات التي تحدد margin-topأوpadding-top
b- للفئات التي تحدد margin-bottomأوpadding-bottom
s- (ابدأ) للفئات التي تم تعيينها margin-leftأو padding-leftفي LTR margin-rightأو padding-rightRTL
e- (النهاية) للفئات التي تم ضبطها margin-rightأو padding-rightفي LTR margin-leftأو padding-leftRTL
x- للفئات التي تحدد كلا من *-leftو*-right
y- للفئات التي تحدد كلا من *-topو*-bottom
فارغ - للفئات التي تحدد a marginأو paddingعلى جميع الجوانب الأربعة للعنصر

حيث الحجم هو واحد من:

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

(يمكنك إضافة المزيد من الأحجام عن طريق إضافة إدخالات إلى $spacersمتغير خريطة Sass.)

أمثلة

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

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

عنصر مركزي

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

الهامش السلبي

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

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

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

الفارق

عند display: gridالاستخدام ، يمكنك الاستفادة من gapالأدوات المساعدة الموجودة على حاوية الشبكة الرئيسية. يمكن أن يوفر ذلك عند الحاجة إلى إضافة أدوات مساعدة للهامش إلى عناصر الشبكة الفردية (توابع display: gridالحاوية). تستجيب أدوات Gap المساعدة بشكل افتراضي ، ويتم إنشاؤها عبر واجهة برمجة تطبيقات الأدوات المساعدة لدينا ، استنادًا إلى $spacersخريطة Sass.

عنصر الشبكة 1

عنصر الشبكة 2

عنصر الشبكة 3

لغة البرمجة

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

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

ساس

خرائط

يتم الإعلان عن أدوات التباعد عبر خريطة Sass ثم يتم إنشاؤها باستخدام واجهة برمجة تطبيقات المرافق الخاصة بنا.

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

واجهة برمجة تطبيقات المرافق

يتم الإعلان عن أدوات التباعد في واجهة برمجة التطبيقات الخاصة بالمرافق في scss/_utilities.scss. تعرف على كيفية استخدام واجهة برمجة تطبيقات المرافق.

    "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
    ),