Source

Phapanyetsano

Bootstrap e kenyelletsa mefuta e mengata e fapaneng ea litlelase tse arabelang ka bokhutšoane le litlelase tsa ts'ebeliso ea padding ho fetola chebahalo ea element.

Kamoo e sebetsang kateng

Abela lintho tse arabelang hantle marginkapa paddingtsa boleng ho element kapa karoloana ea mahlakore a eona e nang le litlelase tsa shorthand. E kenyelletsa tšehetso bakeng sa thepa ea motho ka mong, thepa eohle, le thepa e otlolohileng le e tšekaletseng. Litlelase li hahiloe ho tloha ho 'mapa oa kamehla oa Sass ho tloha .25remho 3rem.

Notation

Lisebelisoa tsa sebaka tse sebetsang ho libaka tsohle tsa phomolo, ho tloha xsho ea ho xl, ha li na khutsufatso ea li-breakpoint ho tsona. Lebaka ke hobane litlelase tseo li sebelisoa ho tloha min-width: 0holimo le holimo, 'me ka hona ha li tlangoe ke potso ea media. Li-breakpoints tse setseng, leha ho le joalo, li kenyelletsa khutsufatso ea breakpoint.

Litlelase li reheletsoe ho sebelisoa sebopeho {property}{sides}-{size}sa xsle {property}{sides}-{breakpoint}-{size}bakeng sa sm, md, lg, le xl.

Moo thepa e leng e 'ngoe ea:

  • m- bakeng sa lihlopha tse behiloengmargin
  • p- bakeng sa lihlopha tse behiloengpadding

Moo mahlakore ke e 'ngoe ea:

  • t- bakeng sa litlelase tse behang margin-topkapapadding-top
  • b- bakeng sa litlelase tse behang margin-bottomkapapadding-bottom
  • l- bakeng sa litlelase tse behang margin-leftkapapadding-left
  • r- bakeng sa litlelase tse behang margin-rightkapapadding-right
  • x- bakeng sa lihlopha tse behang bobeli *-leftle*-right
  • y- bakeng sa lihlopha tse behang bobeli *-tople*-bottom
  • blank - bakeng sa litlelase tse behang a marginkapa paddingmahlakoreng 'ohle a 4 a element

Moo boholo e leng e 'ngoe ea:

  • 0- bakeng sa litlelase tse felisang marginkapa paddingka ho e beha ho0
  • 1- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer * .25
  • 2- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer * .5
  • 3- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer
  • 4- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer * 1.5
  • 5- (ka kamehla) bakeng sa litlelase tse behang marginkapa paddingho$spacer * 3
  • auto- bakeng sa litlelase tse behang marginho auto

(O ka eketsa boholo bo eketsehileng ka ho kenyelletsa likenyelletso tsa $spacers'mapa oa Sass.)

Mehlala

Mona ke mehlala ea baemeli ba lihlopha tsena:

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

Horizontal centering

Ho ekelletsa moo, Bootstrap e boetse e kenyelletsa .mx-autosehlopha sa litaba tsa boemo bo sa tsitsang ba bophara bo sa fetoheng—ke hore, litaba tse nang display: blockle widthsete-ka ho beha mecheng e tšekaletseng ho auto.

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