Bo'shliq
Bootstrap elementning ko'rinishini o'zgartirish uchun stenogrammaga sezgir marja, to'ldirish va bo'shliq yordamchi sinflarining keng doirasini o'z ichiga oladi.
Marja va to'ldirish
Elementga yoki uning tomonlari toʻplamiga stenogramma sinflari bilan javob beradigan qulay margin
yoki qiymatlarni belgilang. padding
Shaxsiy xususiyatlar, barcha xususiyatlar va vertikal va gorizontal xususiyatlarni qo'llab-quvvatlashni o'z ichiga oladi. .25rem
Sinflar birlamchi Sass xaritasidan dan gacha boʻlgan masofada qurilgan 3rem
.
CSS Grid layout modulidan foydalanasizmi? Gap yordam dasturidan foydalanishni o'ylab ko'ring .
Belgilash
xs
Barcha to'xtash nuqtalari uchun qo'llaniladigan oraliq yordamchi dasturlarda xxl
to'xtash nuqtasi qisqartmasi yo'q. Buning sababi shundaki, bu sinflar yuqoridan min-width: 0
va yuqoridan qo'llaniladi va shuning uchun media so'rovi bilan bog'lanmaydi. Qolgan to'xtash nuqtalari esa to'xtash nuqtasi qisqartmasini o'z ichiga oladi.
{property}{sides}-{size}
Sinflar uchun va , , , xs
va {property}{sides}-{breakpoint}-{size}
uchun formati yordamida nomlanadi .sm
md
lg
xl
xxl
Bu erda mulk quyidagilardan biri hisoblanadi:
m
- belgilangan sinflar uchunmargin
p
- belgilangan sinflar uchunpadding
Bu tomonlardan biri:
t
- belgilangan sinflar uchunmargin-top
yokipadding-top
b
- belgilangan sinflar uchunmargin-bottom
yokipadding-bottom
s
- (boshlash) o'rnatilganmargin-left
yokipadding-left
LTRdamargin-right
yokipadding-right
RTLda o'rnatilgan sinflar uchune
- (tugashi) o'rnatilganmargin-right
yokipadding-right
LTRdamargin-left
yokipadding-left
RTLda o'rnatilgan sinflar uchunx
*-left
- ikkalasini ham o'rnatadigan sinflar uchun*-right
y
*-top
- ikkalasini ham o'rnatadigan sinflar uchun*-bottom
- bo'sh - elementning barcha 4 tomonida a
margin
yoki o'rnatilgan sinflar uchunpadding
Bu erda o'lcham quyidagilardan biri:
0
- ni yo'q qiladiganmargin
yokipadding
uni o'rnatish orqali sinflar uchun0
1
- (sukut bo'yicha)margin
yoki ni o'rnatgan sinflarpadding
uchun$spacer * .25
2
- (sukut bo'yicha)margin
yoki ni o'rnatgan sinflarpadding
uchun$spacer * .5
3
- (sukut bo'yicha)margin
yoki ni o'rnatgan sinflarpadding
uchun$spacer
4
- (sukut bo'yicha)margin
yoki ni o'rnatgan sinflarpadding
uchun$spacer * 1.5
5
- (sukut bo'yicha)margin
yoki ni o'rnatgan sinflarpadding
uchun$spacer * 3
auto
margin
- auto ni o'rnatgan sinflar uchun
$spacers
( Sass xaritasi oʻzgaruvchisiga yozuvlar qoʻshish orqali koʻproq oʻlchamlarni qoʻshishingiz mumkin .)
Misollar
Mana bu sinflarning ba'zi namunaviy namunalari:
.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;
}
Gorizontal markazlashtirish
Bundan tashqari, Bootstrap shuningdek, gorizontal chegaralarni o'rnatish orqali .mx-auto
qattiq kenglikdagi blok darajasidagi tarkibni, ya'ni mavjud tarkib display: block
va width
to'plamni gorizontal markazlashtirish uchun sinfni o'z ichiga oladi auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Salbiy marja
CSS-da margin
xususiyatlar salbiy qiymatlardan foydalanishi mumkin ( padding
mumkin). Ushbu salbiy chegaralar sukut bo'yicha o'chirilgan , lekin sozlash orqali Sass'da faollashtirilishi mumkin $enable-negative-margins: true
.
Sintaksis sukut bo'yicha, ijobiy chegara yordam dasturlari bilan deyarli bir xil, ammo n
so'ralgan o'lchamdan oldin qo'shilishi bilan. Bunga qarama-qarshi bo'lgan misol sinfi .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Bo'shliq
dan foydalanayotganda display: grid
, siz gap
ota-grid konteyneridagi yordamchi dasturlardan foydalanishingiz mumkin. display: grid
Bu alohida panjara elementlariga ( konteynerning bolalari) marja yordam dasturlarini qo'shish zaruriyatini tejash imkonini beradi . $spacers
Gap yordam dasturlari sukut bo'yicha javob beradi va Sass xaritasi asosida bizning API yordam dasturlarimiz orqali yaratiladi .
<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>
Qo'llab-quvvatlash barcha Bootstrap panjara to'xtash nuqtalari uchun javob beruvchi variantlarni, shuningdek, $spacers
xaritadan oltita o'lchamni ( 0
– 5
) o'z ichiga oladi. Utility sinfi yo'q .gap-auto
, chunki u samarali tarzda bir xil .gap-0
.
Sass
Xaritalar
Space utilities Sass xaritasi orqali e'lon qilinadi va keyin bizning yordam dasturlarimiz API bilan yaratiladi.
$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);
Utilities API
Space utilities bizning yordam dasturlarimiz API da e'lon qilingan scss/_utilities.scss
. API yordam dasturlarini qanday ishlatishni bilib oling.
"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
),