Phapanyetsano
Bootstrap e kenyelletsa mefuta e mengata e fapaneng e arabelang ka nako e khuts'oane, padding, le litlelase tsa lisebelisoa tsa gap ho fetola chebahalo ea element.
Margin le padding
Abela lintho tse arabelang hantle margin
kapa padding
tsa boleng ho element kapa karoloana ea mahlakore a eona e nang le litlelase tsa shorthand. E kenyelletsa tšehetso bakeng sa thepa ea motho ka mong, thepa eohle, le thepa e otlolohileng le e tšekaletseng. Litlelase li hahiloe ho tloha ho 'mapa oa kamehla oa Sass ho tloha .25rem
ho 3rem
.
U sebelisa mojule oa sebopeho sa Grid ea CSS? Nahana ka ho sebelisa sesebelisoa sa gap .
Notation
Lisebelisoa tsa sebaka tse sebetsang ho libaka tsohle tsa phomolo, ho tloha xs
ho ea ho xxl
, ha li na khutsufatso ea li-breakpoint ho tsona. Lebaka ke hobane litlelase tseo li sebelisoa ho tloha min-width: 0
holimo le holimo, 'me ka hona ha li tlangoe ke potso ea media. Li-breakpoints tse setseng, leha ho le joalo, li kenyelletsa khutsufatso ea breakpoint.
Litlelase li reheletsoe ho sebelisoa sebopeho {property}{sides}-{size}
sa xs
le {property}{sides}-{breakpoint}-{size}
bakeng sa sm
, md
, lg
, xl
, le xxl
.
Moo thepa e leng e 'ngoe ea:
m
- bakeng sa lihlopha tse behiloengmargin
p
- bakeng sa lihlopha tse behiloengpadding
Moo mahlakore ke e 'ngoe ea:
t
- bakeng sa litlelase tse behangmargin-top
kapapadding-top
b
- bakeng sa litlelase tse behangmargin-bottom
kapapadding-bottom
s
- (qala) bakeng sa litlelase tse behiloengmargin-left
kapapadding-left
ho LTR,margin-right
kapapadding-right
ho RTLe
- (qetellong) bakeng sa litlelase tse behiloengmargin-right
kapapadding-right
tse LTR,margin-left
kapapadding-left
ho RTLx
- bakeng sa lihlopha tse behang bobeli*-left
le*-right
y
- bakeng sa lihlopha tse behang bobeli*-top
le*-bottom
- blank - bakeng sa litlelase tse behang a
margin
kapapadding
mahlakoreng 'ohle a 4 a element
Moo boholo e leng e 'ngoe ea:
0
- bakeng sa litlelase tse felisangmargin
kapapadding
ka ho e beha ho0
1
- (ka kamehla) bakeng sa litlelase tse behangmargin
kapapadding
ho$spacer * .25
2
- (ka kamehla) bakeng sa litlelase tse behangmargin
kapapadding
ho$spacer * .5
3
- (ka kamehla) bakeng sa litlelase tse behangmargin
kapapadding
ho$spacer
4
- (ka kamehla) bakeng sa litlelase tse behangmargin
kapapadding
ho$spacer * 1.5
5
- (ka kamehla) bakeng sa litlelase tse behangmargin
kapapadding
ho$spacer * 3
auto
- bakeng sa litlelase tse behangmargin
ho auto
(O ka eketsa boholo bo eketsehileng ka ho kenyelletsa likenyelletso tsa $spacers
'mapa oa Sass.)
Mehlala
Mona ke mehlala ea baemeli ba lihlopha tsena:
.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;
}
Horizontal centering
Ho ekelletsa moo, Bootstrap e boetse e kenyelletsa .mx-auto
sehlopha sa litaba tsa boemo bo sa tsitsang ba bophara bo sa fetoheng—ke hore, litaba tse nang display: block
le width
sete-ka ho beha mecheng e tšekaletseng ho auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negative margin
Ho CSS, margin
thepa e ka sebelisa litekanyetso tse mpe ( padding
ha li khone). Mehaho ena e fosahetseng e tingoa ka ho sa feleng , empa e ka lumelloa ho Sass ka ho seta $enable-negative-margins: true
.
Syntax e batla e ts'oana le lits'ebeletso tsa kamehla, tse ntle, empa ka kenyelletso ea n
pele ho boholo bo kopiloeng. Mona ke sehlopha sa mohlala se fapaneng le .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Lekhalo
Ha u sebelisa display: grid
, u ka sebelisa gap
lisebelisoa tse ka har'a setshelo sa grid ea motsoali. Sena se ka boloka ka ho eketsa lisebelisoa tsa marang-rang ho lintho tsa marang-rang (bana ba display: grid
setshelo). Lisebelisoa tsa Gap li arabela ka mokhoa o ikhethileng, 'me li hlahisoa ka lisebelisoa tsa rona tsa API, ho ipapisitsoe le $spacers
' mapa oa 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>
Ts'ehetso e kenyelletsa likhetho tsa ho arabela bakeng sa libaka tsohle tsa marang-rang tsa Bootstrap, hammoho le boholo bo ts'eletseng ho tsoa ' $spacers
mapeng ( 0
– 5
). Ha ho na .gap-auto
sehlopha sa utility kaha se tšoana hantle le .gap-0
.
Sass
Limmapa
Lisebelisoa tsa sebaka li phatlalatsoa ka 'mapa oa Sass ebe li hlahisoa ka lisebelisoa tsa rona tsa 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
Lisebelisoa tsa sebaka li phatlalatsoa ho lits'ebeletso tsa rona tsa API ho scss/_utilities.scss
. Ithute ho sebelisa lisebelisoa tsa 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
),