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 margin
ali padding
vrednosti 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 .25rem
do 3rem
.
Notacija
Pripomočki za razmik, ki veljajo za vse prelomne točke, od xs
do xl
, nimajo okrajšav prekinitvene točke. To je zato, ker se ti razredi uporabljajo od min-width: 0
in 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 xs
in {property}{sides}-{breakpoint}-{size}
za sm
, md
, lg
in 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čajomargin-top
ozpadding-top
b
- za razrede, ki določajomargin-bottom
ozpadding-bottom
l
- za razrede, ki določajomargin-left
ozpadding-left
r
- za razrede, ki določajomargin-right
ozpadding-right
x
- za razrede, ki določajo tako*-left
in*-right
y
- za razrede, ki določajo tako*-top
in*-bottom
- prazno - za razrede, ki nastavijo
margin
alipadding
na vseh 4 straneh elementa
Kjer je velikost eno od:
0
- za razrede, ki odpravijomargin
alipadding
z nastavitvijo na0
1
- (privzeto) za razrede, ki nastavijomargin
alipadding
na$spacer * .25
2
- (privzeto) za razrede, ki nastavijomargin
alipadding
na$spacer * .5
3
- (privzeto) za razrede, ki nastavijomargin
alipadding
na$spacer
4
- (privzeto) za razrede, ki nastavijomargin
alipadding
na$spacer * 1.5
5
- (privzeto) za razrede, ki nastavijomargin
alipadding
na$spacer * 3
auto
- za razrede, ki nastavijomargin
na auto
(Dodate lahko več velikosti tako, da dodate vnose v $spacers
spremenljivko 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-auto
razred za vodoravno centriranje vsebine na ravni bloka s fiksno širino – to je vsebine, ki ima display: block
niz width
– z nastavitvijo vodoravnih robov na auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negativna marža
V CSS lahko margin
lastnosti uporabljajo negativne vrednosti ( padding
ne 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.4
5
Sintaksa je skoraj enaka privzetim pripomočkom s pozitivno maržo, vendar z dodatkom n
pred 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 .col
oblazinjenje z .px-md-5
in nato to preprečili z .mx-md-n5
nadrejenim .row
.
<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>