Aralyk
“Bootstrap” elementiň daşky görnüşini üýtgetmek üçin stenografiki täsirli margin, padding we boşluk peýdaly synplaryň giň toplumyny öz içine alýar.
Margin we padding
Haýsydyr bir elemente ýa-da onuň taraplarynyň bir bölegini stenografiýa sapaklary bilen jogap margin
beriň padding
. Aýry-aýry häsiýetleri, ähli häsiýetleri we dik we kesel häsiýetleri goldaýar. Sapaklar adaty Sass kartasyndan başlap üýtgeýär .25rem
.3rem
CSS Grid düzüliş modulyny ulanýarsyňyzmy? Boşluk peýdalylygyny ulanmagy göz öňünde tutuň .
Bellik
Fromhli arakesmelere degişli aralyk hyzmatlary xs
, xxl
olarda aralyk gysgaltmasy ýok. Sebäbi bu synplar min-width: 0
ýokary we ýokary derejede ulanylýar we şeýlelik bilen media soragy bilen baglanyşykly däl. Galan bölekler bolsa, nokat gysgaltmasyny öz içine alýar.
Sapaklar ,,,,,,,,,,,,,,,,,,,,,,,, {property}{sides}-{size}
_ xs
_ {property}{sides}-{breakpoint}-{size}
_ sm
_ md
_ lg
_ xl
_xxl
Gozgalmaýan emläk :
m
- düzülen sapaklar üçinmargin
p
- düzülen sapaklar üçinpadding
Taraplaryň biri :
t
- düzýän sapaklar üçinmargin-top
ýa-dapadding-top
b
- düzýän sapaklar üçinmargin-bottom
ýa-dapadding-bottom
s
- ( LTR )margin-left
ýa - da RTL - de goýlan sapaklar üçinpadding-left
margin-right
padding-right
e
- ( LTR )margin-right
ýa - da RTL - de goýlan sapaklar üçinpadding-right
margin-left
padding-left
x
*-left
- ikisini hem kesgitleýän sapaklar üçin*-right
y
*-top
- ikisini hem kesgitleýän sapaklar üçin*-bottom
- boş - elementiň 4 tarapyny ýa-
margin
da hemme tarapyny düzýän sapaklar üçinpadding
Ululygy nirede :
0
- ýok edýänmargin
ýa-dapadding
ony düzýän sapaklar üçin0
1
margin
- (tertip boýunça) ýa-da düzýän synplarpadding
üçin$spacer * .25
2
margin
- (tertip boýunça) ýa-da düzýän synplarpadding
üçin$spacer * .5
3
margin
- (tertip boýunça) ýa-da düzýän synplarpadding
üçin$spacer
4
margin
- (tertip boýunça) ýa-da düzýän synplarpadding
üçin$spacer * 1.5
5
margin
- (tertip boýunça) ýa-da düzýän synplarpadding
üçin$spacer * 3
auto
margin
- awtomatik sazlaýan sapaklar üçin
$spacers
( Sass kartasynyň üýtgeýjisine ýazgylar goşup has köp ululyk goşup bilersiňiz .)
Mysallar
Ine, bu synplaryň käbir wekilçilikli mysallary:
.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 merkezleşdirme
Mundan başga-da, “Bootstrap ” keseligine çäkleri kesgitlemek arkaly .mx-auto
keseligine merkezleşdirilen kesgitli giňlikdäki blok derejesiniň mazmunyny, ýagny mazmuny display: block
we width
toplumyny öz içine alýar auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Ativearamaz margin
CSS-de margin
häsiýetler otrisatel bahalary ulanyp biler ( padding
edip bilmeýär). Bu otrisatel aralyklar adaty ýagdaýda ýapylýar, ýöne sazlamak arkaly Sass-da işledilip bilner $enable-negative-margins: true
.
Sintaksis, deslapky, polo positiveitel margin kömekleri bilen deňdir, ýöne n
talap edilýän ululykdan öň goşulmagy bilen. Ine, tersine bir mysal synpy .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gap
Ulanylanda, esasy set konteýnerinde kömekçi enjamlary ulanyp display: grid
bilersiňiz . Bu aýratyn gözenek elementlerine ( konteýneriň gap
çagalary) margin hyzmatlaryny goşmagy tygşytlap biler . Gap hyzmatlary, adaty ýagdaýda jogap berýär we Sass kartasyna display: grid
esaslanyp, kommunal hyzmatlarymyz API arkaly döredilýär .$spacers
<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>
Goldaw, “Bootstrap” -yň gözenegiň ähli nokatlary üçin täsirli wariantlary, şeýle hem $spacers
kartadan alty ululygy ( 0
- 5
) öz içine alýar. .gap-auto
Netijeli ýaly peýdaly synp ýok .gap-0
.
Sass
Kartalar
Aralyk hyzmatlary Sass kartasy arkaly yglan edilýär we soňra kommunal hyzmatlarymyz API bilen döredilýär.
$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
Aralyk hyzmatlary, biziň API-lerimizde yglan edilýär scss/_utilities.scss
. Utilities API-ni nähili ulanmalydygyny öwreniň.
"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
),