Gukubita

Bootstrap yubatswe kumurongo wa 12 winkingi. Twashizemo kandi imiterere- na fluid-ubugari imiterere ishingiye kuri sisitemu.

Mburabuzi 940px

Sisitemu isanzwe ya grid yatanzwe nkigice cya Bootstrap ni 940px-ubugari, 12-inkingi .

Ifite kandi uburyo bune bwitondewe bwibikoresho bitandukanye nicyemezo: terefone, ibishushanyo mbonera bya tablet, imiterere yimeza hamwe na desktop ntoya, hamwe na desktop nini yagutse.

<div class = "umurongo" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Nkuko bigaragara hano, imiterere shingiro irashobora gushirwaho hamwe n "" inkingi "ebyiri, buri kimwekimwe cyose cyumubare winkingi 12 zifatizo twasobanuye nkigice cya sisitemu ya gride.

Kureka inkingi

4 offset 4

3 offset 3

8 offset 4

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

Inkingi

Hamwe na sisitemu ya static (idafite amazi) muri sisitemu ya Bootstrap, guterana biroroshye. Kugirango ushire ibikubiyemo, gusa ongeraho ibishya .rowkandi ushireho .span*inkingi murwego ruriho .span*.

Urugero

Urwego 1 rwinkingi

Urwego 2

<div class = "umurongo" > 
  <div class = "span12" > 
    Urwego 1 rwinkingi
    <div class = "umurongo" > 
      <div class = "span6" > Urwego 2 </div> 
      <div class = "span6" > Urwego 2 </div> 
    </div>
  </div>
</div>

Urusobekerane

Birahinduka	Agaciro gasanzwe	Ibisobanuro
`@gridColumns`	12	Umubare winkingi
`@gridColumnWidth`	60px	Ubugari bwa buri nkingi
`@gridGutterWidth`	20px	Umwanya mubi hagati yinkingi
`@siteWidth`	Kubara igiteranyo cyinkingi zose	Kubara umubare winkingi nigituba kugirango ushireho ubugari bwa `.container-fixed()`mixin

Ibihinduka muri BIKE

Yubatswe muri Bootstrap nintoki zimpinduka zo guhitamo sisitemu ya gride ya 940px isanzwe, yanditse hejuru. Ibihinduka byose kuri gride bibitswe mubihinduka.less.

Uburyo bwo guhitamo

Guhindura gride bisobanura guhindura ibintu bitatu @grid*bihinduka no gusubiramo Bootstrap. Hindura grid ihindagurika mubihinduka.nta kandi ukoreshe bumwe muburyo bune bwanditse kugirango usubiremo . Niba wongeyeho inkingi nyinshi, menya neza ko wongera CSS kubari muri grid.less.

Gukomeza kwitabira

Guhindura gride ikora gusa kurwego rusanzwe, gride ya 940px. Kugirango ugumane ibintu bisubiza muri Bootstrap, ugomba kandi guhitamo gride mubisubizo.less.

Imiterere ihamye

Mburabuzi kandi yoroshye 940px-ubugari, imiterere igizwe nurubuga rwose cyangwa page yatanzwe numwe <div class="container">.

<body>
  <div class = "kontineri" > 
    ...
  </div>
</body>

Imiterere y'amazi

<div class="container-fluid">itanga urupapuro rworoshye, min- na max-ubugari, hamwe nibumoso. Nibyiza kuri porogaramu na doc.

<div class = "kontineri-fluid" > 
  <div class = "umurongo-utemba" > 
    <div class = "span2" > 
      <! - Ibirimo kuruhande ->
    </div>
    <div class = "span10" > 
      <! - Ibiri mu mubiri ->
    </div>
  </div>
</div>

Ibikoresho bishyigikiwe

Bootstrap ishyigikira urutonde rwibibazo byinshi byitangazamakuru kugirango bigufashe gukora imishinga yawe neza kubikoresho bitandukanye no gufata ibyemezo bya ecran. Dore ibirimo:

Ikirango	Ubugari bw'imiterere	Ubugari bw'inkingi	Ubugari
Amaterefone	480px no hepfo	Inkingi zamazi, nta bugari bwagenwe
Ibishushanyo mbonera	480px kugeza kuri 768px	Inkingi zamazi, nta bugari bwagenwe
Ibibaho	768px kugeza 940px	44px	20px
Mburabuzi	940px no hejuru	60px	20px
Kugaragaza binini	1210px no hejuru	70px	30px

Ibyo bakora

Ibibazo byibitangazamakuru byemerera CSS yihariye ishingiye kubintu byinshi - ibipimo, ubugari, ubwoko bwerekana, nibindi - ariko mubisanzwe byibanda hafi min-widthna max-width.

Hindura ubugari bwinkingi muri gride yacu
Shyira ibintu aho kureremba aho bikenewe hose
Hindura imitwe hamwe ninyandiko kugirango bibe byiza kubikoresho

Gukoresha ibibazo by'itangazamakuru

Bootstrap ntabwo ihita ikubiyemo ibyo bibazo byitangazamakuru, ariko kubyumva no kubyongera biroroshye cyane kandi bisaba gushiraho bike. Ufite amahitamo make yo gushiramo ibiranga ibisubizo bya Bootstrap:

Koresha verisiyo yakusanyirijwe hamwe, bootstrap-yitabira.css
Ongeraho @import "yishura.less" hanyuma usubiremo Bootstrap
Hindura kandi usubize ibisubizo.nta nkutandukanye

Ubona gute ushizemo gusa? Ukuri kuvugwe, ntabwo ibintu byose bigomba kwitabwaho. Aho gushishikariza abitezimbere gukuraho iyi miterere, dusanga ari byiza kuyishoboza.

  // Amaterefone yimiterere no hepfo
  @media ( max - ubugari : 480px ) { ... }     
 
  // Terefone nyaburanga kugirango igaragaze tablet
  @media ( max - ubugari : 768px ) { ... }     
 
  // Igishushanyo cyerekana ibishushanyo mbonera hamwe na desktop
  @media ( min - ubugari : 768px ) na ( max - ubugari : 940px ) { ... }        
 
  // Ibiro binini
  @media ( min - ubugari : 1200px ) { .. }