Välit
Bootstrap sisältää laajan valikoiman lyhennettyjen responsiivisten marginaalien, täytteiden ja aukkojen hyödyllisyysluokkia elementin ulkoasun muokkaamiseksi.
Marginaali ja täyte
Määritä responsiivisuus margin
tai padding
arvot elementille tai sen sivujen osajoukolle pikakirjoitusluokilla. Sisältää tuen yksittäisille ominaisuuksille, kaikille ominaisuuksille sekä pysty- ja vaakasuuntaisille ominaisuuksille. Luokat on rakennettu oletusarvoisesta Sass-kartasta, joka vaihtelee välillä .25rem
- 3rem
.
Käytätkö CSS Grid -asettelumoduulia? Harkitse aukko-apuohjelman käyttöä .
Merkintä
Kaikkiin keskeytyspisteisiin soveltuvissa välitysapuohjelmissa alkaen xs
- xxl
, ei ole keskeytyspistelyhennettä. Tämä johtuu siitä, että näitä luokkia sovelletaan alkaen min-width: 0
ja ylöspäin, joten mediakysely ei sido niitä. Loput keskeytyspisteet sisältävät kuitenkin keskeytyspisteen lyhenteen.
Luokat on nimetty muodossa ja {property}{sides}-{size}
for xs
ja {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, xl
, ja xxl
.
Kun omaisuus on jokin seuraavista:
m
- luokille, jotka asettavatmargin
p
- luokille, jotka asettavatpadding
Missä puolit ovat yksi seuraavista:
t
- luokille, jotka asettavatmargin-top
taipadding-top
b
- luokille, jotka asettavatmargin-bottom
taipadding-bottom
s
- (aloitus) luokille, jotka asetetaan LTR: ssä taimargin-left
RTL :ssäpadding-left
margin-right
padding-right
e
- (loppu) luokille, jotka asetetaan LTR: ssä taimargin-right
RTL :ssäpadding-right
margin-left
padding-left
x
- luokille, jotka asettavat sekä*-left
ja*-right
y
- luokille, jotka asettavat sekä*-top
ja*-bottom
- tyhjä - luokille, jotka asettavat elementin a
margin
taipadding
kaikille 4 sivulle
Jos koko on jokin seuraavista:
0
- luokille, jotka poistavatmargin
taipadding
asettamalla sen0
1
- (oletuksena) luokille, jotka asettavat -margin
taipadding
-arvon$spacer * .25
2
- (oletuksena) luokille, jotka asettavat -margin
taipadding
-arvon$spacer * .5
3
- (oletuksena) luokille, jotka asettavat -margin
taipadding
-arvon$spacer
4
- (oletuksena) luokille, jotka asettavat -margin
taipadding
-arvon$spacer * 1.5
5
- (oletuksena) luokille, jotka asettavat -margin
taipadding
-arvon$spacer * 3
auto
- luokille, jotka asettavatmargin
arvoksi automaattinen
(Voit lisätä kokoja lisäämällä merkintöjä $spacers
Sass-karttamuuttujaan.)
Esimerkkejä
Tässä on joitain edustavia esimerkkejä näistä luokista:
.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;
}
Vaakasuora keskitys
Lisäksi Bootstrap sisältää myös .mx-auto
luokan kiinteän leveyden lohkotason sisällön vaakasuoraan keskittämiseen – eli sisällön, jolla on display: block
ja width
joukko – asettamalla vaakamarginaalit arvoon auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negatiivinen marginaali
CSS:ssä margin
ominaisuudet voivat käyttää negatiivisia arvoja ( padding
ei voi). Nämä negatiiviset marginaalit ovat oletuksena pois käytöstä , mutta ne voidaan ottaa käyttöön Sassissa asettamalla $enable-negative-margins: true
.
Syntaksi on lähes sama kuin oletusarvoiset positiivisen marginaalin apuohjelmat, mutta lisättynä n
ennen pyydettyä kokoa. Tässä on esimerkkiluokka, joka on päinvastainen .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
aukko
Kun käytät display: grid
, voit hyödyntää gap
ylätason ruudukon säiliön apuohjelmia. Tämä voi säästää marginaaliapuohjelmien lisäämistä yksittäisiin ruudukkokohteisiin ( display: grid
kontin lapsiin). Gap-apuohjelmat reagoivat oletusarvoisesti, ja ne luodaan apuohjelmien API:n kautta $spacers
Sass-kartan perusteella.
<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>
Tuki sisältää responsiiviset vaihtoehdot kaikille Bootstrapin ruudukon keskeytyspisteille sekä kuusi kokoa $spacers
kartasta ( 0
– 5
). Hyötyluokkaa ei ole .gap-auto
, koska se on käytännössä sama kuin .gap-0
.
Sass
Kartat
Väliapuohjelmat ilmoitetaan Sass-kartan kautta ja luodaan sitten apuohjelmien API:lla.
$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
Väliapuohjelmat on ilmoitettu apuohjelmien API:ssa scss/_utilities.scss
. Opi käyttämään apuohjelmien sovellusliittymää.
"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
),