Välit

Bootstrap sisältää laajan valikoiman lyhennettyjä responsiivisia marginaaliluokkia ja täytettäviä hyödyllisyysluokkia elementin ulkoasun muokkaamiseksi.

Kuinka se toimii

Määritä responsiivisuus margintai paddingarvot elementille tai sen sivujen osajoukolle pikaluokilla. 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ä. Muut 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ä puolet on 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 neljälle puolelle

Jos koko on jokin seuraavista:

• 0- luokille, jotka poistavat margintai paddingasettamalla sen0
• 1- (oletusarvoisesti) luokille, jotka asettavat margintaipadding$spacer * .25
• 2- (oletusarvoisesti) luokille, jotka asettavat margintaipadding$spacer * .5
• 3- (oletusarvoisesti) luokille, jotka asettavat margintaipadding$spacer
• 4- (oletusarvoisesti) luokille, jotka asettavat margintaipadding$spacer * 1.5
• 5- (oletusarvoisesti) luokille, jotka asettavat margintaipadding$spacer * 3
• auto- luokille, jotka asettavat arvon marginauto

(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.

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