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 daude multimedia-kontsulta bati lotuta. 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.

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