Grid ƒe ɖoɖo
Zã míaƒe asitelefon-gbãtɔ flexbox grid sesẽ la nàtsɔ atu ɖoɖowo ƒe nɔnɔme kple lolome ɖesiaɖe akpe ɖe sɔti wuieve ƒe ɖoɖo, ade default responsive tiers, Sass variables kple mixins, kple klass gbogbo aɖewo siwo woɖo do ŋgɔ ŋu.
Kpɔɖeŋu
Bootstrap ƒe grid ɖoɖoa zãa nugoewo, fliwo, kple sɔtiwo ƒe ƒuƒoƒo tsɔ ɖoa nyatakakawo ɖe ɖoɖo nu heɖoa wo ɖe ɖoɖo nu. Wotue kple flexbox eye wòwɔa nu bliboe. Kpɔɖeŋu kple numeɖeɖe deto le alesi grid ɖoɖoa ƒoa ƒui ŋu le ete.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Kpɔɖeŋu si le etame la wɔa sɔti etɔ̃ siwo ƒe kekeme sɔ le mɔ̃wo kple nukpɔkpɔwo katã dzi to míaƒe grid klass siwo míeɖo do ŋgɔ la zazã me. Kpɔti mawo le titina le axaa dzi kple dzila la .container
.
Ale si wòwɔa dɔe
Ne míegbãe la, alesi grid ɖoɖoa ƒoa ƒui enye si:
-
Míaƒe grid la doa alɔ ade siwo ɖoa nya ŋu ƒe breakpoints . Wotu vovototodedeameme ɖe
min-width
nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo dzi, si fia be wokpɔa ŋusẽ ɖe vovototodedeameme ma kple esiwo katã le etame dzi (le kpɔɖeŋu me,.col-sm-4
eku ɖesm
,md
,lg
,xl
, kple ŋuxxl
). Esia fia be àteŋu akpɔ nugoe kple sɔti ƒe lolome kple nuwɔna dzi to breakpoint ɖesiaɖe dzi. -
Containers titina kple horizontally pad wò nyatakakawo. Zã
.container
na piksel ƒe kekeme si ɖoa nya ŋu,.container-fluid
nawidth: 100%
nukpɔkpɔ kple mɔ̃wo katã me, alo nugoe si ɖoa nya ŋu (le kpɔɖeŋu me,.container-md
) na tsi kple piksel ƒe kekeme ƒe ƒuƒoƒo. -
Fliwo nye nusiwo wotsɔ blaa sɔtiwoe. Sɔti ɖesiaɖe le tsia dzi
padding
(si woyɔna be tsiɖɔɖɔɖɔɖɔƒe) si dzi woato akpɔ teƒe si le wo dome la dzi. Emegbepadding
wotsia tre ɖe esia ŋu le fliawo dzi kple axadzinu manyomanyowo be woakpɔ egbɔ be nya siwo le wò sɔtiwo me la le ɖoɖo nu le miame le nukpɔkpɔ me. Fliwo hã doa alɔ tɔtrɔɖenu ƒe hatsotsowo be woawɔ sɔti ƒe lolome kple gutter ƒe hatsotsowo ŋudɔ ɖekae be woatrɔ wò nyawo ƒe dometsotso. -
Sɔtiwo te ŋu trɔna ɖe nɔnɔmewo ŋu ale gbegbe. Template sɔti 12 li le fli ɖesiaɖe me, si ana nàte ŋu awɔ nu vovovo siwo ƒo ƒu ɖe sɔti xexlẽme ɖesiaɖe me. Sɔti ƒe hatsotsowo fiaa nɔnɔmetata ƒe sɔti ƒe xexlẽme si woatsɔ akeke ɖe enu (le kpɔɖeŋu me, akeke
col-4
ene).width
woɖo s ɖe alafa memamãwo me ale be lolome si sɔ kple wo nɔewo nanɔ asiwò ɣesiaɣi. -
Gutters hã wɔa dɔ nyuie eye woate ŋu atrɔ asi le wo ŋu. Gutter klasswo li le breakpoints katã, kple wo katã ƒe lolome sɔ kple míaƒe margin kple padding dometsotso . Trɔ tsidzɔƒe siwo le tsia dzi kple
.gx-*
klasswo, tsidzɔƒe siwo le tsitrenu kple.gy-*
, alo tsidzɔƒe siwo katã le tsia dzi kple.g-*
klasswo..g-0
li hã be woatsɔ aɖe tsiɖɔɖɔɖɔƒewo ɖa. -
Sass ƒe tɔtrɔwo, anyigbatatawo, kple mixins na ŋusẽ grid la. Ne mèdi be yeazã grid ƒe klass siwo woɖo ɖi do ŋgɔ le Bootstrap me o la, àteŋu azã míaƒe grid ƒe dzɔtsoƒe Sass atsɔ awɔ tɔwò kple gɔmesese ƒe dzesi geɖe wu. Míetsɔ CSS ƒe nɔnɔme tɔxɛ aɖewo hã de eme be míazã Sass ƒe tɔtrɔ siawo hena asitɔtrɔ geɖe wu gɔ̃ hã na wò.
Nya seɖoƒewo kple vodada siwo ƒo xlã flexbox , abe ŋutete be woazã HTML ƒe akpa aɖewo abe flex nugoewo ene o ene .
Grid ƒe tiatiawɔblɔɖewo
Bootstrap ƒe grid ɖoɖoa ateŋu atrɔ ɖe nɔnɔme ade siwo katã woɖo ɖi la ŋu, kple gbagbãƒe ɖesiaɖe si nètrɔ asi le. Grid tiers ade siwo woɖo ɖi lae nye esiawo:
- Susu sue aɖe kpee (xs) .
- Sue (sm) .
- Medidime (md) .
- Gã (lg) .
- Gã wu (xl) .
- Gã bubu si lolo wu (xxl) .
Abe alesi míede dzesii le etame ene la, breakpoint siawo dometɔ ɖesiaɖe kple eƒe nugoe, klass ƒe ŋgɔdonya tɔxɛ, kple tɔtrɔwo. Alesi grid la trɔna le breakpoint siawo katã me enye si:
xs <576px ƒe nɔnɔmetata |
sm ≥576px ƒe didime |
md ≥768px ƒe didime |
lg ≥992px ƒe didime |
xl ≥1200px ƒe didime |
xxl ≥1400px ƒe didime |
|
---|---|---|---|---|---|---|
Nugoe si me wotsɔa nu ɖonamax-width |
Ðeke meli o (auto) . | 540px ƒe didime | 720px ƒe didime | 960px ƒe didime | 1140px ƒe didime | 1320px ƒe didime |
Klass ƒe ŋgɔdonya | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# ƒe sɔtiwo | 12. 12 | |||||
Gutter ƒe kekeme | 1.5rem (.75rem le miame kple ɖusime) | |||||
Tsiɖɔɖɔɖɔƒe siwo wowɔ ɖe ɖoɖo nu | Ɛ̃ | |||||
Nestable | Ɛ̃ | |||||
Sɔtiwo ƒe ɖoɖowɔwɔ | Ɛ̃ |
Auto-layout sɔtiwo
Zã breakpoint-koŋ ƒe sɔtiwo ƒe klasswo hena sɔtiwo ƒe lolome ɖoɖo bɔbɔe si me xexlẽdzesiwo ƒe klass si me kɔ abe .col-sm-6
.
Woƒe kekeme sɔ kple wo nɔewo
Le kpɔɖeŋu me, grid ƒe ɖoɖo eve siwo ku ɖe mɔ̃ ɖesiaɖe kple nukpɔkpɔ ƒe mɔnu ŋue nye esi, tso xs
vaseɖe xxl
. Tsɔ unit-less class xexlẽme ɖesiaɖe kpe ɖe breakpoint ɖesiaɖe si nèhiã ŋu eye sɔti ɖesiaɖe ƒe kekeme anɔ ɖeka.
<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>
Sɔti ɖeka ƒe kekeme ɖoɖo
Auto-layout na flexbox grid sɔtiwo hã fia be àteŋu aɖo sɔti ɖeka ƒe kekeme eye nàna nɔvi sɔtiawo natrɔ woƒe lolome le wo ɖokui si ƒo xlãe. Àteŋu azã grid ƒe hatsotso siwo woɖo ɖi do ŋgɔ (abe alesi woɖee fia le ete ene), grid mixins, alo inline widths. De dzesii be sɔti bubuawo atrɔ woƒe lolome eɖanye titina sɔti la ƒe kekeme ka kee o.
<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>
Emenyawo ƒe kekeme si trɔna
Zã col-{breakpoint}-auto
klasswo nàtsɔ adzidze sɔtiwo ƒe lolome le woƒe emenyawo ƒe kekeme le dzɔdzɔme nu nu.
<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>
Klass siwo me woɖoa nya ŋu le
Bootstrap ƒe grid la lɔ dzidzenu ade siwo woɖo ɖi do ŋgɔ ƒe klasswo ɖe eme hena ɖoɖo sesẽ siwo ɖoa nya ŋu tutu. Trɔ asi le wò sɔtiwo ƒe lolome ŋu le mɔ̃ suewo, suewo, titinatɔwo, gãwo, alo gãwo wu dzi alesi nèkpɔe be esɔ.
Nusiwo katã gblẽa nu le ame ŋu
Le grid siwo sɔ tso mɔ̃ suetɔ dzi va ɖo gãtɔ dzi la, zã .col
kple .col-*
ƒe hatsotsowo. Gblɔ klass si ŋu xexlẽdzesi le ne èhiã sɔti si ƒe lolome le etɔxɛe; ne menye nenema o la, milé ɖe .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>
Woƒo wo nu ƒu ɖe anyigba dzi
Ne èzã .col-sm-*
klass ɖeka la, àte ŋu awɔ grid ɖoɖo vevi aɖe si dzea egɔme tso ƒuƒoƒo me eye wòzua tsia dzi le breakpoint suea ( 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>
Tsɔe tsaka eye nàtsɔe asɔ kple wo nɔewo
Mèdi be yeƒe sɔtiwo naƒo ƒu ɖe grid tiers aɖewo me ko oa? Zã klass vovovowo ƒe ƒuƒoƒo na tier ɖesiaɖe ne ehiã. Kpɔ kpɔɖeŋu si le ete hena alesi wo katã wɔa dɔe ŋuti susu nyuitɔ.
<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>
Ðo sɔtiwo ɖe fli me
Zã .row-cols-*
klass siwo ɖoa nya ŋu nàtsɔ aɖo sɔti siwo aɖe wò nyatakakawo kple ɖoɖo nyuie wu ƒe xexlẽme kaba. Togbɔ be .col-*
klass siwo sɔ la wɔa dɔ ɖe sɔti ɖekaɖekawo ŋu (le kpɔɖeŋu me, .col-md-4
), woɖo fli sɔtiwo ƒe klasswo ɖe dzila dzi .row
abe gbãtɔ na sɔti siwo le eme ene. Àte .row-cols-auto
ŋu ana sɔtiawo woƒe kekeme le dzɔdzɔme nu.
Zã fli ƒe sɔtiwo ƒe klass siawo nàtsɔ awɔ grid ƒe ɖoɖo veviwo kabakaba alo nàtsɔ akpɔ wò kaɖi ƒe ɖoɖowo dzi eye nàɖe asi le wo ŋu ne ehiã le sɔti ƒe ɖoɖo nu.
<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>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
</div>
</div>
Àte ŋu azã Sass mixin si kpe ɖe eŋu hã, 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);
}
}
Atɔwɔwɔ
Be nàtsɔ grid si woɖo ɖi la awɔ atɔ ɖe wò nyatakakawo ŋu la, tsɔ sɔti yeye .row
kple ƒuƒoƒo kpe ɖe .col-sm-*
sɔti si li xoxo .col-sm-*
ŋu. Ele be sɔti siwo wotsɔ ƒo ƒui va ɖo 12 alo esi mede nenema o nanɔ fli siwo wotsɔ ƒo ƒui me (mehiã be nàzã sɔti 12 siwo katã li la o).
<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 ƒe nyawo
Ne èle Bootstrap ƒe dzɔtsoƒe Sass faɛlwo zãm la, tiatia le asiwò be nàzã Sass ƒe tɔtrɔwo kple mixins atsɔ awɔ axa ƒe ɖoɖo siwo wowɔ ɖe ɖoɖo nu, gɔmesese, kple ŋuɖoɖo. Míaƒe grid klass siwo woɖo do ŋgɔ la zãa tɔtrɔ siawo ke kple mixins tsɔ naa klass siwo sɔ na zazã ƒe ƒuƒoƒo blibo aɖe na ɖoɖo siwo ɖoa nya ŋu kabakaba.
Nusiwo trɔna
Tɔtrɔwo kple anyigbatatawoe ɖoa sɔtiwo ƒe xexlẽme, gutter ƒe kekeme, kple media biabia teƒe si woadze sɔti siwo le tsia dzi gɔme le. Míezãa esiawo tsɔ wɔa grid ƒe hatsotso siwo woɖo ɖi do ŋgɔ siwo woŋlɔ ɖe etame, kpakple na mixins tɔxɛ siwo woŋlɔ ɖe ete.
$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
);
Nusiwo wotsɔ tsakae
Wozãa mixins kpe ɖe grid ƒe tɔtrɔwo ŋu tsɔ wɔa gɔmesese ƒe CSS na grid ƒe sɔti ɖekaɖekawo.
// 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);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Kpɔɖeŋu zazã
Àteŋu atrɔ asi le tɔtrɔawo ŋu ɖe wò ŋutɔ wò asixɔxɔ tɔxɛwo nu, alo nàzã mixins kple woƒe asixɔxɔ gbãtɔwo ko. Kpɔɖeŋu aɖee nye esi le ɖoɖo siwo woɖo ɖi zazã atsɔ awɔ sɔti eve ƒe ɖoɖo si me dometsotso le le dome.
.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>
Grid la ƒe tɔtrɔ ɖe nɔnɔmewo ŋu
Ne míezã míaƒe grid Sass tɔtrɔwo kple anyigbatata siwo wotu ɖe eme la, anya wɔ be míatrɔ asi le grid ƒe hatsotso siwo woɖo ɖi do ŋgɔ ŋu keŋkeŋ. Trɔ tiers ƒe xexlẽme, media biabia ƒe didimewo, kple nugoe ƒe kekeme—emegbe nàgbugbɔ aƒo ƒu.
Sɔtiwo kple tsiɖɔɖɔɖɔƒewo
Woateŋu atrɔ asi le grid sɔtiwo ƒe xexlẽme ŋu to Sass ƒe tɔtrɔwo dzi. $grid-columns
wozãna tsɔ wɔa sɔti ɖesiaɖe ƒe kekeme (le alafa memama me) esime $grid-gutter-width
wòɖoa sɔti ƒe tsidzɔƒewo ƒe kekeme.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Grid ƒe ƒuƒoƒoawo
Ne èyi ŋgɔ wu sɔtiawo ŋutɔ la, àte ŋu atrɔ asi le grid tiers ƒe xexlẽme hã ŋu. Ne èdi be yeakpɔ grid tiers ene ko la, àwɔ asitɔtrɔ le $grid-breakpoints
kple $container-max-widths
ŋu wòazu nane si le abe esia ene:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Ne èle tɔtrɔ aɖewo wɔm le Sass ƒe tɔtrɔwo alo anyigbatatawo ŋu la, ahiã be nàdzra wò tɔtrɔwo ɖo eye nàgbugbɔ aƒo wo nu ƒu. Esia wɔwɔ ana grid ƒe hatsotso siwo woɖo ɖi do ŋgɔ ƒe ƒuƒoƒo yeye aɖe nadze na sɔti ƒe kekeme, vovototodedeameme, kple ɖoɖowɔwɔ. Woatrɔ asi le nukpɔkpɔ ƒe dɔwɔnu siwo ɖoa nya ŋu hã ŋu be woazã vovototodedeameme siwo wowɔ ɖe ɖoɖo nu. Kpɔ egbɔ be yeɖo grid ƒe asixɔxɔwo ɖe px
(menye rem
, em
, alo %
).