Razmik
Bootstrap vključuje široko paleto stenografskih odzivnih razredov pripomočkov za rob, oblazinjenje in vrzel za spreminjanje videza elementa.
Rob in oblazinjenje
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
.
Uporabljate modul postavitve CSS Grid? Razmislite o uporabi pripomočka za vrzel .
Notacija
Pripomočki za razmik, ki veljajo za vse prelomne točke, od xs
do xxl
, 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
, xl
in xxl
.
Če je lastnina eno od:
m
- za razrede, ki določajomargin
p
- za razrede, ki določajopadding
Kjer je stran eno od:
t
- za razrede, ki določajomargin-top
ozpadding-top
b
- za razrede, ki določajomargin-bottom
ozpadding-bottom
s
- (začetek) za razrede, ki so nastavljenimargin-left
alipadding-left
v LTRmargin-right
alipadding-right
v RTLe
- (konec) za razrede, ki so nastavljenimargin-right
alipadding-right
v LTRmargin-left
alipadding-left
v RTLx
- 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;
}
.ms-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). Te negativne marže so privzeto onemogočene , vendar jih je mogoče omogočiti v Sass z nastavitvijo $enable-negative-margins: true
.
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;
}
Gap
Ko uporabljate display: grid
, lahko uporabite gap
pripomočke v vsebniku nadrejene mreže. To lahko prihrani pri dodajanju pripomočkov za marže posameznim mrežnim elementom (otrokom display: grid
vsebnika). Pripomočki Gap so privzeto odzivni in se ustvarijo prek našega API-ja za pripomočke, ki temelji na $spacers
zemljevidu Sass.
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
Podpora vključuje odzivne možnosti za vse prelomne točke mreže Bootstrap, kot tudi šest velikosti iz $spacers
zemljevida ( 0
– 5
). Ni .gap-auto
razreda uporabnosti, saj je dejansko enak .gap-0
.
Sass
Zemljevidi
Pripomočki za razmik so deklarirani prek zemljevida Sass in nato ustvarjeni z našim API-jem za pripomočke.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
API za pripomočke
Pripomočki za razmik so navedeni v našem API-ju za pripomočke v scss/_utilities.scss
. Naučite se uporabljati API za pripomočke.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),