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.

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