Välit

Bootstrap sisältää laajan valikoiman lyhennettyjen responsiivisten marginaalien, täytteiden ja aukkojen hyödyllisyysluokkia elementin ulkoasun muokkaamiseksi.

Tällä sivulla

Marginaali ja täyte

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.

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: 0ja 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 xsja {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 asettavat margin-toptaipadding-top
b- luokille, jotka asettavat margin-bottomtaipadding-bottom
s- (aloitus) luokille, jotka asetetaan LTR: ssä tai margin-leftRTL :ssäpadding-leftmargin-rightpadding-right
e- (loppu) luokille, jotka asetetaan LTR: ssä tai margin-rightRTL :ssäpadding-rightmargin-leftpadding-left
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;
}

.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-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). 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ä nennen 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ää gapylätason ruudukon säiliön apuohjelmia. Tämä voi säästää marginaaliapuohjelmien lisäämistä yksittäisiin ruudukkokohteisiin ( display: gridkontin lapsiin). Gap-apuohjelmat reagoivat oletusarvoisesti, ja ne luodaan apuohjelmien API:n kautta $spacersSass-kartan perusteella.

Ruudukkokohde 1

Ruudukkokohde 2

Ruudukkokohde 3

<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 $spacerskartasta ( 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
    ),