Source

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>

Negativna marža

V CSS lahko marginlastnosti uporabljajo negativne vrednosti ( paddingne morejo). Od 4.2 naprej smo dodali pripomočke za negativno maržo za vse velikosti celega števila, ki niso nič, in so navedene zgoraj (npr. , , 1, 2, 3) . Ti pripomočki so idealni za prilagajanje žlebov mrežnih stolpcev prek prelomnih točk.45

Sintaksa je skoraj enaka privzetim pripomočkom s pozitivno maržo, vendar z dodatkom npred zahtevano velikostjo. Tukaj je primer razreda, ki je nasproten od .mt-1:

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

Tukaj je primer prilagajanja mreže Bootstrap na srednji ( md) prelomni točki in več. Povečali smo .coloblazinjenje z .px-md-5in nato to preprečili z .mx-md-n5nadrejenim .row.

Oblazinjenje stolpcev po meri

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