Minɛnw
Konteyɛrɛw ye Bootstrap jɔli jɔnjɔn ye minnu bɛ i ka kɔnɔkow mara, k’u labɛn, k’u labɛn ɲɔgɔn fɛ minɛn walima filɛlikɛyɔrɔ dilen dɔ kɔnɔ.
U bɛ baara kɛ cogo min na
minɛnw ye layidu tacogo jɔnjɔn ye Bootstrap kɔnɔ wa u wajibiyalen don ni an ka grid system default ye . Minɛnw bɛ kɛ ka kɔnɔkow mara, ka u pad, ani (tuma dɔw la) u cɛmancɛ la. Hali ni minɛnw bɛ Se ka Kɛ 'kɔnɔ, layidu fanba tɛ 'kɔnɔna-minɛn de wajibiya.
Bootstrap bɛ na ni minɛn saba ye minnu tɛ kelen ye:
.container
, min bɛ a sigimax-width
jaabi kariyɔrɔ kelen-kelen bɛɛ la.container-fluid
, min bɛwidth: 100%
kɛ kariyɔrɔ bɛɛ la.container-{breakpoint}
, o yewidth: 100%
fo ka se kariyɔrɔ kofɔlen ma
Tablo min bɛ duguma, o bɛ a jira cogo min na minɛn kelen-kelen bɛɛ ta max-width
bɛ suma ni fɔlɔ ta ye .container
ani ka .container-fluid
tɛmɛn kariyɔrɔ kelen-kelen bɛɛ kan.
aw ye u ye wale la k' u suma ɲɔgɔn na an ka Grid misali la .
A ka dɔgɔn kosɛbɛ <576px |
A ka dɔgɔn ≥576px |
Cɛmancɛ ≥768px |
A ka bon ≥992px |
X-Large ≥1200px ye |
XX- Kaba ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% ye . | 540px ye | 720px ye | 960px ye | 1140px ye | 1320px ye |
.container-sm |
100% ye . | 540px ye | 720px ye | 960px ye | 1140px ye | 1320px ye |
.container-md |
100% ye . | 100% ye . | 720px ye | 960px ye | 1140px ye | 1320px ye |
.container-lg |
100% ye . | 100% ye . | 100% ye . | 960px ye | 1140px ye | 1320px ye |
.container-xl |
100% ye . | 100% ye . | 100% ye . | 100% ye . | 1140px ye | 1320px ye |
.container-xxl |
100% ye . | 100% ye . | 100% ye . | 100% ye . | 100% ye . | 1320px ye |
.container-fluid |
100% ye . | 100% ye . | 100% ye . | 100% ye . | 100% ye . | 100% ye . |
Default minɛn min bɛ kɛ
An ka .container
kalasi dafalen ye jaabi-minɛn ye, min bonya bɛ jɔ, o kɔrɔ ye ko a max-width
bɛ fɛn caman Changements (Yɛlɛma) kariyɔrɔ kelen-kelen bɛɛ la.
<div class="container">
<!-- Content here -->
</div>
Minɛn minnu bɛ jaabi di
Jaabi-minɛnw b’a To i bɛ se ka kalasi dɔ Jira min bonya ye 100% ye fo ka Se kariyɔrɔ kofɔlen ma, o kɔfɛ an bɛ max-width
s Kɛ kariyɔrɔ sanfɛla kelen-kelen bɛɛ la. Misali la, .container-sm
a bɛ 100% bonya ka daminɛ fo ka se sm
kariyɔrɔ ma, a bɛna sɛgɛsɛgɛli kɛ yɔrɔ min na ni md
, lg
, xl
, ani 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>
Jilama minɛnw
Baara .container-fluid
kɛ ni minɛn ye min bonya dafalen don, min bɛ jatebɔyɔrɔ bonya bɛɛ lajɛlen na.
<div class="container-fluid">
...
</div>
Sass ye
I n’a fɔ a jiralen bɛ cogo min na san fɛ, Bootstrap bɛ minɛnw kalasi minnu ɲɛfɔlen don ka kɔn, olu labɛn walasa k’i dɛmɛ ka i b’a fɛ ka layidu minnu dilan. Aw bɛ se ka nin minɛn kalasi minnu ɲɛfɔlen don ka kɔn, aw bɛ olu ladilan ni Sass karti (min bɛ sɔrɔ _variables.scss
) ladilan min bɛ fanga di u ma:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Ka fara Sass customize kan, aw bɛ se fana ka aw yɛrɛ ka minɛnw dilan ni an ka Sass mixin ye.
// 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();
}
Walasa ka kunnafoni wɛrɛw sɔrɔ ani misaliw an ka Sass kartiw ni fɛn caman sɛmɛntiyacogo kan, aw bɛ Sass yɔrɔ lajɛ Grid sɛbɛnw kɔnɔ .