Heba
Ny Bootstrap dia ahitana karazana mari-pamantarana fohy, padding, ary kilasy fampiasa amin'ny gap hanovana ny endriky ny singa iray.
Sisiny sy padding
Manendre soatoavina mora raisina margin
na padding
soatoavina ho an'ny singa iray na ampahany amin'ny sisiny misy kilasy fohy. Ahitana fanohanana ny fananana tsirairay, ny fananana rehetra ary ny toetra mitsangana sy mitsivalana. Ny kilasy dia natsangana avy amin'ny sarintany Sass default manomboka .25rem
amin'ny 3rem
.
Mampiasa ny module layout CSS Grid? Diniho ny fampiasana ny gap utility .
tarehimarika
Ny fitaovana fanalavirana izay mihatra amin'ny teboka fiatoana rehetra, manomboka xs
amin'ny xxl
, dia tsy misy fanafohezan-tohatra tapaka ao aminy. Izany dia satria ireo kilasy ireo dia ampiharina avy any min-width: 0
ambony, ary noho izany dia tsy voafatotry ny fangatahana media. Ny teboka sisa tavela anefa dia misy fanafohezan-teny.
Ny kilasy dia nomena anarana amin'ny alàlan'ny format {property}{sides}-{size}
for xs
and {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, xl
, ary xxl
.
Ny fananana dia iray amin'ireo:
m
- ho an'ny kilasy izay napetrakamargin
p
- ho an'ny kilasy izay napetrakapadding
Aiza ny lafiny iray amin'ny:
t
- ho an'ny kilasy izay mametrakamargin-top
napadding-top
b
- ho an'ny kilasy izay mametrakamargin-bottom
napadding-bottom
s
- (manomboka) ho an'ny kilasy napetrakamargin-left
napadding-left
amin'ny LTR,margin-right
napadding-right
amin'ny RTLe
- (farany) ho an'ny kilasy napetrakamargin-right
napadding-right
amin'ny LTR,margin-left
napadding-left
amin'ny RTLx
- ho an'ny kilasy izay mametraka ny roa*-left
sy ny*-right
y
- ho an'ny kilasy izay mametraka ny roa*-top
sy ny*-bottom
- banga - ho an'ny kilasy izay mametraka
margin
napadding
amin'ny lafiny 4 amin'ny singa
Aiza ny haben'ny iray amin'ireo:
0
- ho an'ny kilasy manafoana nymargin
napadding
amin'ny fametrahana azy0
1
- (amin'ny alàlan'ny default) ho an'ny kilasy mametraka nymargin
orpadding
to$spacer * .25
2
- (amin'ny alàlan'ny default) ho an'ny kilasy mametraka nymargin
orpadding
to$spacer * .5
3
- (amin'ny alàlan'ny default) ho an'ny kilasy mametraka nymargin
orpadding
to$spacer
4
- (amin'ny alàlan'ny default) ho an'ny kilasy mametraka nymargin
orpadding
to$spacer * 1.5
5
- (amin'ny alàlan'ny default) ho an'ny kilasy mametraka nymargin
orpadding
to$spacer * 3
auto
- ho an'ny kilasy izay mametraka nymargin
auto
(Azonao atao ny manampy habe bebe kokoa amin'ny alàlan'ny fampidirana ny fidirana amin'ny $spacers
fari-piainan'ny sari-tany Sass.)
OHATRA
Ireto misy ohatra sasantsasany amin'ireo kilasy ireo:
.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;
}
Ivontoerana mitsivalana
Fanampin'izany, ny Bootstrap dia misy ihany koa ny .mx-auto
kilasy ho an'ny atiny mitsivalana afovoany amin'ny haavon'ny sakana raikitra—izany hoe, votoaty misy display: block
sy andiana iray width
—amin'ny alàlan'ny fametrahana ny sisiny marindrano amin'ny auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
sisiny ratsy
Ao amin'ny CSS, margin
ny fananana dia afaka mampiasa sanda ratsy ( padding
tsy afaka). Ireo sisiny ratsy ireo dia kilemaina amin'ny alàlan'ny default , saingy azo alefa ao amin'ny Sass amin'ny alàlan'ny fametrahana $enable-negative-margins: true
.
Ny syntax dia saika mitovy amin'ny default, fampiasa amin'ny sisiny tsara, fa miaraka amin'ny fanampiana n
alohan'ny habe nangatahana. Ity misy kilasy ohatra iray mifanohitra amin'ny .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gap
Rehefa mampiasa display: grid
, dia azonao atao ny mampiasa gap
fitaovana ao amin'ny fitoeran-jiro ray aman-dreny. Izany dia afaka mitsitsy amin'ny tsy maintsy ampiana fampiasa amin'ny sisiny amin'ny singa tsirairay (zanak'ny display: grid
kaontenera). Ny fitaovana Gap dia mamaly amin'ny alàlan'ny default, ary novokarina tamin'ny alàlan'ny API fampiasanay, mifototra amin'ny $spacers
sarintany 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>
Ny fanohanana dia misy safidy mamaly ho an'ny teboka rehetra tapaka amin'ny grid Bootstrap, ary koa ny habe enina avy amin'ny $spacers
sari-tany ( 0
– 5
). Tsy misy .gap-auto
kilasy fampiasa satria mitovy amin'ny .gap-0
.
Sass
Maps
Ambara amin'ny alàlan'ny sari-tany Sass ny kojakojan'ny elanelana ary avy eo amboarina miaraka amin'ny API fampiasantsika.
$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
Ny kojakojan'ny elanelana dia nambara ao amin'ny API fampiasantsika ao amin'ny scss/_utilities.scss
. Ianaro ny fomba fampiasana ny utility 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
),