Source

Välit

Bootstrap sisältää laajan valikoiman lyhennettyjä responsiivisia marginaaleja ja täytteisiä hyödyllisyysluokkia elementin ulkoasun muokkaamiseksi.

Kuinka se toimii

Määritä responsiivisuus margintai paddingarvot 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: 0ja 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 xsja {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 asettavat margin-toptaipadding-top
b- luokille, jotka asettavat margin-bottomtaipadding-bottom
l- luokille, jotka asettavat margin-lefttaipadding-left
r- luokille, jotka asettavat margin-righttaipadding-right
x- luokille, jotka asettavat sekä *-leftja*-right
y- luokille, jotka asettavat sekä *-topja*-bottom
tyhjä - luokille, jotka asettavat elementin a margintai paddingkaikille 4 sivulle

Jos koko on jokin seuraavista:

0- luokille, jotka poistavat margintai paddingasettamalla sen0
1- (oletuksena) luokille, jotka asettavat - margintai padding-arvon$spacer * .25
2- (oletuksena) luokille, jotka asettavat - margintai padding-arvon$spacer * .5
3- (oletuksena) luokille, jotka asettavat - margintai padding-arvon$spacer
4- (oletuksena) luokille, jotka asettavat - margintai padding-arvon$spacer * 1.5
5- (oletuksena) luokille, jotka asettavat - margintai padding-arvon$spacer * 3
auto- luokille, jotka asettavat marginarvoksi automaattinen

(Voit lisätä kokoja lisäämällä merkintöjä $spacersSass-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-autoluokan kiinteän leveyden lohkotason sisällön vaakasuoraan keskittämiseen – eli sisällön, jolla on display: blockja widthjoukko – asettamalla vaakamarginaalit arvoon auto.

Keskitetty elementti

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Negatiivinen marginaali

CSS:ssä marginominaisuudet voivat käyttää negatiivisia arvoja ( paddingei 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ä.45

Syntaksi on lähes sama kuin oletusarvoiset positiivisen marginaalin apuohjelmat, mutta lisättynä nennen 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 .colpehmustetta -sovelluksella .px-md-5ja vastanneet sitä sitten .mx-md-n5vanhemmalla .row.

Mukautettu sarakkeen täyte

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>