Razmak
Bootstrap uključuje širok raspon uslužnih klasa margina, paddinga i praznina koje reaguju na stenografiju za promjenu izgleda elementa.
Margina i padding
Dodijelite prilagođene margin
ili padding
vrijednosti elementu ili podskupu njegovih strana sa skraćenim klasama. Uključuje podršku za pojedinačna svojstva, sva svojstva i vertikalna i horizontalna svojstva. Klase su izgrađene od zadane Sass mape u rasponu od .25rem
do 3rem
.
Koristite CSS Grid layout modul? Razmislite o korištenju uslužnog programa gap .
Notacija
Uslužni programi za razmak koji se primjenjuju na sve tačke prekida, od xs
do xxl
, nemaju skraćenicu za tačku prekida. To je zato što se te klase primjenjuju od min-width: 0
i naviše i stoga nisu vezane medijskim upitom. Preostale tačke prekida, međutim, uključuju skraćenicu tačke prekida.
Klase su imenovane koristeći format {property}{sides}-{size}
za xs
i {property}{sides}-{breakpoint}-{size}
za sm
, md
, lg
, xl
i xxl
.
Gdje je imovina jedno od:
m
- za nastavu koja je postavljenamargin
p
- za nastavu koja je postavljenapadding
Gdje je strana jedna od:
t
- za nastavu koja postavljamargin-top
ilipadding-top
b
- za nastavu koja postavljamargin-bottom
ilipadding-bottom
s
- (početak) za klase koje se postavljajumargin-left
ilipadding-left
u LTR,margin-right
ilipadding-right
u RTLe
- (kraj) za klase koje postavljajumargin-right
ilipadding-right
u LTR,margin-left
ilipadding-left
u RTLx
- za klase koje postavljaju oba*-left
i*-right
y
- za klase koje postavljaju oba*-top
i*-bottom
- prazno - za klase koje postavljaju a
margin
ilipadding
na sve 4 strane elementa
Gdje je veličina jedna od:
0
- za klase koje eliminišumargin
ilipadding
postavljanjem na0
1
- (podrazumevano) za klase koje postavljajumargin
ilipadding
na$spacer * .25
2
- (podrazumevano) za klase koje postavljajumargin
ilipadding
na$spacer * .5
3
- (podrazumevano) za klase koje postavljajumargin
ilipadding
na$spacer
4
- (podrazumevano) za klase koje postavljajumargin
ilipadding
na$spacer * 1.5
5
- (podrazumevano) za klase koje postavljajumargin
ilipadding
na$spacer * 3
auto
- za klase koje postavljajumargin
na auto
(Možete dodati više veličina dodavanjem unosa u $spacers
varijablu mape Sass.)
Primjeri
Evo nekoliko reprezentativnih primjera ovih klasa:
.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
Uz to, Bootstrap također uključuje .mx-auto
klasu za horizontalno centriranje sadržaja na nivou bloka fiksne širine – odnosno sadržaja koji ima display: block
i width
skup – postavljanjem horizontalnih margina na auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negativna margina
U CSS-u, margin
svojstva mogu koristiti negativne vrijednosti ( padding
ne mogu). Ove negativne margine su podrazumevano onemogućene , ali se mogu omogućiti u Sass-u podešavanjem $enable-negative-margins: true
.
Sintaksa je skoro ista kao zadani, pozitivni uslužni programi margine, ali sa dodatkom n
prije tražene veličine. Evo primjera klase koja je suprotna od .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Gap
Kada koristite display: grid
, možete koristiti gap
uslužne programe na roditeljskom grid kontejneru. Ovo može uštedjeti na dodavanju pomoćnih margina pojedinačnim stavkama mreže (djeca display: grid
kontejnera). Gap uslužni programi su prilagodljivi prema zadanim postavkama i generišu se preko našeg API-ja za pomoćne programe, na osnovu $spacers
Sass mape.
<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>
Podrška uključuje responzivne opcije za sve prelomne tačke Bootstrapa mreže, kao i šest veličina sa $spacers
mape ( 0
– 5
). Ne postoji .gap-auto
uslužna klasa jer je zapravo ista kao .gap-0
.
Sass
Mape
Uslužni programi za razmake se deklariraju preko Sass mape, a zatim se generiraju pomoću našeg uslužnog API-ja.
$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);
Utilities API
Uslužni programi za razmak deklarirani su u našem API-ju uslužnih programa u scss/_utilities.scss
. Naučite kako koristiti uslužni API.
"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
),