Inkqubo yegridi
Sebenzisa igridi yethu enamandla ye-mobile-first flexbox ukwakha uyilo lwazo zonke iimilo kunye nobukhulu ngenxa yenkqubo yekholamu ezilishumi elinambini, amanqanaba amahlanu aphendulayo angagqibekanga, izinto eziguquguqukayo ze-Sass kunye nemixube, kunye neeklasi ezininzi ezichazwe kwangaphambili.
Inkqubo yegridi yeBootstrap isebenzisa uthotho lwezikhongozeli, iirowu, kunye neekholamu kuyilo kunye nokulungelelanisa umxholo. Yakhiwe nge- flexbox kwaye iyaphendula ngokupheleleyo. Ngezantsi umzekelo kunye nokujongwa ngokunzulu kwindlela igridi edibana ngayo.
Umtsha okanye awuqhelananga neflexbox? Funda le CSS Tricks flexbox guide for imvelaphi, isigama, izikhokelo, kunye neziqwengana zekhowudi.
Lo mzekelo ungasentla udala iikholamu ezintathu zobubanzi obulinganayo kwizinto ezincinci, eziphakathi, ezinkulu, kunye nezikhulu ezongezelelweyo zisebenzisa iiklasi zegridi ezichazwe kwangaphambili. Ezo kholamu zibekwe embindini wephepha elinomzali .container
.
Ukuyichitha, nantsi indlela esebenza ngayo:
- Izikhongozeli zibonelela ngendlela yokubeka embindini kunye nokuphehla ngokuthe tye imixholo yesayithi yakho. Sebenzisa
.container
kububanzi bepikseli ephendulayo okanye.container-fluid
kuzowidth: 100%
zonke iindawo zokujonga kunye nobukhulu besixhobo. - Imiqolo ziziqwenga zemiqolo. Ikholamu nganye ine-horizontal
padding
(ebizwa ngokuba yigutter) yokulawula isithuba phakathi kwayo. Okupadding
ke kuchaswa kwimiqolo enemida ethabathayo. Ngale ndlela, wonke umxholo kwikholamu yakho ulungelelaniswe ngokubonakalayo ezantsi kwicala lasekhohlo. - Kuyilo lwegridi, umxholo kufuneka ubekwe ngaphakathi kwikholamu kwaye kuphela iikholamu ezinokuba ngabantwana bangoko kwimiqolo.
- Enkosi kwi-flexbox, iikholamu zegridi ngaphandle kokuchaziweyo
width
ziya kuyila ngokuzenzekelayo njengeekholamu zobubanzi obulinganayo. Umzekelo, iimeko ezine.col-sm
ziya kuba ngokuzenzekelayo ngama-25% ububanzi ukusuka kwindawo encinci yokuphumla ukuya phezulu. Bona icandelo lemiqolo yoyilo oluzenzekelayo ngemizekelo emininzi. - Iiklasi zekholamu zibonisa inani leekholamu ongathanda ukuyisebenzisa ngaphandle kwe-12 enokwenzeka kumqolo ngamnye. Ke, ukuba ufuna iikholamu ezintathu zobubanzi obulinganayo, ungasebenzisa
.col-4
. - Ikholamu
width
s zisetiwe ngokweepesenti, ngoko ke zihlala zimanzi kwaye zinobungakanani obunxulumene nomzali wazo. - Iikholamu zithe tye
padding
ukwenza igatha phakathi kweekholamu zomntu ngamnye, nangona kunjalo, ungasusamargin
kwimiqolo kunye nakwizintlupadding
ezinoluhlu.no-gutters
lwe.row
. - Ukwenza igridi iphendule, kukho iindawo zokuqhawula igridi ezintlanu, enye kwindawo nganye esabelayo yokusabela : zonke iindawo zokuqhawula (ezincinci kakhulu), ezincinci, eziphakathi, ezinkulu, kunye nezikhulu ezingaphezulu.
- Izahlulo zegrid zisekwe kubuncinci bemibuzo yemithombo yeendaba, oku kuthetha ukuba zisebenza kuloo ndawo yoqhawulo kunye nabo bonke abo bangaphezulu kwayo (umz.,
.col-sm-4
isebenza kwizixhobo ezincinci, eziphakathi, ezikhulu, kunye nezikhulu ezongezelelweyo, kodwa hayi indawo yokuqalaxs
). - Ungasebenzisa iiklasi zegridi ezichazwe kwangaphambili (ezifana
.col-4
) okanye imixube yeSass kuphawulo lwesemantic .
Yamkela imida kunye neebugs ezijikeleze iflexbox , njengokungakwazi ukusebenzisa ezinye izinto zeHTML njengezikhongozeli eziguqukayo .
Ngelixa iBootstrap isebenzisa em
s okanye rem
s ukuchaza uninzi lweesayizi, px
s zisetyenziselwa iindawo zokuqhawula igridi kunye nobubanzi besikhongozeli. Oku kungenxa yokuba ububanzi bendawo yokujonga bukwipixels kwaye abutshintshi kunye nobungakanani befonti .
Jonga indlela imiba yendlela yegridi yeBootstrap esebenza ngayo kuzo zonke izixhobo ezininzi ezinetafile ephathwayo.
Incinci kakhulu <576px |
Incinci ≥576px |
Phakathi ≥768px |
Enkulu ≥992px |
Inkulu kakhulu ≥1200px |
|
---|---|---|---|---|---|
Ubukhulu bobukhulu besikhongozeli | Akukho (auto) | 540px | 720px | 960px | 1140px |
Isimaphambili seklasi | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# yeentsika | 12 | ||||
Ububanzi bomsele | 30px (15px kwicala ngalinye lekholamu) | ||||
Nestable | Ewe | ||||
Ukuodola ikholamu | Ewe |
Sebenzisa iiklasi zekholamu ezikhethekileyo zokulinganisa iikholamu ngokulula ngaphandle kodidi oluneenombolo olucacileyo njenge .col-sm-6
.
Umzekelo, nantsi indlela yoyilo lwegridi emibini esebenza kwisixhobo ngasinye kunye nendawo yokujonga, ukusuka xs
ukuya kwi xl
. Yongeza naliphi na inani leeklasi ezingaphantsi kweyunithi kwi-breakpoint nganye oyifunayo kwaye yonke ikholamu iya kuba nobubanzi obufanayo.
Iintsika ezinobubanzi obulinganayo zingophulwa zibe yimigca emininzi, kodwa bekukho iSafari flexbox bug ethintele oku ekusebenzeni ngaphandle kokucacileyo flex-basis
okanye border
. Kukho iindlela zokusebenza kwiinguqulelo zebrowser ezindala, kodwa akufuneki zifuneke ukuba unolwazi lwangoku.
Uyilo oluzenzekelayo lwekholamu yegridi ye-flexbox ikwathetha ukuba unokuseta ububanzi bekholamu enye kwaye ube neekholamu zabazalwana noodade ngokuzenzekelayo ukujikeleza kuyo. Ungasebenzisa iiklasi zegridi ezichazwe kwangaphambili (njengoko kubonisiwe ngezantsi), imixube yegridi, okanye ububanzi bomgca. Qaphela ukuba ezinye iikholamu ziya kwenza ubungakanani kwakhona kungakhathaliseki ububanzi boluhlu oluphakathi.
Sebenzisa col-{breakpoint}-auto
iiklasi ukuya kwiikholomu zobungakanani ngokusekelwe kububanzi bendalo bomxholo wabo.
Yenza imiqolo yobubanzi obulinganayo eyenza imiqolo emininzi ngokufaka .w-100
apho ufuna ukuba imiqolo yaphuke kumgca omtsha. Yenza iikhefu ziphendule ngokuxuba .w-100
kunye nezinye izinto eziphendulayo zokubonisa .
Igridi yeBootstrap ibandakanya amanqanaba amahlanu eeklasi ezichazwe kwangaphambili zokwakhiwa koyilo olunzima oluphendulayo. Yenza ngokwezifiso ubungakanani bekholamu yakho kwizinto ezincinci, ezincinci, eziphakathi, ezinkulu, okanye ezikhulu ezongezelelweyo nangona ubona kufanelekile.
Kwiigridi ezifanayo ukusuka kwezona zixhobo zincinci ukuya kwezikhulu, sebenzisa i .col
kunye .col-*
neeklasi. Cacisa udidi olunamanani xa ufuna ikholamu enobungakanani obukhulu; kungenjalo, zive ukhululekile ukunamathela .col
.
Usebenzisa iseti enye .col-sm-*
yeeklasi, ungenza isixokelelwano segridi esisiseko eqala ngokupakishwa kwaye ibe ithe tye kwindawo encinci yokwaphuka ( sm
).
Awufuni ukuba iikholamu zakho zibekwe ngokulula kwezinye imigangatho yegridi? Sebenzisa indibaniselwano yeeklasi ezahlukeneyo kwinqanaba ngalinye njengoko kufuneka. Jonga lo mzekelo ungezantsi ukuze ufumane ingcamango engcono yendlela esebenza ngayo yonke into.
Sebenzisa izinto eziluncedo zolungelelwaniso lwebhokisi eguquguqukayo ukulungelelanisa amakholomu ngokuthe nkqo nangokuthe tye.
Imijelo phakathi kweentsika kwiiklasi zethu zegridi ezichazwe kwangaphambili zinokususwa nge .no-gutters
. Oku kususa i-negative margin
s ukusuka .row
kunye ne-horizontal padding
kuzo zonke iikholamu zabantwana zangoku.
Nantsi ikhowudi yemvelaphi yokudala ezi zimbo. Qaphela ukuba ukubhala ngaphezulu kwekholamu kuthungelwa kuphela kwikholamu zabantwana bokuqala kwaye kujoliswe kumkhethi wophawu loyelelwano . Ngelixa oku kuvelisa umkhethi othe ngqo, ukukhuselwa kwekholamu kusenokwenziwa ngokwezifiso kunye nezixhobo zokubeka izithuba .
Ngaba ufuna uyilo olusuka kumphetho ukuya kumphetho? Lahla umzali .container
okanye .container-fluid
.
Ngokwenza, nantsi indlela ekhangeleka ngayo. Qaphela ungaqhubeka nokusebenzisa oku kunye nazo zonke ezinye iiklasi zegridi ezichazwe kwangaphambili (kubandakanya ububanzi bekholamu, imigangatho ephendulayo, uodolo ngokutsha, kunye nokunye).
Ukuba ngaphezu kweekholamu ezili-12 zibekwe ngaphakathi kumqolo omnye, iqela ngalinye leekholamu ezongezelelweyo liya kuthi, njengeyunithi enye, isonge kumgca omtsha.
Ukusukela ku-9 + 4 = 13 > 12, le div-ububanzi bekholamu-4 ibotshelelwa kumgca omtsha njengeyunithi enye edibanayo.
Imiqolo elandelayo iqhubeleka nomgca omtsha.
Ukwaphula iikholamu kumgca omtsha kwi-flexbox kufuna i-hack encinci: yongeza i-element kunye width: 100%
naphi na apho ufuna ukusonga iikholomu zakho kumgca omtsha. Ngokuqhelekileyo oku kufezekiswa ngee-multiple .row
s, kodwa ayizizo zonke iindlela zokuphunyezwa ezinokuphendula oku.
Unokusebenzisa eli khefu kwiindawo ezithile zokuqhawula kunye nezixhobo zethu zokubonisa eziphendulayo .
Sebenzisa .order-
iiklasi zokulawula ukulandelelana okubonakalayo komxholo wakho. Ezi klasi ziyaphendula, ngoko unokuseta i- order
breakpoint (umz., .order-1.order-md-2
). Ibandakanya inkxaso 1
kuwo 12
onke amanqanaba amahlanu egridi.
Kukwakho neeklasi eziphendulayo .order-first
kunye .order-last
neeklasi ezitshintsha order
i element ngokufaka isicelo order: -1
kunye order: 13
( order: $columns + 1
), ngokulandelelanayo. Ezi klasi zinokudityaniswa .order-*
neeklasi ezinamanani njengoko zifuneka.
Ungalungisa iikholamu zegridi ngeendlela ezimbini: .offset-
iiklasi zethu zegridi eziphendulayo kunye nezixhobo zethu zomda . Iiklasi zegridi zilingana ukuze zitshatise iikholamu ngelixa imida iluncedo kakhulu kuyilo olukhawulezayo apho ububanzi be-offset buyaguquguquka.
Hambisa iikholamu ekunene usebenzisa .offset-md-*
iiklasi. Ezi klasi zonyusa umda wasekhohlo wekholam *
ngokweekholamu. Umzekelo, .offset-md-4
uhamba .col-md-4
ngaphaya kweekholamu ezine.
Ukongeza kokucocwa kweekholamu kwiindawo eziphendulayo, unokufuna ukuseta ngokutsha ii-offsets. Bona oku kwisenzo kumzekelo wegridi .
Ngokuya kwi-flexbox kwi-v4, ungasebenzisa izinto eziluncedo zomda njengokunyanzela .mr-auto
iikholamu zabantakwabo kude kwenye.
Ukuxhoma umxholo wakho ngegridi engagqibekanga, yongeza entsha .row
kunye neseti .col-sm-*
yeekholamu ngaphakathi koluhlu olukhoyo .col-sm-*
. Imiqolo ebekwe kwizindlu kufuneka ibandakanye uluhlu lwezintlu ezidibanisa ukuya kutsho kwi-12 okanye ngaphantsi (akufuneki ukuba usebenzise zonke iikholamu ezili-12 ezikhoyo).
Xa usebenzisa iifayile ze-Sass zomthombo we-Bootstrap, unokhetho lokusebenzisa ii-variables ze-Sass kunye nemixube ukwenza isiko, i-semantic, kunye noyilo lwephepha eliphendulayo. Iiklasi zethu zegridi ezichazwe kwangaphambili zisebenzisa ezi ziguquguqukayo ezifanayo kunye nemixube ukubonelela ngesuti epheleleyo yeeklasi ezilungele ukusetyenziswa kwiindlela zoyilo eziphendula ngokukhawuleza.
Izinto eziguquguqukayo kunye neemephu zimisela inani leekholamu, ububanzi begutter, kunye nendawo yombuzo wemidiya apho kuza kuqalwa khona iikholamu ezidadayo. Sisebenzisa ezi ukuvelisa iiklasi zegridi ezichazwe kwangaphambili ezibhalwe ngasentla, kunye nemixube yesiko edweliswe ngezantsi.
Imixube isetyenziswa ngokudityaniswa noguquguquko lwegridi ukuvelisa i-CSS ye-semantic yeekholamu zegridi nganye.
Uyakwazi ukuguqula izinto eziguquguqukayo kumaxabiso akho esiko, okanye usebenzise nje imixube ngexabiso labo elingagqibekanga. Nanku umzekelo wokusebenzisa useto olungagqibekanga ukwenza ubeko lwekholamu ezimbini kunye nomsantsa phakathi.
Ukusebenzisa igridi yethu eyakhelwe-ngaphakathi iSass eguquguqukayo kunye neemephu, kuyenzeka ukuba wenze ngokwezifiso iiklasi zegridi ezichazwe kwangaphambili. Guqula inani lamanqanaba, imilinganiselo yombuzo wemidiya, kunye nobubanzi besikhongozeli-emva koko uhlanganise.
Inani leekholamu zegridi zinokulungiswa kusetyenziswa iiguquguquko zeSass. $grid-columns
isetyenziselwa ukuvelisa ububanzi (ngepesenti) yekholamu nganye nganye ngelixa $grid-gutter-width
ibeka ububanzi bemijelo yomhlathi.
Ukuhamba ngaphaya kweekholamu ngokwazo, unokwenza ngokwezifiso inani legridi yemigangatho. Ukuba ubufuna amanqanaba egridi amane kuphela, unokuhlaziya $grid-breakpoints
kunye $container-max-widths
nento enje:
Xa usenza naluphi na utshintsho kwizinto eziguquguqukayo ze-Sass okanye iimephu, kuya kufuneka ugcine utshintsho lwakho kwaye uqokelele kwakhona. Ukwenza njalo kuya kukhupha iseti entsha yeeklasi zegridi ezichazwe kwangaphambili kububanzi bekholomu, i-offsets, kunye nokuodola. Izixhobo ezibonakalayo eziphendulayo nazo ziya kuhlaziywa ukuze kusetyenziswe iindawo zokuqhawula ngokwesiko. Qinisekisa ukuseta amaxabiso egridi kwi px
(hayi rem
, em
, okanye %
).