Nugoewo me
Containers nye Bootstrap ƒe xɔtunu vevi aɖe si me wò nyatakakawo le, pad, eye woɖoa wo ɖe ɖoɖo nu le mɔ̃ alo nukpɔkpɔ ƒe mɔnu aɖe si wona 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 amax-width
le breakpoint ɖesiaɖe si ɖoa nya ŋu.container-fluid
, si nyewidth: 100%
gbagbãƒe ɖesiaɖe.container-{breakpoint}
, si nyewidth: 100%
vaseɖe esime woɖo gbagbãƒe
Tabla si le ete la ɖe alesi nugoe ɖesiaɖe ƒe tɔ max-width
sɔ kple gbãtɔa .container
kple .container-fluid
le 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 .
Susu sue aɖe kpee <576px |
Sue ≥576px |
Medium ≥768px ƒe didime |
Gã ≥992px |
X-Gã ≥1200px |
XX-Gã ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% ƒe . | 540px ƒe didime | 720px ƒe didime | 960px ƒe didime | 1140px ƒe didime | 1320px ƒe didime |
.container-sm |
100% ƒe . | 540px ƒe didime | 720px ƒe didime | 960px ƒe didime | 1140px ƒe didime | 1320px ƒe didime |
.container-md |
100% ƒe . | 100% ƒe . | 720px ƒe didime | 960px ƒe didime | 1140px ƒe didime | 1320px ƒe didime |
.container-lg |
100% ƒe . | 100% ƒe . | 100% ƒe . | 960px ƒe didime | 1140px ƒe didime | 1320px ƒe didime |
.container-xl |
100% ƒe . | 100% ƒe . | 100% ƒe . | 100% ƒe . | 1140px ƒe didime | 1320px ƒe didime |
.container-xxl |
100% ƒe . | 100% ƒe . | 100% ƒe . | 100% ƒe . | 100% ƒe . | 1320px ƒe didime |
.container-fluid |
100% ƒe . | 100% ƒe . | 100% ƒe . | 100% ƒe . | 100% ƒe . | 100% ƒe . |
Nugoe si woɖo ɖi
Míaƒe .container
klass si woɖo ɖi la nye nugoe si ɖoa nya ŋu, si ƒe kekeme woɖo ɖi, si fia be eƒe max-width
tɔ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-width
s ŋudɔ na gbagbãƒe kɔkɔtɔwo dometɔ ɖesiaɖe. Le kpɔɖeŋu me, .container-sm
keke 100% be woadze egɔme vaseɖe esime woaɖo sm
gbagbãƒ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-fluid
na 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 .