I-scaffolding

I-Bootstrap yakhelwe kugridi yamakholomu angu-12 ephendulayo. Siphinde safaka nezakhiwo ezingaguquki- kanye nobubanzi be-fluid-width ngokusekelwe kuleyo sistimu.

Okuzenzakalelayo kwegridi ye-940px

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.

Ukusetha amakholomu

4 isiqephu 4

3 isiqephu 3

8 isiqephu 4

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Amakholomu enza isidleke

Ngesistimu yegridi emile (engenamanzi) ku-Bootstrap, ukwenza isidleke kulula. Ukuze uhlanganise okuqukethwe kwakho, vele wengeze okusha .rownesethi .span*yamakholomu ngaphakathi kwekholomu ekhona .span*.

Isibonelo

Ileveli 1 yekholomu

Ileveli 2

<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>

Ukwenza ngokwezifiso igridi

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

Okuguquguqukayo kokuthi LESS

Okwakhelwe ku-Bootstrap yidlanzana lezinto eziguquguqukayo zokwenza ngokwezifiso isistimu yegridi engu-940px, ebhalwe ngenhla. Zonke eziguquguqukayo zegridi zigcinwa kuma-variables.less.

Indlela yokwenza ngendlela oyifisayo

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.

Ukuhlala uphendula

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 esilungisiwe

Isakhiwo esimisiwe nesilula esibanzi esingu-940px-wide, esimaphakathi sanoma iyiphi iwebhusayithi noma ikhasi elihlinzekwe ngomunye <div class="container">.

<umzimba>
  <div class = "container" > 
    ...
  </div>
</umzimba>

Isakhiwo samanzi

<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>

Amadivayisi asekelwe

I-Bootstrap isekela imibuzo embalwa yemidiya ukusiza 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-940px	44px	20px
Okuzenzakalelayo	940px nangaphezulu	60px	20px
Isibonisi esikhulu	1210px nangaphezulu	70px	30px

Abakwenzayo

Imibuzo yemidiya ivumela i-CSS yangokwezifiso ngokususelwe kwinani lemibandela—izilinganiso, ububanzi, uhlobo lokubonisa, njll—kodwa ngokuvamile igxila eduze min-widthfuthi max-width.

Shintsha ububanzi bekholomu kugridi yethu
Staki izici esikhundleni sokuntanta lapho kudingeka khona
Shintsha usayizi wezihloko nombhalo ukuze ulungele amadivayisi

Ukusebenzisa imibuzo yabezindaba

I-Bootstrap ayifaki le mibuzo yemidiya ngokuzenzakalelayo, kodwa ukuqonda nokuyengeza kulula kakhulu futhi kudinga ukusetha okuncane. Unezinketho ezimbalwa zokufaka izici eziphendulayo ze-Bootstrap:

Sebenzisa inguqulo ehlanganisiwe ephendulayo, i-bootstrap-responsive.css
Engeza i-@import "responsive.less" bese uhlanganisa kabusha i-Bootstrap
Guqula futhi uhlanganise okusabelayo.kancane njengokuhlukile

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 : 940px ) { ... }        
 
  // Ideskithophu enkulu
  @media ( iminithi - ububanzi : 1200px ) { .. }