تباعد

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

كيف تعمل

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

الرموز

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

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

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

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

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

• 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
• فارغ - للفئات التي تحدد 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;
}

.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مجموعة - عن طريق تعيين الهوامش الأفقية على auto.

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