Razmik

Bootstrap vključuje široko paleto stenografskih odzivnih razredov pripomočkov za rob in oblazinjenje za spreminjanje videza elementa.

Kako deluje

Elementu ali podmnožici njegovih strani dodelite odzivno prijazne marginali paddingvrednosti s stenografskimi razredi. Vključuje podporo za posamezne lastnosti, vse lastnosti ter navpične in vodoravne lastnosti. Razredi so zgrajeni iz privzetega zemljevida Sass v razponu od .25remdo 3rem.

Notacija

Pripomočki za razmik, ki veljajo za vse prelomne točke, od xsdo xl, nimajo okrajšav prekinitvene točke. To je zato, ker se ti razredi uporabljajo od min-width: 0in navzgor in zato niso vezani na predstavnostno poizvedbo. Preostale mejne točke pa vključujejo okrajšavo mejne točke.

Razredi so poimenovani v obliki {property}{sides}-{size}za xsin {property}{sides}-{breakpoint}-{size}za sm, md, lgin xl.

Kadar je lastnina eno od:

m- za razrede, ki določajomargin
p- za razrede, ki določajopadding

Kjer je stran ena od:

t- za razrede, ki določajo margin-topozpadding-top
b- za razrede, ki določajo margin-bottomozpadding-bottom
l- za razrede, ki določajo margin-leftozpadding-left
r- za razrede, ki določajo margin-rightozpadding-right
x- za razrede, ki določajo tako *-leftin*-right
y- za razrede, ki določajo tako *-topin*-bottom
prazno - za razrede, ki nastavijo marginali paddingna vseh 4 straneh elementa

Kjer je velikost eno od:

0- za razrede, ki odpravijo marginali paddingz nastavitvijo na0
1- (privzeto) za razrede, ki nastavijo marginali paddingna$spacer * .25
2- (privzeto) za razrede, ki nastavijo marginali paddingna$spacer * .5
3- (privzeto) za razrede, ki nastavijo marginali paddingna$spacer
4- (privzeto) za razrede, ki nastavijo marginali paddingna$spacer * 1.5
5- (privzeto) za razrede, ki nastavijo marginali paddingna$spacer * 3
auto- za razrede, ki nastavijo marginna auto

(Dodate lahko več velikosti tako, da dodate vnose v $spacersspremenljivko zemljevida Sass.)

Primeri

Tukaj je nekaj reprezentativnih primerov teh razredov:

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

Horizontalno centriranje

Poleg tega Bootstrap vključuje tudi .mx-autorazred za vodoravno centriranje vsebine na ravni bloka s fiksno širino – to je vsebine, ki ima display: blockniz width– z nastavitvijo vodoravnih robov na auto.

Sredinski element

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