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 marĝenojn al auto.

Centrita elemento

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

Negativa marĝeno

En CSS, marginpropraĵoj povas utiligi negativajn valorojn ( paddingne povas). Ekde 4.2, ni aldonis negativajn marĝenservaĵojn por ĉiu ne-nula entjera grandeco listigita supre (ekz., 1, 2, 3, 4, 5). Ĉi tiuj utilecoj estas idealaj por agordi kradkolumnkanalojn trans rompopunktoj.

La sintakso estas preskaŭ la sama kiel la defaŭltaj, pozitivaj marĝenaj utilecoj, sed kun aldono de nantaŭ la petita grandeco. Jen ekzempla klaso kiu estas la malo de .mt-1:

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

Jen ekzemplo de personigo de la krado Bootstrap ĉe la meza ( md) rompopunkto kaj supre. Ni pliigis la .colremburaĵon per .px-md-5kaj poste kontraŭagis tion per .mx-md-n5sur la gepatro .row.

Propra kolumna kompletigo

<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>