Dodome dometsotso
Bootstrap lɔ shorthand responsive margin, padding, kple gap utility class vovovowo ɖe eme be woatrɔ asi le element aɖe ƒe dzedzeme ŋu.
Margin kple padding
De ŋuɖoɖo-xɔlɔ̃wɔwɔ margin
alo padding
asixɔxɔwo asi na element alo eƒe axawo ƒe akpa sue aɖe kple nuŋɔŋlɔ kpui ƒe klasswo. Kpekpeɖeŋu na nɔnɔme ɖekaɖekawo, nɔnɔmewo katã, kple nɔnɔme siwo le tsitrenu kple esiwo le tsia dzi la le eme. Wotua klasswo tso Sass ƒe anyigbatata si woɖo ɖi si tso .25rem
vaseɖe 3rem
.
CSS Grid ƒe ɖoɖowɔɖi ƒe module zazãa? Bu gap utility zazã ŋu kpɔ .
Nuŋɔŋlɔ
Dometsotso ƒe dɔwɔnu siwo ku ɖe breakpoints katã ŋu, tso xs
vaseɖe xxl
, mekpɔ breakpoint ƒe kpukpui aɖeke le wo me o. Esia le alea elabena wowɔa klass mawo ŋudɔ tso min-width: 0
kple dzi, eye to esia me la, womeblaa wo kple nyadzɔdzɔgblɔmɔnuwo ƒe biabia o. Gake breakpoint susɔeawo dometɔ aɖewoe nye breakpoint kpukpui aɖe.
Wozãa nɔnɔme {property}{sides}-{size}
si nye , , , , kple , xs
tsɔ naa ŋkɔ klassawo .{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
xxl
Afisiwo nunɔamesiwo nye:
m
- na klass siwo ɖomargin
p
- na klass siwo ɖopadding
Afisi akpawo nye:
t
- na klass siwo ɖomargin-top
alopadding-top
b
- na klass siwo ɖomargin-bottom
alopadding-bottom
s
- (dze egɔme) na klass siwo ɖomargin-left
alopadding-left
le LTR me,margin-right
alopadding-right
le RTL mee
- (nuwuwu) na klass siwo ɖomargin-right
alopadding-right
le LTR me,margin-left
alopadding-left
le RTL mex
- na klass siwo ɖoa evea siaa*-left
kple*-right
y
- na klass siwo ɖoa evea siaa*-top
kple*-bottom
- blank - na klass siwo ɖo a
margin
alopadding
ɖe element la ƒe akpa 4 katã dzi
Afisi lolome nye:
0
- na klass siwo ɖeamargin
alopadding
to eɖoɖo ɖe0
1
- (le gɔmedzedzea me) na klass siwo ɖomargin
alopadding
to$spacer * .25
2
- (le gɔmedzedzea me) na klass siwo ɖomargin
alopadding
to$spacer * .5
3
- (le gɔmedzedzea me) na klass siwo ɖomargin
alopadding
to$spacer
4
- (le gɔmedzedzea me) na klass siwo ɖomargin
alopadding
to$spacer * 1.5
5
- (le gɔmedzedzea me) na klass siwo ɖomargin
alopadding
to$spacer * 3
auto
- na klass siwo ɖoamargin
be auto
(Àteŋu atsɔ lolome bubuwo akpe ɖe eŋu to nyawo tsɔtsɔ kpe ɖe $spacers
Sass ƒe anyigbatata ƒe tɔtrɔ ŋu me.)
Kpɔɖeŋuwo
Klass siawo ƒe kpɔɖeŋu aɖewo siwo tsi tre ɖi na lae nye esi:
.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;
}
Titina si le tsia dzi
Tsɔ kpe ɖe eŋu la, Bootstrap hã de .mx-auto
klass aɖe si me woatsɔ aɖo titina le tsia dzi le fixed-width block level content—si fia be, content that has display: block
and a width
set—to ɖoɖowɔwɔ ɖe horizontal margins ɖe auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negative ƒe vovototodedeameme
Le CSS me la, margin
nɔnɔmewo ateŋu azã asixɔxɔ manyomanyowo ( padding
mateŋu o). Wowɔa margin manyomanyo siawo ŋudɔ le gɔmedzedzea me , gake woateŋu awɔ dɔ le Sass me to ɖoɖowɔwɔ me $enable-negative-margins: true
.
Nyagɔmeɖegbalẽa sɔ kple default, positive margin utilities kloe, gake wotsɔe kpe ɖe eŋu n
do ŋgɔ na lolome si wobia. Kpɔɖeŋu ƒe klass aɖe si to vovo na .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Memama
Ne èle , zãm display: grid
la, àteŋu awɔ gap
dɔwɔnu siwo le dzila ƒe grid ƒe nugoe la ŋudɔ. Esia ateŋu akpɔ ga geɖe le alesi wòle be woatsɔ margin utilities akpe ɖe grid nu ɖekaɖekawo ŋu ( display: grid
nugoe aɖe ƒe viwo) ŋu. Gap dɔwɔnuwo wɔa dɔ le gɔmedzedzea me, eye wowɔa wo to míaƒe dɔwɔnuwo API dzi, si wotu ɖe $spacers
Sass ƒe anyigbatata dzi.
<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>
Kpekpeɖeŋu ƒe akpa aɖewoe nye tiatia siwo ɖoa nya ŋu na Bootstrap ƒe grid breakpoints katã, kpakple lolome ade tso $spacers
anyigbatata dzi ( 0
– 5
). .gap-auto
utility class aɖeke meli o elabena le nyateƒe me la, esɔ kple .gap-0
.
Sass ƒe nyawo
Anyigbatatawo
Woɖea gbeƒã dometsotso ƒe dɔwɔnuwo to Sass anyigbatata dzi eye emegbe wowɔa wo kple míaƒe dɔwɔnuwo 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);
Dɔwɔnuwo ƒe API
Woɖe gbeƒã dometsotso ƒe dɔwɔnuwo le míaƒe dɔwɔnuwo API me le scss/_utilities.scss
. Srɔ̃ alesi nàzã utilities API lae.
"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
),