I-Bootstrap yakhelwe kugridi yamakholomu angu-12 ephendulayo. Siphinde safaka nezakhiwo ezingaguquki- kanye nobubanzi be-fluid-width ngokusekelwe kuleyo sistimu.
Isistimu yegridi ezenzakalelayo enikezwe njengengxenye ye-Bootstrap iyigridi engu-940px-wide, 12-column grid .
Iphinde ibe nokuhlukahluka okune okusabelayo kumadivayisi ahlukahlukene nezinqumo: ifoni, isithombe sethebhulethi, indawo yetafula namadeskithophu amancane, namadeskithophu amakhulu wesikrini esibanzi.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Njengoba kuboniswe lapha, ukwakheka okuyisisekelo kungadalwa “ngamakholomu” amabili, ngalinye lihlanganisa inombolo yamakholomu ayisisekelo angu-12 esiwachaze njengengxenye yesistimu yethu yegridi.
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
Ngesistimu yegridi emile (engenamanzi) ku-Bootstrap, ukwenza isidleke kulula. Ukuze uhlanganise okuqukethwe kwakho, vele wengeze okusha .row
nesethi .span*
yamakholomu ngaphakathi kwekholomu ekhona .span*
.
Imigqa efakwe kusidleke kufanele ifake isethi yamakholomu ahlanganisa inani lamakholomu omzali wayo. Isibonelo, .span3
amakholomu amabili anesidleke kufanele abekwe ngaphakathi kwe- .span6
.
- <div class = "row" >
- <div class = "span12" >
- Ileveli 1 yekholomu
- <div class = "row" >
- <div class = "span6" > Izinga 2 </div>
- <div class = "span6" > Izinga 2 </div>
- </div>
- </div>
- </div>
Isistimu yegridi ewuketshezi isebenzisa amaphesenti obubanzi bekholomu esikhundleni samaphikseli angashintshi. Iphinde ibe nokuhlukahluka okusabelayo okufanayo njengesistimu yethu yegridi engashintshi, iqinisekisa izilinganiso ezifanele zesinqumo esibalulekile sesikrini namadivayisi.
Yenza noma yimuphi umugqa ube uketshezi ngokushintsha .row
ube ngu- .row-fluid
. Amakholomu ahlala efana ncamashi, okwenza kube lula kakhulu ukupheqa phakathi kwezakhiwo ezingaguquki neziwuketshezi.
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
Ukwenza isidleke ngamagridi awuketshezi kuhluke kancane: inani lamakholomu afakwe isidleke alidingi ukufana nomzali. Kunalokho, amakholomu akho asethwa kabusha kuleveli ngayinye ngenxa yokuthi umugqa ngamunye uthatha u-100% wekholomu yomzali.
- <div class = "row-fluid" >
- <div class = "span12" >
- Ileveli 1 yekholomu
- <div class = "row-fluid" >
- <div class = "span6" > Izinga 2 </div>
- <div class = "span6" > Izinga 2 </div>
- </div>
- </div>
- </div>
Iyaguquguquka | Inani elizenzakalelayo | Incazelo |
---|---|---|
@gridColumns |
12 | Inombolo yamakholomu |
@gridColumnWidth |
60px | Ububanzi bekholomu ngayinye |
@gridGutterWidth |
20px | Isikhala esingesihle phakathi kwamakholomu |
@siteWidth |
Isamba esibaliwe sawo wonke amakholomu nama-gutters | Ibala inani lamakholomu namagutha ukusetha ububanzi be- .container-fixed() mixin |
Okwakhelwe ku-Bootstrap yidlanzana lezinto eziguquguqukayo zokwenza ngokwezifiso isistimu yegridi engu-940px, ebhalwe ngenhla. Zonke eziguquguqukayo zegridi zigcinwa kuma-variables.less.
Ukushintsha igridi kusho ukushintsha @grid*
okuguquguqukayo okuthathu nokubuyisela kabusha i-Bootstrap. Shintsha okuguquguqukayo kwegridi kokuguquguqukayo.kancane futhi usebenzise enye yezindlela ezine ezibhalwe phansi ukuze uhlanganise . Uma wengeza amakholomu engeziwe, qiniseka ukuthi ungeza i-CSS yalawo aku-grid.less.
Ukwenza ngendlela oyifisayo igridi kusebenza kuphela ezingeni elimisiwe, igridi engu-940px. Ukuze ulondoloze izici ezisabelayo ze-Bootstrap, kuzodingeka futhi wenze ngendlela oyifisayo amagridi ngokusabela.less.
Isakhiwo esimisiwe nesilula esibanzi esingu-940px-wide, esimaphakathi sanoma iyiphi iwebhusayithi noma ikhasi elihlinzekwe ngomunye <div class="container">
.
- <umzimba>
- <div class = "container" >
- ...
- </div>
- </umzimba>
<div class="container-fluid">
inikeza ukwakheka kwekhasi okuguquguqukayo, ububanzi obuncane kanye nobukhulu obukhulu, kanye nebha eseceleni engakwesobunxele. Ilungele izinhlelo zokusebenza namadokhumenti.
- <div class = "container-fluid" >
- <div class = "row-fluid" >
- <div class = "span2" >
- <!--Okuqukethwe kwebha eseceleni-->
- </div>
- <div class = "span10" >
- <!--Okuqukethwe komzimba-->
- </div>
- </div>
- </div>
I-Bootstrap isekela imibuzo embalwa yemidiya efayeleni elilodwa ukuze isize ukwenza amaphrojekthi akho afaneleke kakhudlwana kumadivayisi ahlukene nezinqumo zesikrini. Nakhu okufakiwe:
Ilebula | Ububanzi besakhiwo | Ububanzi bekholomu | Ububanzi be-Gutter |
---|---|---|---|
Ama-Smartphones | 480px nangaphansi | Amakholomu anoketshezi, abukho ububanzi obungashintshi | |
Amathebulethi esithombe | 480px kuya ku-768px | Amakholomu anoketshezi, abukho ububanzi obungashintshi | |
Amathebulethi e-landscape | 768px kuya ku-979px | 42px | 20px |
Okuzenzakalelayo | 980px nangaphezulu | 60px | 20px |
Isibonisi esikhulu | 1210px nangaphezulu | 70px | 30px |
Ukuqinisekisa ukuthi amadivayisi abonisa amakhasi asabelayo ngendlela efanele, faka i-meta tag yembobo yokubuka.
- <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
Imibuzo yemidiya ivumela i-CSS yangokwezifiso ngokususelwe kwinani lemibandela—izilinganiso, ububanzi, uhlobo lokubonisa, njll—kodwa ngokuvamile igxila eduze min-width
futhi max-width
.
I-Bootstrap ayifaki le mibuzo yemidiya ngokuzenzakalelayo, kodwa ukuqonda nokuyengeza kulula kakhulu futhi kudinga ukusetha okuncane. Unezinketho ezimbalwa zokufaka izici eziphendulayo ze-Bootstrap:
Kungani ungavele uyifake? Iqiniso liyakhulunywa, akuzona zonke izinto ezidinga ukusabela. Esikhundleni sokukhuthaza onjiniyela ukuthi basuse lesi sici, sikubona kungcono kakhulu ukusivumela.
- // Amafoni we-Landscape naphansi
- @media ( ubuningi - ububanzi : 480px ) { ... }
- // Ifoni ye-Landscape ukuze i-portrait tablet
- @media ( ubuningi - ububanzi : 768px ) { ... }
- // Ithebulethi ye-Portrait ku-landscape nedeskithophu
- @media ( iminithi - ububanzi : 768px ) kanye ( ubuningi - ububanzi : 980px ) { ... }
- // Ideskithophu enkulu
- @media ( iminithi - ububanzi : 1200px ) { .. }