Medzery
Bootstrap obsahuje širokú škálu tried rýchlo reagujúcich margin, padding a gap na úpravu vzhľadu prvku.
Okraj a výplň
Priraďte k prvku alebo podmnožine jeho strán pomocou tried skratiek responzívny prístup margin
alebo hodnoty. padding
Zahŕňa podporu pre jednotlivé vlastnosti, všetky vlastnosti a vertikálne a horizontálne vlastnosti. Triedy sú zostavené z predvolenej mapy Sass v rozsahu od .25rem
do 3rem
.
Používate modul rozloženia mriežky CSS? Zvážte použitie pomôcky gap .
Notový zápis
Pomôcky na vytváranie medzier, ktoré sa vzťahujú na všetky body prerušenia, od xs
do xxl
nemajú v sebe žiadnu skratku bodu prerušenia. Je to preto, že tieto triedy sú aplikované od min-width: 0
a vyššie, a teda nie sú viazané dopytom na médiá. Zostávajúce body prerušenia však obsahujú skratku bodu prerušenia.
Triedy sú pomenované pomocou formátu {property}{sides}-{size}
pre xs
a {property}{sides}-{breakpoint}-{size}
pre sm
, md
, lg
, xl
a xxl
.
Ak je nehnuteľnosť jednou z:
m
- pre triedy, ktoré nastavujúmargin
p
- pre triedy, ktoré nastavujúpadding
Kde strany sú jednou z:
t
- pre triedy, ktoré stanovujúmargin-top
resppadding-top
b
- pre triedy, ktoré stanovujúmargin-bottom
resppadding-bottom
s
- (začiatok) pre triedy, ktoré nastavujúmargin-left
alebopadding-left
v LTR,margin-right
alebopadding-right
v RTLe
- (koniec) pre triedy, ktoré nastavujúmargin-right
alebopadding-right
v LTR,margin-left
alebopadding-left
v RTLx
- pre triedy, ktoré nastavujú*-left
aj*-right
y
- pre triedy, ktoré nastavujú*-top
aj*-bottom
- prázdne - pre triedy, ktoré nastavujú a
margin
alebopadding
na všetkých 4 stranách prvku
Kde veľkosť je jedna z:
0
- pre triedy, ktoré eliminujúmargin
alebopadding
nastavením na0
1
- (predvolene) pre triedy, ktoré nastavujúmargin
alebopadding
na$spacer * .25
2
- (predvolene) pre triedy, ktoré nastavujúmargin
alebopadding
na$spacer * .5
3
- (predvolene) pre triedy, ktoré nastavujúmargin
alebopadding
na$spacer
4
- (predvolene) pre triedy, ktoré nastavujúmargin
alebopadding
na$spacer * 1.5
5
- (predvolene) pre triedy, ktoré nastavujúmargin
alebopadding
na$spacer * 3
auto
- pre triedy, ktoré nastavujúmargin
na auto
(Viac veľkostí môžete pridať pridaním položiek do $spacers
premennej mapy Sass.)
Príklady
Tu je niekoľko reprezentatívnych príkladov týchto tried:
.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;
}
Horizontálne centrovanie
Bootstrap navyše obsahuje aj .mx-auto
triedu na horizontálne centrovanie obsahu na úrovni bloku s pevnou šírkou – teda obsahu, ktorý má display: block
a width
množinu – nastavením horizontálnych okrajov na auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Záporná marža
V CSS môžu margin
vlastnosti využívať záporné hodnoty ( padding
nemôže). Tieto záporné okraje sú predvolene vypnuté , ale v Sass ich možno povoliť nastavením $enable-negative-margins: true
.
Syntax je takmer rovnaká ako predvolené nástroje s kladnou maržou, ale s pridaním n
pred požadovanú veľkosť. Tu je príklad triedy, ktorá je opakom .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Medzera
Pri použití display: grid
, môžete využiť gap
pomocné programy na rodičovskom mriežkovom kontajneri. To môže ušetriť na pridávaní pomocných nástrojov okrajov k jednotlivým položkám mriežky (deti display: grid
kontajnera). Pomôcky Gap sú predvolene responzívne a sú generované prostredníctvom nášho API nástrojov na základe $spacers
mapy 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 zahŕňa možnosti odozvy pre všetky body prerušenia mriežky Bootstrapu, ako aj šesť veľkostí z $spacers
mapy ( 0
– 5
). Neexistuje žiadna .gap-auto
pomocná trieda, pretože je v podstate rovnaká ako .gap-0
.
Sass
Mapy
Pomôcky na vytváranie rozstupov sa deklarujú prostredníctvom mapy Sass a potom sa generujú pomocou nášho rozhrania API pre nástroje.
$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
Pomôcky na vytváranie rozstupov sú deklarované v našom rozhraní API pre nástroje v scss/_utilities.scss
. Zistite, ako používať pomocné rozhranie 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
),