Razmak
Bootstrap uključuje širok raspon stenografskih odgovarajućih klasa korisnih margina, paddinga i praznina za izmjenu izgleda elementa.
Margine i ispuna
Dodijelite prilagođene vrijednosti margin
ili padding
vrijednosti elementu ili podskupu njegovih strana pomoću skraćenih klasa. Uključuje podršku za pojedinačna svojstva, sva svojstva te okomita i vodoravna svojstva. Klase su izgrađene od zadane Sass mape u rasponu od .25rem
do 3rem
.
Koristite li modul CSS Grid layout? Razmislite o korištenju uslužnog programa za praznine .
Notacija
Pomoćni programi za razmake koji se primjenjuju na sve prijelomne točke, od xs
do xxl
, u sebi nemaju kraticu prijelomne točke. To je zato što se te klase primjenjuju od min-width: 0
i prema gore i stoga nisu vezane medijskim upitom. Međutim, preostale prijelomne točke uključuju kraticu prijelomne točke.
Klase su imenovane u formatu {property}{sides}-{size}
za xs
i {property}{sides}-{breakpoint}-{size}
za sm
, md
, lg
, xl
i xxl
.
Kada je vlasništvo jedno od:
m
- za klase koje skupmargin
p
- za klase koje skuppadding
Gdje su strane jedno od:
t
- za razrede koji postavljajumargin-top
odnpadding-top
b
- za razrede koji postavljajumargin-bottom
odnpadding-bottom
s
- (početak) za klase koje 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 i*-left
i*-right
y
- za klase koje postavljaju i*-top
i*-bottom
- prazno - za klase koje postavljaju a
margin
ilipadding
na sve 4 strane elementa
Gdje je veličina jedno od sljedećeg:
0
- za klase koje eliminirajumargin
ilipadding
postavljanjem na0
1
- (prema zadanim postavkama) za klase koje postavljajumargin
ilipadding
na$spacer * .25
2
- (prema zadanim postavkama) za klase koje postavljajumargin
ilipadding
na$spacer * .5
3
- (prema zadanim postavkama) za klase koje postavljajumargin
ilipadding
na$spacer
4
- (prema zadanim postavkama) za klase koje postavljajumargin
ilipadding
na$spacer * 1.5
5
- (prema zadanim postavkama) 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 karte 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
Osim toga, Bootstrap također uključuje .mx-auto
klasu za vodoravno centriranje sadržaja na razini bloka fiksne širine—to jest, sadržaja koji ima display: block
i width
skup—postavljanjem vodoravnih 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). Te su negativne margine onemogućene prema zadanim postavkama , ali se mogu omogućiti u Sassu postavkom $enable-negative-margins: true
.
Sintaksa je gotovo ista kao kod zadanih uslužnih programa pozitivne margine, ali s 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
pomoćne programe na nadređenom mrežnom spremniku. Ovo može uštedjeti na dodavanju pomoćnih programa za margine pojedinačnim stavkama mreže (djeca display: grid
spremnika). Gap uslužni programi reagiraju prema zadanim postavkama i generiraju se putem našeg API-ja uslužnih programa, temeljenog na $spacers
Sass mapi.
<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 prijelomne točke Bootstrapove mreže, kao i šest veličina s $spacers
karte ( 0
– 5
). Ne postoji .gap-auto
klasa korisnosti jer je zapravo ista kao .gap-0
.
Sass
Karte
Pomoćni programi za razmake deklariraju se putem Sass mape i zatim generiraju s našim API-jem za pomoćne programe.
$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 pomoćne programe
Pomoćni programi razmaka deklarirani su u našem API-ju pomoćnih programa u scss/_utilities.scss
. Naučite kako koristiti API uslužnih programa.
"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
),