Tazara
Bootstrap ya haɗa da faffadan kewayon gajarta amsa gajarta, padding, da azuzuwan masu amfani don canza kamannin wani abu.
Margin da padding
Sanya ma'amala margin
ko padding
ƙima ga wani yanki ko ɓangaren ɓangaren sa tare da azuzuwan gajerun hannu. Ya haɗa da tallafi don kaddarorin mutum ɗaya, duk kaddarorin, da kaddarorin a tsaye da a kwance. An gina azuzuwan daga taswirar Sass tsoho daga .25rem
zuwa 3rem
.
Ana amfani da tsarin shimfidar Grid na CSS? Yi la'akari da yin amfani da mai amfani tata .
Sanarwa
Abubuwan amfani tazara waɗanda suka shafi duk wuraren karya, daga xs
zuwa xxl
, ba su da taƙaitaccen wuri a cikinsu. Wannan saboda waɗannan azuzuwan ana amfani da su daga min-width: 0
sama da sama, don haka ba su da alaƙa da tambayar kafofin watsa labarai. Ragowar wuraren karya, duk da haka, sun haɗa da gajarta wurin hutu.
Sunayen azuzuwan suna amfani da tsari {property}{sides}-{size}
don , , , , da .xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
xxl
Inda dukiya take daya daga cikin:
m
- don azuzuwan da aka saitamargin
p
- don azuzuwan da aka saitapadding
Inda bangarorin daya ne:
t
- don azuzuwan da suka saitamargin-top
kopadding-top
b
- don azuzuwan da suka saitamargin-bottom
kopadding-bottom
s
- (fara) don azuzuwan da suka saitamargin-left
kopadding-left
a cikin LTR,margin-right
kopadding-right
a cikin RTLe
- (ƙarshen) don azuzuwan da suka saitamargin-right
kopadding-right
a cikin LTR,margin-left
kopadding-left
a cikin RTLx
- domin azuzuwan cewa saita biyu*-left
da kuma*-right
y
- domin azuzuwan cewa saita biyu*-top
da kuma*-bottom
- blank - don azuzuwan da suka saita
margin
kopadding
a duk bangarorin 4 na kashi
Inda girman daya daga cikin:
0
- don azuzuwan da ke kawar damargin
kopadding
ta saita shi zuwa0
1
- (ta tsohuwa) don azuzuwan da suka saitamargin
kopadding
zuwa$spacer * .25
2
- (ta tsohuwa) don azuzuwan da suka saitamargin
kopadding
zuwa$spacer * .5
3
- (ta tsohuwa) don azuzuwan da suka saitamargin
kopadding
zuwa$spacer
4
- (ta tsohuwa) don azuzuwan da suka saitamargin
kopadding
zuwa$spacer * 1.5
5
- (ta tsohuwa) don azuzuwan da suka saitamargin
kopadding
zuwa$spacer * 3
auto
- don azuzuwan da ke saitamargin
zuwa auto
(Zaka iya ƙara ƙarin masu girma dabam ta ƙara shigarwar zuwa $spacers
madaidaicin taswirar Sass.)
Misalai
Ga wasu misalan wakilai na waɗannan azuzuwan:
.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;
}
Tsaya a kwance
Bugu da ƙari, Bootstrap kuma ya haɗa da .mx-auto
aji don a kwance madaidaiciya-tsaye ƙayyadadden abun ciki matakin toshe-wato abun ciki da ke display: block
da width
saiti- ta hanyar saita madaidaitan maginin zuwa auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Rage mara kyau
A cikin CSS, margin
kaddarorin na iya amfani da munanan dabi'u ( padding
ba za su iya ba). Ana kashe waɗannan ragi mara kyau ta tsohuwa , amma ana iya kunna su a cikin Sass ta saitin $enable-negative-margins: true
.
Rubutun ya kusan iri ɗaya ne da tsoho, kayan aikin gefe masu inganci, amma tare da ƙari n
kafin girman da ake nema. Ga misali ajin wanda ke da sabanin haka .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Tazari
Lokacin amfani da display: grid
, zaku iya yin amfani da gap
kayan aiki akan kwandon grid na iyaye. Wannan na iya ajiyewa akan samun ƙara abubuwan amfani da gefe zuwa abubuwan grid ɗaya ɗaya ('ya'yan display: grid
akwati). Abubuwan amfani da rata suna amsawa ta tsohuwa, kuma ana samarwa ta hanyar API ɗin mu, bisa $spacers
taswirar 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>
Taimako ya haɗa da zaɓuɓɓukan amsawa ga duk wuraren grid na Bootstrap, da kuma masu girma dabam shida daga $spacers
taswira ( 0
- 5
). Babu .gap-auto
aji mai amfani kamar yadda yake daidai da .gap-0
.
Sass
Taswirori
Ana ayyana abubuwan amfani tazara ta taswirar Sass sannan a samar da API ɗin mu.
$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);
API ɗin Utilities
Ana bayyana abubuwan amfani tazara a cikin API ɗin mu a cikin scss/_utilities.scss
. Koyi yadda ake amfani da API ɗin abubuwan amfani.
"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
),