Térköz
A Bootstrap a gyorsított reszponzív margók, padding és gap hasznossági osztályok széles skáláját tartalmazza az elemek megjelenésének módosításához.
Margó és padding
Rendeljen reszponzív-barát margin
vagy padding
értékeket egy elemhez vagy oldalainak egy részhalmazához gyorsírási osztályokkal. Tartalmazza az egyes tulajdonságok, az összes tulajdonság, valamint a függőleges és vízszintes tulajdonságok támogatását. Az osztályok egy alapértelmezett Sass térképből épülnek .25rem
fel 3rem
.
Használja a CSS Grid elrendezési modult? Fontolja meg a gap segédprogram használatát .
Jelölés
Az összes töréspontra, tól xs
-ig érvényes térköz segédprogramok xxl
nem tartalmaznak töréspont-rövidítést. Ennek az az oka, hogy ezeket az osztályokat a rendszer elölről min-width: 0
és felfelé alkalmazza, és így nem köti őket médialekérdezés. A fennmaradó töréspontok azonban tartalmaznak egy töréspont-rövidítést.
Az osztályok elnevezése a következő formátumban történik {property}{sides}-{size}
: xs
, {property}{sides}-{breakpoint}-{size}
, sm
, md
, lg
és xl
.xxl
Ahol az ingatlan a következők egyike:
m
- az osztályokhoz, amelyek megmargin
p
- az osztályokhoz, amelyek megpadding
Ahol az oldalak valamelyike:
t
- osztályoknak, amelyek beállítjákmargin-top
illpadding-top
b
- osztályoknak, amelyek beállítjákmargin-bottom
illpadding-bottom
s
- (start) olyan osztályokhoz, amelyek LTR-ben vagymargin-left
RTL - ben vannak beállítvapadding-left
margin-right
padding-right
e
- (vége) az LTR-ben vagymargin-right
az RTL- ben beállított osztályokhozpadding-right
margin-left
padding-left
x
- azokhoz az osztályokhoz, amelyek beállítják a*-left
és a*-right
y
- azokhoz az osztályokhoz, amelyek beállítják a*-top
és a*-bottom
- üres - azokhoz az osztályokhoz, amelyek egy
margin
vagypadding
az elem mind a 4 oldalára állítanak be
Ahol a méret a következők egyike:
0
- azoknál az osztályoknál, amelyek megszüntetik amargin
vagypadding
beállításával0
1
- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek amargin
vagy -ot állítjákpadding
be$spacer * .25
2
- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek amargin
vagy -ot állítjákpadding
be$spacer * .5
3
- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek amargin
vagy -ot állítjákpadding
be$spacer
4
- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek amargin
vagy -ot állítjákpadding
be$spacer * 1.5
5
- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek amargin
vagy -ot állítjákpadding
be$spacer * 3
auto
- azokhoz az osztályokhoz, amelyek azmargin
auto
(További méreteket adhat hozzá, ha bejegyzéseket ad hozzá a $spacers
Sass térképváltozóhoz.)
Példák
Íme néhány reprezentatív példa ezekre az osztályokra:
.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;
}
Vízszintes központosítás
Ezenkívül a Bootstrap egy .mx-auto
osztályt is tartalmaz a rögzített szélességű blokkszintű tartalom vízszintes központosítására – azaz a tartalommal display: block
és egy width
készlettel – a vízszintes margók értékre állításával auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negatív margó
A CSS-ben a margin
tulajdonságok negatív értékeket használhatnak ( padding
nem). Ezek a negatív margók alapértelmezés szerint le vannak tiltva , de a Sass-ban a beállítással engedélyezhetők $enable-negative-margins: true
.
A szintaxis majdnem megegyezik az alapértelmezett pozitív margó segédprogramokéval, de n
a kért méret előtt hozzáadva a következőt. Íme egy példaosztály, amely az ellenkezője .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Rés
A használatakor display: grid
használhatja gap
a szülő rácstároló segédprogramjait. Ezzel megspórolhatja, hogy az egyes rácselemekhez (a display: grid
konténer gyermekeihez) margin segédprogramokat kelljen hozzáadnia. A Gap segédprogramok alapértelmezés szerint érzékenyek, és a segédprogramok API-n keresztül jönnek létre, a $spacers
Sass térkép alapján.
<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>
A támogatás a Bootstrap összes rács-töréspontjához, valamint hat méretet tartalmaz a $spacers
térképen ( 0
– 5
). Nincs .gap-auto
hasznossági osztály, mivel gyakorlatilag megegyezik a .gap-0
.
Sass
Térképek
A térközi segédprogramokat a Sass térképen keresztül deklarálják, majd a segédprogramok API-jával generálják.
$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
A térközű segédprogramok a segédprogramok API-ban vannak deklarálva a következőben: scss/_utilities.scss
. Ismerje meg a segédprogramok API használatát.
"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
),