Sistemụ grid
Jiri grid flexbox mkpanaaka anyị siri ike wulite nhazi nke ụdị na nha niile maka sistemụ kọlụm iri na abụọ, ọkwa nnabata ise, mgbanwe Sass na mixins, yana ọtụtụ klaasị eburu ụzọ kọwaa.
Ka o si arụ ọrụ
Sistemụ grid Bootstrap na-eji usoro akpa, ahịrị, na kọlụm iji hazie na mezie ọdịnaya. Ejiri flexbox rụọ ya ma na-anabata ya nke ọma. N'okpuru ebe a bụ ihe atụ na nleba anya nke ọma ka grid si ejikọta ọnụ.
Ọhụrụ ka ọ bụ nke ị mabeghị na flexbox? Gụọ ntuziaka flexbox CSS aghụghọ a maka ndabere, okwu okwu, ntuziaka na snippets koodu.
Ọmụmaatụ a dị n'elu na-emepụta kọlụm atọ nhata nhata na ngwaọrụ dị obere, ọkara, nnukwu na mgbakwunye buru ibu site na iji klas grid anyị eburu ụzọ kọwaa. Ogidi ndị ahụ gbadoro ụkwụ na ibe ya na nne na nna .container
.
N'ịkwatu ya, nke a bụ ka ọ si arụ ọrụ:
- Akpa na-enye ụzọ isi tinye ihe dị n'ime saịtị gị n'ahịrị na n'ụzọ kwụ ọtọ. Jiri
.container
maka obosara pikselụ na-anabata ma ọ bụ.container-fluid
makawidth: 100%
n'ofe nlele na nha ngwaọrụ niile. - Ahịrị bụ ihe mkpuchi maka ogidi. Kọlụm ọ bụla nwere kehoraizin
padding
(a na-akpọ gutter) maka ịchịkwa ohere dị n'etiti ha. Apadding
na-emegide nke a n'ahịrị ndị nwere oke na-adịghị mma. N'ụzọ dị otú a, ihe niile dị na kọlụm gị na-adakọba n'anya n'akụkụ aka ekpe. - Na nhazi grid, a ga-edobe ọdịnaya n'ime kọlụm na naanị kọlụm nwere ike ịbụ ụmụaka nke ahịrị ozugbo.
- N'ihi flexbox, kọlụm grid na-enweghị nke akọwapụtara
width
ga-edobe ozugbo dị ka kọlụm obosara nhata. Dịka ọmụmaatụ, ihe atụ anọ nke.col-sm
ọ bụla ga-abụ 25% n'obosara site na obere nkwụsịtụ na elu. Hụ ngalaba ogidi nhazi onwe maka ihe atụ ndị ọzọ. - Klas kọlụm na-egosi ọnụọgụ kọlụm ị ga-achọ iji n'ime 12 enwere ike n'otu ahịrị. Yabụ, ọ bụrụ na ịchọrọ ogidi atọ hà nhata n'ofe, ịnwere ike iji
.col-4
. - A na- edobe kọlụm
width
na pasentị, ya mere, ha na-adị mmiri mmiri mgbe niile na nha nha na mmewere nne na nna ha. - Ogidi nwere kehoraizin
padding
iji mepụta gọọlụ n'etiti kọlụm n'otu n'otu, agbanyeghị, ị nwere ike wepu yamargin
na ahịrị yanapadding
na kọlụm nwere.no-gutters
na.row
. - Iji mee ka grid na-anabata ya, e nwere ebe nkwụsịtụ grid ise, otu maka ebe nkwụsịtụ ọ bụla na-anabata : ihe nkwụsịtụ niile (extra small), obere, ọkara, nnukwu na nnukwu.
- Ebe nkwụsịtụ grid dabere na ajụjụ mgbasa ozi obosara kacha nta, nke pụtara na ha na-emetụta otu ebe nkwụsịtụ na ndị niile dị n'elu ya (dịka ọmụmaatụ,
.col-sm-4
na-emetụta obere, ọkara, nnukwu na nnukwu ngwaọrụ, mana ọ bụghị ebexs
nkwụsị mbụ). - Ị nwere ike iji klaasị grid akọwapụtagoro (dị ka
.col-4
) ma ọ bụ mixins Sass maka akara nhụsianya ọzọ.
Mara oke na chinchi gburugburu flexbox , dị ka enweghị ike iji ụfọdụ HTML ọcha dị ka flex containers .
Nhọrọ grid
Ọ bụ ezie na Bootstrap na-eji em
s ma ọ bụ rem
s maka ịkọwapụta ọtụtụ nha, px
a na-eji s maka ebe nkwụsịtụ grid na obosara akpa. Nke a bụ n'ihi na obosara ihe nlegharị anya dị na pikselụ ma ọ dịghị agbanwe n'ogo mkpụrụedemede .
Hụ ka akụkụ nke sistemụ grid Bootstrap si arụ ọrụ n'ofe ngwaọrụ nwere tebụl aka.
Obere obere <576px |
Obere ≥576px |
Ọkara ≥768px |
Nnukwu ≥992px |
Nnukwu nnukwu ≥1200px |
|
---|---|---|---|---|---|
Obosara akpa kacha | Ọ nweghị (akpaaka) | 540px | 720px | 960px | 1140px |
Nganiihu klaasị | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# nke ogidi | 12 | ||||
Obosara gutter | 30px (15px n'akụkụ ọ bụla nke kọlụm) | ||||
Akwụsịghị ya | Ee | ||||
Ntụnye kọlụm | Ee |
Ogidi nhazi onwe
Jiri klaasị kọlụm gbawara agbawa maka nha kọlụm dị mfe na-enweghị klaasị akọwapụtara nke ọma dị ka .col-sm-6
.
Ha nhata-obosara
Dịka ọmụmaatụ, ebe a bụ nhazi grid abụọ na-emetụta ngwaọrụ ọ bụla na nlegharị anya, site xs
na gaa na xl
. Tinye klaasị ọ bụla na-erughị nkeji maka ebe nkwụsịtụ ọ bụla ịchọrọ na kọlụm ọ bụla ga-abụ otu obosara.
Ahịrị ọtụtụ nha nha obosara
Mepụta ogidi obosara nhata nke na-agbatị ọtụtụ ahịrị site na ịtinye .w-100
ebe ịchọrọ ka ogidi ndị ahụ gbajie n'ahịrị ọhụrụ. Mee nkwụsịtụ ahụ ka ọ dị mma site na ịgwakọta .w-100
na ụfọdụ ngwa ngosi na-anabata .
Enwere ahụhụ flexbox Safari nke gbochiri nke a ịrụ ọrụ na-enweghị ihe doro anya flex-basis
ma ọ bụ border
. Enwere ihe nleba anya maka ụdị ihe nchọgharị ochie, mana ha ekwesịghị ịdị mkpa ma ọ bụrụ na ihe nchọgharị gị lekwasịrị anya adabaghị n'ụdị ụdị ahụhụ.
Ịtọ ntọala otu obosara kọlụm
Nhazi akpaaka maka kọlụm flexbox pụtakwara na ị nwere ike ịtọ obosara nke otu kọlụm wee mee ka ogidi nwanne gbanwee ya ozugbo. Ị nwere ike iji klaasị grid akọwapụtagoro (dị ka egosiri n'okpuru), mixins grid, ma ọ bụ obosara ahịrị. Rịba ama na ogidi ndị ọzọ ga-agbanwe nha n'agbanyeghị obosara nke kọlụm etiti.
Ọdịnaya obosara na-agbanwe agbanwe
Jiri col-{breakpoint}-auto
klaasị mee nha ogidi dabere na obosara okike nke ọdịnaya ha.
Klas na-anabata
Grid nke Bootstrap gụnyere ọkwa ise nke klaasị akọwapụtagoro maka iwulite okirikiri nhọrọ ukwuu na-anabata. Hazie nha nke kọlụm gị na obere obere, obere, ọkara, nnukwu ma ọ bụ nnukwu ngwaọrụ agbanyeghị na ọ dabara gị.
Ebe nkwụsịtụ niile
Maka grids bụ otu site na ngwaọrụ kacha nta ruo na nke kachasị, jiri .col
na .col-*
klaasị. Ezipụta klaasị nwere nọmba mgbe ịchọrọ kọlụm nwere oke nha; ma ọ bụghị ya, nweere onwe gị ịrapara na .col
.
Akwadoro na kehoraizin
N'iji otu .col-sm-*
klaasị, ị nwere ike ịmepụta usoro grid bụ isi nke na-amalite n'usoro wee bụrụ kehoraizin na obere nkwụsịtụ ( sm
).
Gwakọta na dakọtara
Ịchọghị ka kọlụm gị kwụkọ naanị n'ụfọdụ ọkwa grid? Jiri ngwakọta nke klaasị dị iche iche maka ọkwa ọ bụla dịka achọrọ. Lee ihe atụ n'okpuru ka ị nweta echiche ka mma ka ọ na-arụ ọrụ.
Ọgba mmiri
Enwere ike ịhazigharị olulu mmiri site na padding akọwapụtara nke ọma na klaasị oke adịghị mma. Ka ịgbanwee gọọmentị n'ahịrị enyere, jikọta akụrụngwa oke na-adịghị mma .row
na ngwa padding dabara na .col
s. Nne .container
ma ọ bụ nna ma ọ bụ nne ma ọ bụ .container-fluid
nna nwere ike imeziwanye ya ka ịzenarị oke mmiri na-achọghị, na-eji ngwa nkpuchi dakọtara ọzọ.
Nke a bụ ọmụmaatụ nke ịhazi grid Bootstrap na ebe nkwụsịtụ buru ibu lg
na n'elu. Anyị ejirila .col
padding mụbaa .px-lg-5
, mebie nke ahụ na .mx-lg-n5
nne .row
na nna wee mezie ihe .container
mkpuchi ahụ na .px-lg-5
.
Ahịrị ogidi
Jiri .row-cols-*
klaasị na-anabata ngwa ngwa tọọ ọnụọgụ ogidi ndị kacha nye ọdịnaya na nhazi gị ngwa ngwa. Ebe .col-*
klaasị nkịtị na-emetụta kọlụm n'otu n'otu (dịka ọmụmaatụ, .col-md-4
), klaasị ahịrị ahịrị ka edobere na nne na nna .row
dịka ụzọ mkpirisi.
Jiri klaasị ahịrị ahịrị ndị a ka imepụta usoro grid ngwa ngwa ma ọ bụ jikwaa okirikiri nhọrọ ukwuu kaadị gị.
Ị nwekwara ike iji Sass mixin na-esote row-cols()
,:
Nhazi
Jiri akụrụngwa nhazi flexbox iji kwado kọlụm kwụ ọtọ na kwụ n'ahịrị. Internet Explorer 10-11 anaghị akwado nhazi kwụ ọtọ nke ihe ndị na-agbanwe agbanwe mgbe akpa mgbanwe nwere otu min-height
dị ka egosiri n'okpuru. Lee Flexbugs #3 maka nkọwa ndị ọzọ.
Nhazi kwụ ọtọ
Nkwanye kwụ ọtọ
Enweghị olulu mmiri
Enwere ike iwepụ gọọlụ n'etiti kọlụm dị na klaasị grid anyị eburu ụzọ wepụ .no-gutters
. Nke a na-ewepụ ihe na-adịghị mma margin
site .row
na na kehoraizin padding
si na kọlụm ụmụaka niile.
Nke a bụ koodu isi mmalite maka imepụta ụdị ndị a. Rụba ama na nbibi kọlụm bụ naanị kọlụm ụmụaka mbụ ma ezubere ya site na nhọpụta àgwà . Ọ bụ ezie na nke a na-ewepụta onye ahọpụtara akọwapụtara nke ọma, padding kọlụm ka nwere ike ịhazi ya site na iji ngwa spacing .
Chọrọ imewe akụkụ ruo n'ọnụ? Hapụ nne .container
ma ọ bụ nna ma ọ bụ .container-fluid
.
Na omume, nke a bụ ka ọ dị. Rịba ama na ị nwere ike ịga n'ihu na-eji nke a na klaasị grid ndị ọzọ akọpụtagoro (gụnyere obosara kọlụm, ọkwa na-anabata, ndezigharị, na ndị ọzọ).
Mkpuchi kọlụm
Ọ bụrụ na etinyere ihe karịrị ogidi iri na abụọ n'ime otu ahịrị, otu ọ bụla nke kọlụm agbakwunyere ga-, dịka otu nkeji, kechie n'ahịrị ọhụrụ.
Ebe ọ bụ na 9 + 4 = 13> 12, nke a 4-ogidi-wide div na-anakọta n'elu ọhụrụ ahịrị dị ka otu contiguous unit.
Ogidi ndị na-esote na-aga n'ihu n'ahịrị ọhụrụ ahụ.
Agbaji kọlụm
Ịgbajie ogidi gaa n'ahịrị ọhụrụ na flexbox chọrọ obere mbanye anataghị ikike: tinye otu mmewere na width: 100%
ebe ọ bụla ịchọrọ kechie ogidi gị na ahịrị ọhụrụ. Dị ka ọ na-adịkarị, a na-eme nke a site na ọtụtụ .row
s, mana ọ bụghị usoro mmejuputa iwu ọ bụla nwere ike ịza nke a.
Ị nwekwara ike itinye oge ezumike a na ebe nkwụsịtụ kpọmkwem site na iji ihe ngosi ngosi anyị .
Na-atụgharịgharị
ịtụ klaasị
Jiri .order-
klas maka ịchịkwa usoro anya nke ọdịnaya gị. Klas ndị a na-anabata ya, yabụ ị nwere ike ịtọ ebe order
nkwụsịtụ (dịka ọmụmaatụ, .order-1.order-md-2
). Gụnyere nkwado maka n'ofe ọkwa grid ise niile 1
.12
Enwekwara nnabata .order-first
na .order-last
klaasị na-agbanwe order
ihe mmewere site na itinye order: -1
na order: 13
( order: $columns + 1
), n'otu n'otu. Enwere ike jikọta klaasị ndị a na .order-*
klaasị ọnụọgụ dị ka achọrọ.
Kọlụm na-emezigharị
Ị nwere ike mebie kọlụm grid n'ụzọ abụọ: .offset-
klaasị grid anyị na-anabata ya na akụrụngwa oke anyị . A na-ahazi klaasị grid ka o kwekọọ na kọlụm ebe oke ala bara uru maka nhazi ngwa ngwa ebe obosara nke nkwụghachi na-agbanwe.
Klas kwụsịrị
Bugharịa ogidi gaa n'aka nri site na iji .offset-md-*
klaasị. Klas ndị a na-abawanye oke aka ekpe nke kọlụm site na *
kọlụm. Dịka ọmụmaatụ, .offset-md-4
na-ebugharị .col-md-4
n'elu ogidi anọ.
Na mgbakwunye na ikpochapụ kọlụm na ebe nkwụsịtụ na-anabata, ọ nwere ike ịdị mkpa ka ịtọgharịa nkwụghachi. Hụ nke a ka ọ na-eme n'atụmatụ grid .
Ngwa ngwa oke
Site na ịkwaga flexbox na v4, ị nwere ike iji akụrụngwa oke dị .mr-auto
ka ịmanye kọlụm nwanne pụọ n'otu n'otu.
Akwu
Iji grid ndabara tinye akwu ọdịnaya gị, tinye nke ọhụrụ .row
na nhazi .col-sm-*
kọlụm n'ime .col-sm-*
kọlụm dị adị. Ahịrị akwụkwụ kwesịrị ịgụnye otu kọlụm gbakwụnye ihe ruru 12 ma ọ bụ ole na ole (ọ chọghị ka ị jiri kọlụm 12 niile dị).
Ngwakọta Sass
Mgbe ị na-eji faịlụ Sass isi mmalite Bootstrap, ị nwere nhọrọ nke iji Sass variables na mixins mepụta nhazi ihu akwụkwọ omenala, nkọwa na nke na-anabata. Klaasị grid anyị akọwapụtagoro na-eji otu mgbanwe na mixins ndị a iji nye otu klaasị akwadoro iji maka nhazi ngwa ngwa na-anabata ya.
Mgbanwe
Mgbanwe na maapụ na-ekpebi ọnụọgụ nke kọlụm, obosara gotter na ebe ajụjụ mgbasa ozi ga-amalite ogidi ndị na-ese n'elu mmiri. Anyị na-eji ndị a iji wepụta klaasị grid akọwapụtara n'elu, yana maka mixins omenala edepụtara n'okpuru.
Ngwakọta
A na-eji mixins na njikọta yana mgbanwe grid iji mepụta CSS ntụgharị uche maka kọlụm grid nke ọ bụla.
Ojiji ọmụmaatụ
Ị nwere ike gbanwee mgbanwe ndị ahụ ka ọ bụrụ ụkpụrụ omenala nke gị, ma ọ bụ jiri mixins na ụkpụrụ ndabara ha. Nke a bụ ọmụmaatụ nke iji ntọala ndabara iji mepụta nhazi kọlụm abụọ nwere oghere n'etiti.
Na-ahazi grid
Iji grid Sass arụnyere na maapụ anyị, ọ ga-ekwe omume ịhazi klaasị grid akọwapụtachara kpamkpam. Gbanwee ọnụ ọgụgụ nke ọkwa, akụkụ ajụjụ mgbasa ozi na obosara akpa - wee chịkọtaghachi.
Ogidi na gotters
Enwere ike gbanwee ọnụọgụ nke kọlụm grid site na mgbanwe Sass. $grid-columns
a na-eji emepụta obosara (na pasent) nke kọlụm nke ọ bụla ma $grid-gutter-width
na-edozi obosara maka gọọlụ kọlụm.
Ọkwa grid
N'ịgafe ogidi ndị ahụ n'onwe ha, ị nwekwara ike hazie ọnụọgụgụ nke grid. Ọ bụrụ na ịchọrọ naanị ọkwa grid anọ, ị ga-emelite ya $grid-breakpoints
na $container-max-widths
ihe dịka nke a:
Mgbe ị na-eme mgbanwe ọ bụla na mgbanwe Sass ma ọ bụ maapụ, ị ga-achọ ịchekwa mgbanwe gị wee chịkọta ya. Ime nke a ga-ewepụta klas ọhụrụ grid akọwapụtagoro maka obosara kọlụm, mwepu na ịtụ. A ga-emelitekwa akụrụngwa visibiliti na-anabata iji jiri ebe nkwụsịtụ omenala. Gbaa mbọ hụ na ịtọọ ụkpụrụ grid na px
(ọ bụghị rem
, em
, ma ọ bụ %
).