Nugoewo me

Ale si wowɔa dɔe

Nugoewo nye ɖoɖowɔɖi ƒe akpa vevitɔ kekeake le Bootstrap me eye wohiã ne wole míaƒe grid ɖoɖo si woɖo ɖi la zãm . Wozãa nugoewo tsɔ léa nusiwo le wo me ɖe te, tsɔa wo ɖoa wo me, eye (ɣeaɖewoɣi) wotsɔa wo ɖoa titina. Togbɔ be woateŋu atsɔ nugoewo aɖo atɔ me hã la, ɖoɖo akpa gãtɔ mehiã be woatsɔ nugoe aɖo atɔ me o.

Bootstrap va kple nugoe vovovo etɔ̃:

• .container, si ɖoa a max-widthle breakpoint ɖesiaɖe si ɖoa nya ŋu
• .container-{breakpoint}, si nye width: 100%vaseɖe esime woɖo gbagbãƒe
• .container-fluid, si nye width: 100%gbagbãƒe ɖesiaɖe

Tabla si le ete la ɖe alesi nugoe ɖesiaɖe ƒe tɔ max-widthsɔ kple gbãtɔa .containerkple .container-fluidle gbagbãƒe ɖesiaɖe me fia.

Kpɔ wo le dɔwɔwɔ me eye nàtsɔ wo asɔ kple wo nɔewo le míaƒe Grid ƒe kpɔɖeŋua me .

Nugoe si woɖo ɖi

Míaƒe .containerklass gbãtɔ nye nugoe si ɖoa nya ŋu, si ƒe kekeme woɖo ɖi, si fia be eƒe max-widthtɔtrɔwo le gbagbãƒe ɖesiaɖe.

<div class="container">
  <!-- Content here -->
</div>

Nugoe siwo wɔa dɔ ɖe ame dzi

Nugoe siwo ɖoa nya ŋu ɖea mɔ na wò be nàgblɔ klass si keke 100% vaseɖe esime woaɖo gbagbãƒe si woɖo la gbɔ, le ema megbe la, míewɔa max-widths ŋudɔ na gbagbãƒe kɔkɔawo dometɔ ɖesiaɖe. Le kpɔɖeŋu me, .container-smkeke 100% be woadze egɔme vaseɖe esime woaɖo smgbagbãƒea gbɔ, afisi wòadzi ɖe edzi kple md, lg, xl, kple xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Lãmetsiwo ƒe nugoewo

Zãe .container-fluidna nugoe si ƒe kekeme bliboa, si keke ɖe enu le nukpɔƒea ƒe kekeme bliboa me.

<div class="container-fluid">
  ...
</div>

Sass ƒe nyawo

Abe alesi woɖee fia le etame ene la, Bootstrap wɔa nugoe ƒe hatsotso siwo woɖo ɖi do ŋgɔ ƒe ƒuƒoƒo siwo akpe ɖe ŋuwò nàtu ɖoɖo siwo nèdi. Àteŋu atrɔ asi le nugoe ƒe hatsotso siawo siwo woɖo ɖi do ŋgɔ ŋu to asitɔtrɔ le Sass ƒe anyigbatata (si wokpɔ le _variables.scss) si naa ŋusẽ wo ŋu:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Tsɔ kpe ɖe Sass la ƒe tɔtrɔ ŋu la, àteŋu awɔ wò ŋutɔ wò nugoewo hã kple míaƒe Sass mixin.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Ne èdi nyatakaka bubuwo kple kpɔɖeŋuwo tso alesi míatrɔ asi le míaƒe Sass anyigbatatawo kple tɔtrɔwo ŋu la, taflatse kpɔ Sass ƒe akpa si le Grid nuŋlɔɖiwo me .