Kosala esika oyo ezali na kati
Bootstrap ezali na ba classes ya utilité ya marge, padding, mpe gap oyo ezo répondre na stenographie ya ndenge na ndenge mpo na ko modifier apparence ya élément moko.
Marge na padding
Bopesa responsive-friendly margin
to padding
ba valeurs na élément to sous-ensemble ya ba côtés na yango na ba classes ya stenographie. Esangisi lisungi ya ba propriétés moko moko, ba propriétés nionso, mpe ba propriétés verticales mpe horizontales. Ba kelasi etongami uta na karte ya Sass ya liboso oyo ebandi na .25rem
kino na 3rem
.
Kosalela module ya layout ya Grille CSS? Kanisá kosalela utilitaire ya gap .
Notation ya kokoma
Ba utilitaires ya espacement oyo etali ba points de rupture nionso, kobanda xs
na xxl
, ezali na abréviation ya point de rupture te na kati na yango. Yango ezali mpo ete bakelasi wana esalelamaka uta min-width: 0
mpe likolo, mpe bongo ekangami te na motuna ya media. Nzokande, ba points de rupture oyo etikali ezali na abréviation ya point de rupture.
Ba kelasi epesameli nkombo na kosalelaka format {property}{sides}-{size}
mpo na xs
mpe {property}{sides}-{breakpoint}-{size}
mpo na sm
, md
, lg
, xl
, mpe xxl
.
Epayi wapi biloko ezali moko ya:
m
- pona ba classes oyo ezo setmargin
p
- pona ba classes oyo ezo setpadding
Epayi wapi mipanzi ezali moko ya:
t
- mpo na bakelasi oyo etiemargin-top
topadding-top
b
- mpo na bakelasi oyo etiemargin-bottom
topadding-bottom
s
- (kobanda) pona ba classes oyo etiemargin-left
topadding-left
na LTR,margin-right
topadding-right
na RTLe
- (suka) pona ba classes oyo etiemargin-right
topadding-right
na LTR,margin-left
topadding-left
na RTLx
- mpo na bakelasi oyo etie nyonso mibale*-left
mpe*-right
y
- mpo na bakelasi oyo etie nyonso mibale*-top
mpe*-bottom
- blank - pona ba classes oyo etie a
margin
topadding
na ba côtés nionso 4 ya élément
Epayi wapi bonene ezali moko ya:
0
- mpo na bakelasi oyo elongolakamargin
topadding
na kotiaka yango na0
1
- (par défaut) mpo na ba classes oyo etiemargin
topadding
na$spacer * .25
2
- (par défaut) mpo na ba classes oyo etiemargin
topadding
na$spacer * .5
3
- (par défaut) mpo na ba classes oyo etiemargin
topadding
na$spacer
4
- (par défaut) mpo na ba classes oyo etiemargin
topadding
na$spacer * 1.5
5
- (par défaut) mpo na ba classes oyo etiemargin
topadding
na$spacer * 3
auto
- mpo na bakelasi oyo etyakamargin
na auto
(Okoki kobakisa ba taille mosusu na kobakisa ba entrées na $spacers
variable ya carte Sass.)
Bandakisa
Talá mwa bandakisa oyo ezali komonisa bakelasi yango:
.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;
}
Centrée horizontale
En plus, Bootstrap ezali mpe na .mx-auto
classe moko mpo na ko centrer horizontalement contenus ya niveau ya bloc ya largeur fixe —elingi koloba, contenus oyo ezali na yango display: block
mpe width
ensemble moko —na kotiaka ba marges horizontales na auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Marge ya négatif
Na CSS, margin
ba propriétés ekoki kosalela ba valeurs négatives ( padding
ekoki te). Ba marges oyo ya mabe ezali désactivé par défaut , kasi ekoki kozala activé na Sass na paramètre $enable-negative-margins: true
.
Syntaxe ezali pene na ndenge moko na ba utilitaires ya marge ya défaut, ya malamu, kasi na kobakisa ya n
liboso ya bonene oyo esengami. Tala classe ya exemple oyo ezali opposé na .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Bokeseni
Ntango ozali kosalela display: grid
, okoki kosalela ba gap
utilitaires na conteneur ya grille parent. Yango ekoki kobomba na kozala na mposa ya kobakisa ba utilitaires ya marge na biloko ya grille moko moko (bana ya display: grid
conteneur). Ba utilitaires ya gap ezali responsive par défaut, mpe esalemi na nzela ya API ya ba utilitaires na biso, na kotalela $spacers
carte ya 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>
Lisungi ezali na ba options ya eyano mpo na ba points de rupture ya grille nionso ya Bootstrap, mpe lisusu ba taille motoba uta na $spacers
carte ( 0
– 5
). Classe ya utilité ezali te .gap-auto
lokola ezali efficacement ndenge moko na .gap-0
.
Sass oyo azali
Bakarte
Ba utilitaires ya espacement e déclaré via carte Sass et puis e généré na API ya ba utilitaires na biso.
$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 ya ba utilitaires
Ba utilitaires ya espacement esakolami na API ya ba utilitaires na biso na scss/_utilities.scss
. Yekola ndenge ya kosalela API ya ba utilitaires.
"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
),