Grid sitɛmu
Baara kɛ ni an ka mobili-fɔlɔ flexbox grid barikama ye walasa ka layidu talenw jɔ cogoya ni hakɛ bɛɛ la k’a sababu kɛ kulu tan ni fila sitɛmu ye, jaabi dafalen wɔɔrɔ, Sass fɛn caman sɛgɛsɛgɛli ani mixins, ani kalasi tan ni caman minnu ɲɛfɔlen don ka kɔn.
Misaliya
Bootstrap ka grid system bɛ baara kɛ ni minɛnw, jirisunw ani kuluw ye minnu bɛ tugu ɲɔgɔn na walasa ka kɔnɔkow labɛn ani k’u labɛn. A jɔlen bɛ ni flexbox ye wa a bɛ jaabi dafalen di. Misali ni ɲɛfɔli kuncɛlen bɛ duguma, min b’a jira ko grid system bɛ ɲɔgɔn sɔrɔ cogo min na.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Misali min bɛ sanfɛ, o bɛ kulu saba dilan minnu bonya bɛ bɛn ɲɔgɔn ma minɛnw ni filɛlikɛyɔrɔw bɛɛ kan ni an ka jatebɔlanw ye minnu ɲɛfɔlen don ka kɔn. o kuluw bɛ cɛmancɛ la ɲɛ kan ni bangebaga ye .container
.
A bɛ baara kɛ cogo min na
A karilen, nin ye grid system bɛ ɲɔgɔn sɔrɔ cogo min na:
-
an ka grid bɛ jaabiw ka breakpoint wɔɔrɔ dɛmɛ . Kariyɔrɔw sinsinnen bɛ
min-width
kunnafonidilanw ka ɲininkaliw kan, o kɔrɔ ye ko u bɛ nɔ bila o kariyɔrɔ la ani a sanfɛtaw bɛɛ la (misali la, a.col-sm-4
bɛ tali kɛsm
,md
,lg
,xl
, anixxl
). O kɔrɔ ye ko aw bɛ se ka minɛnw ni kolomaw bonya ni u kɛcogo kɔlɔsi ni kariyɔrɔ kelen-kelen bɛɛ ye. -
Conteneurs centre ani horizontalement pad i ka kɔnɔkow. Baara
.container
kɛ ni pixel janya jaabi ye,.container-fluid
ka ɲɛsinwidth: 100%
filɛliyɔrɔw ni minɛnw bɛɛ ma, walima jaabi minɛn (misali la,.container-md
) ka ɲɛsin ji ni pixel bonya faralen ɲɔgɔn kan. -
Layiniw ye fɛnw ye minnu bɛ kɛ ka kolonw datugu. Kolon kelen-kelen bɛɛ bɛ ni horizontal ye
padding
(a bɛ fɔ a ma ko gutter) walasa ka yɔrɔ min bɛ u ni ɲɔgɔn cɛ, o kɔlɔsi. Opadding
bɛ sɔrɔ ka kɛlɛ kɛ jirisunw kan ni dakun juguw ye walasa ka a jira ko i ka kuluw kɔnɔkow bɛ ɲɔgɔn sɔrɔ ni ɲɛ ye ka jigin kinin fɛ. Row fana bɛ modifier classes dɛmɛ walasa ka column sizing ni gutter classes kɛ cogo kelen na walasa ka i ka kɔnɔkow cɛ janya Changer. -
Kolonw bɛ se ka wuli ka bɔ u nɔ na cogo kabakoma na. Jateblaw kulu 12 bɛ yen minnu bɛ sɔrɔ jirisun kelen-kelen bɛɛ la, o b’a to i bɛ se ka fɛnw faralen ɲɔgɔn kan cogo wɛrɛw la minnu bɛ kulu hakɛ o hakɛ la. Kolon kalanw bɛ jatebɔlan kulu hakɛ jira min ka kan ka span (misali la,
col-4
span naani).width
s bɛ sigi kɛmɛsarada la walasa i ka kɛ ni hakɛ danfaralen kelen ye tuma bɛɛ. -
Gutters fana bɛ jaabi di ani u bɛ se ka ladilan. Gutter classes bɛ sɔrɔ breakpoints bɛɛ kɔnɔ, ni u bɛɛ bonya ye kelen ye i n’a fɔ an ka margin ani padding spacing . Aw bɛ jibolisira tilennenw Changer ni
.gx-*
kalasi ye, jibolisira jɔlen ni.gy-*
, walima jibolisira bɛɛ ni.g-*
kalasi ye..g-0
bɛ sɔrɔ fana ka jibolisiraw bɔ. -
Sass variables, maps, ani mixins bɛ fanga di grid ma. N’i t’a fɛ ka baara Kɛ ni jatebɔlanw ye minnu ɲɛfɔlen dòn ka Kɔn Bootstrap kɔnɔ, i bɛ Se ka baara Kɛ n’an ka jatebɔ-yɔrɔ Sass ye k’i yɛrɛ ta Dabɔ ni kɔrɔko-taamaʃyɛn caman ye. An bɛ CSS ladamucogo dɔw fana Dòn a la walasa ka nin Sass bεεlajɛlen ninnu dun walasa ka hali bεnkansεbεnba Sɔrɔ i ye.
aw ye dantigɛliw ni buguw dɔn minnu bɛ flexbox lamini na , i n' a fɔ sebaliya ka HTML yɔrɔ dɔw kɛ flex minɛnw ye .
Grid sugandiliw
Bootstrap ka grid system bɛ se ka ladamu ka tɛmɛn default breakpoint wɔɔrɔ bɛɛ kan, ani breakpoint o breakpoint i bɛ customize. Grid tier default wɔɔrɔ ye ninnu ye:
- Extra petit (xs) .
- Fitini (sm) .
- Moyen (md) .
- Bagan (lg) .
- A ka bon kosɛbɛ (xl) .
- Extra extra grand (xxl) Bamako, Mali.
I n’a fɔ a fɔra cogo min na san fɛ, o kari-yɔrɔ kelen-kelen bɛɛ n’u ka minɛnw don, u ka kalasi ɲɛbila kɛrɛnkɛrɛnnen, ani u ka fɛn caman sɛmɛntiyalanw. Nin ye cogo min na jabaranin bɛ Yɛlɛma nin kariyɔrɔ ninnu kan:
xs <576px ye |
sm ≥576px ye |
md ≥768px ye |
lg ≥992px ye |
xl ≥1200px ye |
xxl ≥1400px ye |
|
---|---|---|---|---|---|---|
Minɛn min bɛ kɛ minɛn kɔnɔmax-width |
Foyi tɛ (auto) . | 540px ye | 720px ye | 960px ye | 1140px ye | 1320px ye |
Kalanso ɲɛbila | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# ka kuluw | 12 ye | |||||
Gutter bonya | 1.5rem (.75rem kinin fɛ ani kinin fɛ) | |||||
Gutters ladamulenw | Awɔ | |||||
Nestable ye | Awɔ | |||||
Kolonw ka komandi | Awɔ |
Kolonw labɛncogo yɛrɛma
Baara kɛ ni breakpoint-specific column classes ye walasa ka column bonya nɔgɔya ni class numéro jɛlen tɛ i n’a fɔ .col-sm-6
.
A bonya bɛ bɛn
Misali la, nin ye jatebɔlan fila ye minnu bɛ tali kɛ minɛn ni filɛlikɛyɔrɔ bɛɛ la, k’a ta xs
ka se xxl
. Aw bɛ unit-less classes hakɛ o hakɛ fara a kan i mago bɛ breakpoint kelen-kelen bɛɛ la ani kolon kelen-kelen bɛɛ bɛna kɛ kelen ye.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Kolon kelen bonya sigili
Auto-layout for flexbox grid columns fana kɔrɔ ye ko i bɛ se ka kulu kelen bonya sigi ani ka balimakɛ kuluw kɛ u yɛrɛma ka bonya caman wuli a lamini na. Aw bɛ se ka baara kɛ ni jatebɔlanw ye minnu ɲɛfɔlen don ka kɔn (i n’a fɔ a jiralen bɛ cogo min na jukɔrɔ), jatebɔlanw ɲagaminenw, walima jatebɔlanw bonya. A kɔlɔsi ko kulu tɔw bɛna bonya caman sɛmɛntiya hali ni cɛmancɛ kulu bonya mana kɛ min o min ye.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Kɔnɔkow bonya caman bɛrɛbɛrɛ
Baara kɛ ni col-{breakpoint}-auto
kalanw ye walasa ka kuluw bonya ka kɛɲɛ n’u kɔnɔkow bonya dacogo ye.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Kalanso minnu bɛ jaabi di
Bootstrap ka grid kɔnɔ, kalansen wɔɔrɔ bɛ yen minnu ɲɛfɔlen don ka kɔn walasa ka jaabiw labɛncogo gɛlɛnw jɔ. Aw ye aw ka kuluw bonya kɛ ka kɛɲɛ ni aw yɛrɛ sago ye minɛn fitininw kan, minɛn fitininw, cɛmancɛw, belebelebaw, walima minnu ka bon kosɛbɛ i n’a fɔ aw b’a ye cogo o cogo.
Kariyɔrɔw bɛɛ
Ni jatebɔlanw ye kelen ye k’a ta minɛn fitininw na ka se minɛn belebelebaw ma, aw bɛ baara kɛ ni .col
ani .col-*
kalasiw ye. Kalanso nimɔrɔma dɔ jira ni i mago bɛ kulu kɛrɛnkɛrɛnnen na min bonya ka bon; n’o tɛ, aw kana siga ka nɔrɔ .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
A bɛ dalajɛ ka kɛ tilennen ye
Ni aw bɛ baara kɛ ni .col-sm-*
kalansen kelen ye, aw bɛ se ka grid system basigilen dɔ da min bɛ daminɛ ni ɲɔgɔn ye ka kɛ horizontal ye breakpoint fitinin na ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Mix ka ɲɔgɔn sɔrɔ
Aw t’a fɛ aw ka kuluw ka ɲɔgɔn dalajɛ dɔrɔn grid tiers dɔw kɔnɔ wa? Aw bɛ baara kɛ ni kalan suguya wɛrɛw faralen ye ɲɔgɔn kan sanfɛyɔrɔ kelen-kelen bɛɛ kama i n’a fɔ aw mago bɛ cogo min na. Aw ye misali lajɛ min bɛ duguma walasa ka hakilina ɲuman sɔrɔ a bɛɛ bɛ baara kɛ cogo min na.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Kolonw tigɛli
Baara kɛ ni jaabi .row-cols-*
kalanw ye walasa ka teliya ka kulu hakɛ sigi sen kan min bɛ i ka kɔnɔkow ni i ka labɛncogo jira ka ɲɛ. K’a sɔrɔ kalasi nɔrɔlenw .col-*
bɛ tali kɛ kulu kelen-kelen bɛɛ la (misali la, .col-md-4
), jirisun kuluw kalasi bɛ sigi bangebaga .row
kan i n’a fɔ sira surun. Ni .row-cols-auto
aw bɛ se ka kolonw di u bonya dacogo la.
Baara kɛ ni nin jirisunw kalansenw ye walasa ka teliya ka jatebɔlan jɔnjɔnw dilan walima ka i ka karti labɛncogo kɔlɔsi.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Aw bɛ se fana ka baara kɛ ni Sass mixin ye min bɛ a kɔfɛ, row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Nesting (kɔnɔnafili).
Walasa k’i ka kɔnɔkow nest ni grid default ye, i ka kulu kura .row
ni kulu dɔ fara kulu .col-sm-*
dɔ kan min bɛ yen .col-sm-*
. Nested rows ka kan ka kɛ ni kuluw kulu ye minnu bɛ fara ɲɔgɔn kan ka se 12 ma walima ka dɔgɔya (a man kan i ka baara kɛ ni kulu 12 bɛɛ ye minnu bɛ sɔrɔ).
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass ye
Ni i bɛ baara Kɛ ni Bootstrap ka source Sass files ye, i bɛ se ka baara Kɛ ni Sass variables ni mixins ye walasa ka ɲɛw labɛncogo ladamulenw, kɔrɔko ani jaabiw dilan. An ka grid kalasi minnu ɲɛfɔlen don ka kɔn, olu bɛ baara kɛ ni nin fɛn caman ɲɔgɔnna ni mixins kelenw ye walasa ka kalan labɛnnenw suite bɛɛ di walasa ka jaabi teliya layidu ta.
Yɛlɛma-yɛlɛmaw
Yɛlɛmaw ni kartiw bɛ kuluw hakɛ jira, gutɛri bonya, ani kunnafonidilanw ɲininkali yɔrɔ min na kuluw bɛ wuli ka wuli. An bɛ baara Kɛ ni ninnu ye walasa ka grid classes (jatebɔ-kalanso) minnu ɲɛfɔlen dòn ka Kɔn, olu Sɔrɔ minnu sɛbɛnnen dòn san fɛ, ka Fàra custom mixins (lada mixins) minnu kofɔlen dòn jukɔrɔ.
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Mixinw (Mixins).
Mixins bɛ baara kɛ ni grid variables ye walasa ka semantiki CSS dilan grid kulu kelen-kelen bɛɛ kama.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);
Misali la baarakɛcogo
Aw bɛ se ka fɛn caman sɛmɛntiya ka kɛɲɛ ni aw yɛrɛ ka ladamu nafaw ye, walima ka baara kɛ dɔrɔn ni mixins ye n’u ka nafa fɔlɔw ye. Nin ye misali ye min bɛ baara Kɛ ni 'sènfɛ-sɛbɛnni-minɛnw ye walasa ka kulu fla-fla-labɛnni Dabɔ ni danfara bɛ u ni ɲɔgɔn cɛ.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Ka grid (jatebɔ) kɛ ka kɛɲɛ ni mɔgɔw sago ye
Baara kɛli ni an ka jatebɔlan Sass fɛn caman sɛgɛsɛgɛli ni kartiw ye minnu bɛ a kɔnɔ, a bɛ se ka jatebɔ kalasi minnu ɲɛfɔlen don ka kɔn, olu bɛrɛbɛn pewu. Yɛlɛma ni tiyɛri hakɛ ye, kunnafonidilan ɲininkali hakɛw, ani minɛnw bonya—o kɔfɛ, aw bɛ segin ka ɲɔgɔn dalajɛ.
Kolonw ni jibolisiraw
Grid kuluw hakɛ bɛ se ka ladilan Sass variables fɛ. $grid-columns
bɛ kɛ ka kolosinsinnan kelen-kelen bɛɛ bonya (kɛmɛsarada la) sɔrɔ ka sɔrɔ $grid-gutter-width
ka kolosinsinnanw bonya sigi sen kan.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Grid tiers (jatebɔlanw).
Ni i bɛ tɛmɛ kuluw yɛrɛ kan, i bɛ se fana ka jatebɔlanw hakɛ ladilan. Ni i tun b’a fɛ ka grid tiers naani dɔrɔn de sɔrɔ, i tun bɛna $grid-breakpoints
and update $container-max-widths
ka kɛ nin cogo la:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Ni i bɛ fɛn o fɛn Changer Sass variables walima maps la, i ka kan k’i ka fɛn caman Changements mara ani ka recompile. O kɛli bɛna kɛ sababu ye ka grid classes (jatebɔlanw) minnu ɲɛfɔlen don ka kɔn, olu kulu kura dɔ bɔ ka ɲɛsin kolosinsinnanw bonya, offsets ani komandiw ma. Responsive visibility utilities fana bɛna ladamu walasa ka baara kɛ ni ladamu breakpoints ye. Aw ye aw jija ka jatebɔlan nafaw sigi px
(a tɛ rem
, em
, walima %
).