Tartea
Bootstrap-ek marjina, betegarri eta hutsunearen erabilgarritasun klase laburrak biltzen ditu elementu baten itxura aldatzeko.
Marjina eta betegarria
Esleitu responsive-friendly margin
edo padding
balioak elementu bati edo bere alboetako azpimultzo bati laburpen klaseekin. Banakako propietateen, propietate guztien eta propietate bertikal eta horizontalen euskarria barne hartzen du. Klaseak Sass mapa lehenetsi batetik eraikitzen .25rem
dira 3rem
.
CSS Grid diseinuaren modulua erabiltzen? Demagun hutsunearen erabilgarritasuna erabiltzea .
Notazioa
Eten-puntu guztiei aplikatzen zaizkien tarte-erabilgarritasunek, tik xs
, xxl
ez dute eten-puntuaren laburdurarik. Hau da, klase horiek batetik min-width: 0
eta gora aplikatzen direlako, eta, beraz, ez daudelako multimedia kontsulta bati lotzen. Gainerako eten-puntuek, ordea, eten-puntuaren laburdura dute.
{property}{sides}-{size}
Klaseei for xs
eta {property}{sides}-{breakpoint}-{size}
for formatua erabiliz izendatzen dira sm
, md
, lg
, xl
eta xxl
.
Non jabetza hauetako bat den:
m
- ezartzen diren klaseetarakomargin
p
- ezartzen diren klaseetarakopadding
Non alboetako bat da:
t
- ezartzen duten klaseetarakomargin-top
edopadding-top
b
- ezartzen duten klaseetarakomargin-bottom
edopadding-bottom
s
- (hasi) ezartzen duten klaseetarakomargin-left
edopadding-left
LTRn,margin-right
edopadding-right
RTLne
- (amaiera) ezartzen duten klaseetarakomargin-right
edopadding-right
LTRn,margin-left
edopadding-left
RTLnx
*-left
- biak eta biak ezartzen dituzten klaseetarako*-right
y
*-top
- biak eta biak ezartzen dituzten klaseetarako*-bottom
margin
hutsik - a edopadding
elementuaren 4 aldeetan ezartzen duten klaseetarako
Non tamaina hauetako bat den:
0
margin
- edo ezabatzen dutenpadding
klaseetarako0
1
- (lehenespenez)margin
edopadding
hau ezartzen duten klaseetarako$spacer * .25
2
- (lehenespenez)margin
edopadding
hau ezartzen duten klaseetarako$spacer * .5
3
- (lehenespenez)margin
edopadding
hau ezartzen duten klaseetarako$spacer
4
- (lehenespenez)margin
edopadding
hau ezartzen duten klaseetarako$spacer * 1.5
5
- (lehenespenez)margin
edopadding
hau ezartzen duten klaseetarako$spacer * 3
auto
margin
- Auto moduan ezartzen duten klaseetarako
(Tamaina gehiago gehi ditzakezu $spacers
Sass mapa aldagaiari sarrerak gehituta).
Adibideak
Hona hemen klase hauen adibide adierazgarri batzuk:
.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;
}
Zentraketa horizontala
Gainera, Bootstrap -ek .mx-auto
zabalera finkoko bloke-mailako edukia horizontalean zentratzeko klase bat ere barne hartzen du, hau da, edukia display: block
eta width
multzoa duena, ertz horizontalak ezarriz auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Marjina negatiboa
CSS-n, margin
propietateek balio negatiboak erabil ditzakete ( padding
ezin da). Marjina negatibo hauek lehenespenez desgaituta daude , baina Sass-en aktibatu daitezke ezarrita $enable-negative-margins: true
.
Sintaxia marjina positiboaren utilitate lehenetsien ia berdina da, baina n
eskatutako tamainaren aurretik gehituta. Hona hemen adibide baten kontrakoa den klase bat .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Hutsunea
Erabiltzean , sare nagusiko edukiontziko utilitateak display: grid
erabil ditzakezu . Honek sareko elementu indibidualetan ( edukiontzi gap
baten seme-alabak) marjina-utilitateak gehitu behar izatea aurreztu daiteke . display: grid
Gap utilitateek lehenespenez erantzuten dute, eta gure utilitateen APIaren bidez sortzen dira, $spacers
Sass mapan oinarrituta.
<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>
Laguntzak Bootstrap-en sareko eten-puntu guztietarako erantzun-aukerak biltzen ditu, baita $spacers
mapako sei tamaina ere ( 0
– 5
). Ez dago .gap-auto
erabilgarritasun-klaserik, modu eraginkorrean berdina baita .gap-0
.
Sass
Mapak
Tartetze utilitateak Sass maparen bidez deklaratzen dira eta, ondoren, gure utilitateen APIarekin sortzen dira.
$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 APIa
Tartetze utilitateak gure utilitateen APIan deklaratzen dira scss/_utilities.scss
. Ikasi utilitateen APIa erabiltzen.
"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
),