Interspacigo

Bootstrap inkluzivas ampleksan gamon de stenografio-respondemaj marĝenoj kaj kompletigaj utilecaj klasoj por modifi la aspekton de elemento.

Kiel ĝi funkcias

Asignu respondemajn amikajn marginaŭ paddingvalorojn al elemento aŭ subaro de ĝiaj flankoj kun stenografioklasoj. Inkluzivas subtenon por individuaj propraĵoj, ĉiuj propraĵoj, kaj vertikalaj kaj horizontalaj propraĵoj. Klasoj estas konstruitaj de defaŭlta Sass-mapo intervalanta de .25remĝis 3rem.

Notacio

Interspacaj iloj kiuj validas por ĉiuj rompopunktoj, de xsĝis xl, havas neniun rompopunktomallongigon en ili. Ĉi tio estas ĉar tiuj klasoj estas aplikataj de min-width: 0kaj supren, kaj tiel ne estas ligitaj per amaskomunikila demando. La ceteraj rompopunktoj tamen inkluzivas mallongpunkton.

La klasoj estas nomitaj uzante la formaton {property}{sides}-{size}por xskaj {property}{sides}-{breakpoint}-{size}por sm, md, lg, kaj xl.

Kie posedaĵo estas unu el:

• m- por klasoj kiuj starigismargin
• p- por klasoj kiuj starigispadding

Kie flankoj estas unu el:

• t- por klasoj kiuj starigas margin-topaŭpadding-top
• b- por klasoj kiuj starigas margin-bottomaŭpadding-bottom
• l- por klasoj kiuj starigas margin-leftaŭpadding-left
• r- por klasoj kiuj starigas margin-rightaŭpadding-right
• x- por klasoj kiuj starigas ambaŭ *-leftkaj*-right
• y- por klasoj kiuj starigas ambaŭ *-topkaj*-bottom
• malplena - por klasoj kiuj starigas a marginaŭ paddingsur ĉiuj 4 flankoj de la elemento

Kie grandeco estas unu el:

• 0- por klasoj kiuj forigas la marginaŭ paddingagordante ĝin al0
• 1- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer * .25
• 2- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer * .5
• 3- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer
• 4- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer * 1.5
• 5- (defaŭlte) por klasoj kiuj fiksas la marginaŭ paddingal$spacer * 3
• auto- por klasoj kiuj agordas la marginal aŭtomata

(Vi povas aldoni pliajn grandecojn aldonante enskribojn al la $spacersSass-mapo-variablo.)

Ekzemploj

Jen kelkaj reprezentaj ekzemploj de ĉi tiuj klasoj:

.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;
}

Horizontala centrado

Aldone, Bootstrap ankaŭ inkluzivas .mx-autoklason por horizontale centrado de fiks-larĝa bloknivela enhavo—tio estas, enhavo kiu havas display: blockkaj widtharon—agordante la horizontalajn randojn al auto.

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