Tartea

Bootstrap-ek marjina erantzuteko laburdura eta betegarrizko erabilgarritasun-klase ugari biltzen ditu elementu baten itxura aldatzeko.

Nola dabil

Esleitu responsive-friendly marginedo paddingbalioak 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 .25remdira 3rem.

Notazioa

Eten-puntu guztiei aplikatzen zaizkien tarte-erabilgarritasunek, tik xs, xlez dute eten-puntuaren laburdurarik. Hau da, klase horiek batetik min-width: 0eta gora aplikatzen direlako, eta, beraz, ez daudelako multimedia kontsulta bati lotzen. Gainerako eten-puntuek, ordea, eten-puntuaren laburdura dute.

{property}{sides}-{size}Klaseei for xseta {property}{sides}-{breakpoint}-{size}for formatua erabiliz izendatzen dira sm, md, lg, eta xl.

Non jabetza hauetako bat den:

m- ezartzen diren klaseetarakomargin
p- ezartzen diren klaseetarakopadding

Non alboetako bat da:

t- ezartzen duten klaseetarako margin-topedopadding-top
b- ezartzen duten klaseetarako margin-bottomedopadding-bottom
l- ezartzen duten klaseetarako margin-leftedopadding-left
r- ezartzen duten klaseetarako margin-rightedopadding-right
x*-left- biak eta biak ezartzen dituzten klaseetarako*-right
y*-top- biak eta biak ezartzen dituzten klaseetarako*-bottom
marginhutsik - a edo paddingelementuaren 4 aldeetan ezartzen duten klaseetarako

Non tamaina hauetako bat den:

0margin- edo ezabatzen duten paddingklaseetarako0
1- (lehenespenez) marginedo paddinghau ezartzen duten klaseetarako$spacer * .25
2- (lehenespenez) marginedo paddinghau ezartzen duten klaseetarako$spacer * .5
3- (lehenespenez) marginedo paddinghau ezartzen duten klaseetarako$spacer
4- (lehenespenez) marginedo paddinghau ezartzen duten klaseetarako$spacer * 1.5
5- (lehenespenez) marginedo paddinghau ezartzen duten klaseetarako$spacer * 3
automargin- Auto moduan ezartzen duten klaseetarako

(Tamaina gehiago gehi ditzakezu $spacersSass mapa aldagaiari sarrerak gehituta).

Adibideak

Hona hemen klase hauen adibide adierazgarri batzuk:

.mt-0 {
  margin-top: 0 !important;
}

.ml-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-autozabalera finkoko bloke-mailako edukia horizontalean zentratzeko klase bat ere barne hartzen du, hau da, edukia display: blocketa widthmultzoa duena, ertz horizontalak ezarriz auto.

Zentratutako elementua

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Marjina negatiboa

CSS-n, marginpropietateek balio negatiboak erabil ditzakete ( paddingezin da). 4.2-tik aurrera, marjina negatiboen erabilgarritasunak gehitu ditugu goian zerrendatutako zenbaki oso-tamaina ez-zero bakoitzeko (adibidez, 1, 2, 3, 4, 5). Utilitate hauek aproposak dira sareko zutabeen erretenak eten-puntuetan pertsonalizatzeko.

Sintaxia marjina positiboaren utilitate lehenetsien ia berdina da, baina neskatutako tamainaren aurretik gehituta. Hona hemen adibide baten kontrakoa den klase bat .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Hona hemen Bootstrap sarea pertsonalizatzeko adibide bat ( md) eten puntu ertainean eta goian. .colBetegarria handitu dugu .px-md-5eta, ondoren, horri aurre egin diogu .mx-md-n5gurasoari .row.

Zutabeen betegarri pertsonalizatua

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>