Source

Térköz

A Bootstrap a gyorsított reszponzív margók és padding segédprogramok széles skáláját tartalmazza az elemek megjelenésének módosításához.

Hogyan működik

Rendeljen reszponzív-barát marginvagy paddingértékeket egy elemhez vagy oldalainak egy részhalmazához gyorsírási osztályokkal. Tartalmazza az egyes tulajdonságok, az összes tulajdonság, valamint a függőleges és vízszintes tulajdonságok támogatását. Az osztályok egy alapértelmezett Sass térképből épülnek .25remfel 3rem.

Jelölés

Az összes töréspontra, tól xs-ig érvényes térköz segédprogramok xlnem tartalmaznak töréspont-rövidítést. Ennek az az oka, hogy ezeket az osztályokat a rendszer elölről min-width: 0és felfelé alkalmazza, és így nem köti őket médialekérdezés. A fennmaradó töréspontok azonban tartalmaznak egy töréspont-rövidítést.

Az osztályok elnevezése a következő formátumban történik {property}{sides}-{size}: xs, {property}{sides}-{breakpoint}-{size}, sm, mdés lg.xl

Ahol az ingatlan a következők egyike:

  • m- az osztályokhoz, amelyek megmargin
  • p- az osztályokhoz, amelyek megpadding

Ahol az oldalak valamelyike:

  • t- osztályoknak, amelyek beállítják margin-topillpadding-top
  • b- osztályoknak, amelyek beállítják margin-bottomillpadding-bottom
  • l- osztályoknak, amelyek beállítják margin-leftillpadding-left
  • r- osztályoknak, amelyek beállítják margin-rightillpadding-right
  • x- azokhoz az osztályokhoz, amelyek beállítják a *-leftés a*-right
  • y- azokhoz az osztályokhoz, amelyek beállítják a *-topés a*-bottom
  • üres - azokhoz az osztályokhoz, amelyek egy marginvagy paddingaz elem mind a 4 oldalára állítanak be

Ahol a méret a következők egyike:

  • 0- azoknál az osztályoknál, amelyek megszüntetik a marginvagy paddingbeállításával0
  • 1- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek a marginvagy -ot állítják paddingbe$spacer * .25
  • 2- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek a marginvagy -ot állítják paddingbe$spacer * .5
  • 3- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek a marginvagy -ot állítják paddingbe$spacer
  • 4- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek a marginvagy -ot állítják paddingbe$spacer * 1.5
  • 5- (alapértelmezés szerint) azokhoz az osztályokhoz, amelyek a marginvagy -ot állítják paddingbe$spacer * 3
  • auto- azokhoz az osztályokhoz, amelyek az marginauto

(További méreteket adhat hozzá, ha bejegyzéseket ad hozzá a $spacersSass térképváltozóhoz.)

Példák

Íme néhány reprezentatív példa ezekre az osztályokra:

.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;
}

Vízszintes központosítás

Ezenkívül a Bootstrap egy .mx-autoosztályt is tartalmaz a rögzített szélességű blokkszintű tartalom vízszintes központosítására – azaz a tartalommal display: blockés egy widthkészlettel – a vízszintes margók értékre állításával auto.

Középre helyezett elem
<div class="mx-auto" style="width: 200px;">
  Centered element
</div>