Avanoa
O le Bootstrap e aofia ai le tele o vaega fa'apitoa e tali mai, padding, ma va'a aoga vasega e sui ai foliga o se elemene.
Avanoa ma faʻaofuofu
Tofi tali-faauo margin
po o padding
tulaga faatauaina i se elemene po o se vaega itiiti o ona itu ma vasega pupuu. E aofia ai le lagolago mo meatotino ta'itasi, meatotino uma, ma mea tu'usa'o ma fa'ata'atia. O vasega e fausia mai se fa'afanua fa'aletonu Sass e amata mai .25rem
i le 3rem
.
Le fa'aogaina o le CSS Grid layout module? Mafaufau e faʻaaoga le gap utility .
Notation
Fa'aoga avanoa e fa'aoga i vaega ta'oto uma, mai xs
i le xxl
, e leai se fa'apu'upu'u fa'apuupuuga i totonu. E mafua ona o na vasega o loʻo faʻaoga mai min-width: 0
ma luga, ma o lea e le o noatia i se fesili a le aufaasālalau. Ae peitai, o vaega o totoe, e aofia ai se faapuupuuga.
O vasega ua faaigoaina e faaaoga ai le faatulagaga {property}{sides}-{size}
mo xs
ma {property}{sides}-{breakpoint}-{size}
mo sm
, md
, lg
, xl
, ma xxl
.
Afai o meatotino o se tasi o:
m
- mo vasega ua setiinamargin
p
- mo vasega ua setiinapadding
O fea itu o se tasi o:
t
- mo vasega e setimargin-top
pepadding-top
b
- mo vasega e setimargin-bottom
pepadding-bottom
s
- (amata) mo vasega e setimargin-left
pepadding-left
ile LTR,margin-right
poʻopadding-right
ile RTLe
- (fa'ai'uga) mo vasega o lo'o setimargin-right
po'opadding-right
le LTR,margin-left
po'opadding-left
le RTLx
- mo vasega e seti uma*-left
ma*-right
y
- mo vasega e seti uma*-top
ma*-bottom
- avanoa - mo vasega e seti se
margin
po'opadding
luga uma 4 itu o le elemene
Ole tele ole tasi ole:
0
- mo vasega e aveese lemargin
popadding
o le setiina i0
1
- (e ala i le faaletonu) mo vasega e setiina lemargin
popadding
o le$spacer * .25
2
- (e ala i le faaletonu) mo vasega e setiina lemargin
popadding
o le$spacer * .5
3
- (e ala i le faaletonu) mo vasega e setiina lemargin
popadding
o le$spacer
4
- (e ala i le faaletonu) mo vasega e setiina lemargin
popadding
o le$spacer * 1.5
5
- (e ala i le faaletonu) mo vasega e setiina lemargin
popadding
o le$spacer * 3
auto
- mo vasega e setiina lemargin
i le auto
(E mafai ona e faʻaopoopoina le tele o lapopoa e ala i le faʻaopoopoina o faʻamaumauga i le $spacers
fesuiaiga o faʻafanua Sass.)
Faataitaiga
O nisi nei o fa'ata'ita'iga fa'atusa o nei vasega:
.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;
}
Tutotonuga faalava
E le gata i lea, o le Bootstrap e aofia ai foi ma se .mx-auto
vasega mo le fa'ata'atiagatonugatonu-lautele poloka tulaga anotusi—o lona uiga, anotusi o lo'o i ai display: block
ma se width
seti-e ala i le setiina o laina faalava i le auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Fa'ailoga le lelei
I totonu o le CSS, margin
e mafai e meatotino ona fa'aoga tulaga le lelei ( padding
e le mafai). O nei laina le lelei e le mafai ona faʻaogaina , ae mafai ona faʻaogaina i Sass e ala i le seti $enable-negative-margins: true
.
O le syntax e toetoe lava tutusa ma le fa'aletonu, fa'aoga lelei pito i tua, ae fa'atasi ai ma le fa'aopoopoina n
a'o le'i o'o i le tele o lo'o talosagaina. O se fa'ata'ita'iga lea o vasega e fa'afeagai ma .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gap
A fa'aoga display: grid
, e mafai ona e fa'aogaina gap
mea fa'aoga ile koneteina fa'asologa o matua. E mafai ona fa'asaoina le fa'aopoopoina o mea fa'aoga pito i tua i mea ta'itasi (tama'i o se display: grid
atigipusa). Gap utilities e tali mai e ala i le faaletonu, ma e gaosia e ala i la matou aoga API, faʻavae i luga o le $spacers
faafanua 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>
O le lagolago e aofia ai filifiliga tali mo vaega uma a Bootstrap gridpoints, faʻapea foʻi ma le ono lapopoa mai le $spacers
faʻafanua ( 0
- 5
). E leai .gap-auto
se vasega aoga aua e tutusa lelei ma .gap-0
.
Sass
Faafanua
Ole fa'aogaina ole avanoa e fa'ailoa ile fa'afanua Sass ona fa'atupuina lea ile matou fa'aoga API.
$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
O lo'o fa'ailoa mai mea fa'aoga avanoa i totonu o la matou fa'aoga API i scss/_utilities.scss
. A'oa'o pe fa'afefea ona fa'aoga mea aoga API.
"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
),