Välit
Bootstrap sisältää laajan valikoiman lyhennettyjä responsiivisia marginaaleja ja täytteisiä hyödyllisyysluokkia elementin ulkoasun muokkaamiseksi.
Kuinka se toimii
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
.
Merkintä
Kaikkiin keskeytyspisteisiin soveltuvissa välitysapuohjelmissa alkaen xs
- xl
, 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 käyttämällä muotoa ja {property}{sides}-{size}
for xs
ja {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, ja xl
.
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
l
- luokille, jotka asettavatmargin-left
taipadding-left
r
- luokille, jotka asettavatmargin-right
taipadding-right
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;
}
.ml-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). 4.2:sta lähtien olemme lisänneet negatiivisen marginaalin apuohjelmat jokaiselle yllä luetellulle nollasta poikkeavalle kokonaislukukoolle (esim. , 1
, 2
, 3
, ). Nämä apuohjelmat sopivat ihanteellisesti ruudukon pylväskourujen mukauttamiseen keskeytyspisteiden välillä.4
5
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;
}
Tässä on esimerkki Bootstrap-ruudukon mukauttamisesta keskitason ( md
) keskeytyspisteessä ja sitä korkeammalla. Olemme lisänneet .col
pehmustetta -sovelluksella .px-md-5
ja vastanneet sitä sitten .mx-md-n5
vanhemmalla .row
.
<div class="row mx-md-n5">
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>