تباعد
يتضمن Bootstrap نطاقًا واسعًا من فئات الهامش المتجاوبة ، والحشو ، والفجوة لتعديل مظهر العنصر.
الهامش والحشو
margin
قم بتعيين قيم أو صديقة سريعة الاستجابة padding
لعنصر أو مجموعة فرعية من جوانبها بفئات الاختزال. يتضمن دعمًا للخصائص الفردية وجميع الخصائص والخصائص الرأسية والأفقية. يتم إنشاء الفئات من خريطة Sass افتراضية تتراوح من .25rem
إلى 3rem
.
باستخدام وحدة تخطيط شبكة CSS؟ ضع في اعتبارك استخدام أداة الفجوة .
الرموز
أدوات التباعد التي تنطبق على جميع نقاط التوقف ، من xs
إلى xxl
، ليس بها اختصار لنقطة التوقف. هذا لأن هذه الفئات يتم تطبيقها من min-width: 0
وإلى الأعلى ، وبالتالي فهي غير ملزمة باستعلام وسائط. ومع ذلك ، تتضمن نقاط التوقف المتبقية اختصارًا لنقطة التوقف.
تتم تسمية الفئات باستخدام التنسيق من {property}{sides}-{size}
أجل xs
و و و و و .{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
xxl
حيث تكون الملكية واحدة من:
m
- للفئات التي تم تعيينهاmargin
p
- للفئات التي تم تعيينهاpadding
حيث تكون الجوانب أحد:
t
- للفئات التي تحددmargin-top
أوpadding-top
b
- للفئات التي تحددmargin-bottom
أوpadding-bottom
s
- (ابدأ) للفئات التي تم تعيينهاmargin-left
أوpadding-left
في LTRmargin-right
أوpadding-right
RTLe
- (النهاية) للفئات التي تم ضبطهاmargin-right
أوpadding-right
في LTRmargin-left
أوpadding-left
RTLx
- للفئات التي تحدد كلا من*-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.
<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,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
واجهة برمجة تطبيقات المرافق
يتم الإعلان عن أدوات التباعد في واجهة برمجة التطبيقات الخاصة بالمرافق في 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
),