Grid ɖoɖo si woɖo ɖi si wona abe Bootstrap ƒe akpa aɖe ene nye grid si keke 940px, si ƒe sɔti 12 le .

Azɔ hã, mɔ̃ vovovowo kple woƒe nɔnɔmewo ƒe nɔnɔme vovovo ene siwo wɔa dɔ nyuie la le esi: telefon, tablɛt ƒe nɔnɔmetata, kplɔ̃ ƒe nɔnɔme kple kplɔ̃ suewo, kple kplɔ̃ gã siwo ƒe ŋkume keke.

<div klass = "fli" > 
  <div ƒe hatsotso = "span4" > ... </div> 
  <div ƒe hatsotso = "span8" > ... </div> 
</div> ƒe nyawo

Abe alesi woɖee fia le afisia ene la, woateŋu awɔ ɖoɖo vevi aɖe kple "sɔti" eve, ɖesiaɖe akeke gɔmeɖoanyi sɔti 12 siwo míeɖe gɔme be wonye míaƒe grid ɖoɖoa ƒe akpa aɖe la ƒe xexlẽme aɖe.

Le static (non-fluid) grid system le Bootstrap me la, nesting le bɔbɔe. Be nàtsɔ wò nyatakakawo aɖo atɔ me la, ɖeko nàtsɔ sɔti yeye .rowkple ƒuƒoƒo aɖe akpe ɖe .span*sɔti si li xoxo .span*ŋu.

Kpɔɖeŋu

Ele be fli siwo wotsɔ ƒo ƒui la nanye sɔtiwo ƒe ƒuƒoƒo si ƒo ƒu ɖe sɔtiwo ƒe xexlẽme si le edzila ŋu. .span3Le kpɔɖeŋu me, ele be woatsɔ sɔti eve siwo wotsɔ ƒo ƒui la ade .span6.

<div klass = "fli" > 
  <div ƒe hatsotso = "span12" > 
    Dzidzenu 1 lia le sɔti me
    <div klass = "fli" > 
      <div klass = "span6" > Dzidzenu 2 </div> 
      <div klass = "span6" > Dzidzenu 2 </div> 
    </div> ƒe nyawo
  </div> ƒe nyawo
</div> ƒe nyawo

Alafa memamãwo, ke menye pikselwo o

Fluid grid ɖoɖoa zãa alafa memamãwo na sɔtiwo ƒe kekeme ɖe piksel siwo woɖo ɖi teƒe. Eƒe ŋuɖoɖo ƒe tɔtrɔwo hã le esi abe míaƒe fixed grid system ene, si kpɔa egbɔ be agbɔsɔsɔme si sɔ na key screen resolutions kple mɔ̃wo.

Lãmetsiwo ƒe fliwo

Na fli ɖesiaɖe nanye tsi to tɔtrɔ .rowɖe .row-fluid. Sɔtiawo nɔa nenema tututu, si wɔnɛ be wònɔa bɔbɔe ŋutɔ be woatrɔ ɖe ɖoɖo siwo woɖo ɖe ɖoɖo nu kple esiwo me tsi le dome.

Dzesidede dzesiwo

<div klass = "fli-tsi" > 
  <div ƒe hatsotso = "span4" > ... </div> 
  <div ƒe hatsotso = "span8" > ... </div> 
</div> ƒe nyawo

Nesting kple fluid grids to vovo vie: mehiã be nested columns ƒe xexlẽme nasɔ kple dzila o. Ke boŋ, wogbugbɔ ɖoa ​​wò sɔtiwo ɖe ɖoɖo ɖesiaɖe dzi elabena fli ɖesiaɖe xɔa dzila ƒe sɔti la ƒe 100%.

<div klass = "fli-tsi" > 
  <div ƒe hatsotso = "span12" > 
    Dzidzenu 1 lia le sɔti me
    <div klass = "fli-tsi" > 
      <div klass = "span6" > Dzidzenu 2 </div> 
      <div klass = "span6" > Dzidzenu 2 </div> 
    </div> ƒe nyawo
  </div> ƒe nyawo
</div> ƒe nyawo

Nusiwo trɔna le LESS me

Wotu ɖe Bootstrap me nye tɔtrɔ ʋɛ aɖewo hena asitɔtrɔ le 940px grid ɖoɖo si woɖo ɖi ŋu, si woŋlɔ ɖe etame. Wodzraa tɔtrɔwo katã na grid la ɖo ɖe tɔtrɔwo me.less.

Ale si nàwɔ atrɔ asi le eŋu wòasɔ ɖe nɔnɔmea nu

Trɔtrɔ le grid la ŋu fia be woatrɔ tɔtrɔ etɔ̃awo @grid*eye woagbugbɔ aƒo Bootstrap nu ƒu. Trɔ grid ƒe tɔtrɔwo le variables.less me eye nàzã mɔ ene siwo woŋlɔ ɖi la dometɔ ɖeka atsɔ agbugbɔ aƒo ƒui . Ne èle sɔti bubuwo kpem ɖe eŋu la, kpɔ egbɔ be yetsɔ CSS kpe ɖe eŋu na amesiwo le grid.less me.

Amewo ƒe nyaŋuɖoɖo me nɔnɔ

Grid la ƒe tɔtrɔwɔwɔ wɔa dɔ le ɖoɖo si woɖo ɖi, 940px grid la ko dzi. Be nàlé Bootstrap ƒe akpa siwo ɖoa nya ŋu la me ɖe asi la, ahiã be nàtrɔ asi le gridsawo hã ŋu le responsive.less me.

Woɖo ɖoɖo si wowɔ ɖe ɖoɖo nu

940px-kekeme, si le titina ƒe ɖoɖo si woɖo ɖi eye wòle bɔbɔe na nyatakakadzraɖoƒe alo axa ɖesiaɖe kloe si ame ɖeka na <div class="container">.

<ŋutilã>
  <div klass = "nugoe" > 
    ...
  </div> ƒe nyawo
</body>

Lãmetsiwo ƒe ɖoɖowɔwɔ

<div class="container-fluid">na axa ƒe ɖoɖo si te ŋu trɔna, min- kple max-kekeme, kple miame ƒe axadzinu. Enyo ŋutɔ na apps kple docs.

<div class = "nugoe-tsi" > 
  <div klass = "fli-tsi" > 
    <div ƒe hatsotso = "span2" > 
      <!--Axadzinuŋɔŋlɔwo-->
    </div> ƒe nyawo
    <div ƒe hatsotso = "span10" > 
      <!--Ŋutilã me nyawo-->
    </div> ƒe nyawo
  </div> ƒe nyawo
</div> ƒe nyawo

Mɔ̃ siwo wodoa alɔe

Bootstrap doa alɔ media biabia ʋee aɖewo le faɛl ɖeka me be wòakpe ɖe ŋuwò nàna wò dɔwo nasɔ nyuie wu le mɔ̃ vovovowo kple screen ƒe nɔnɔmewo dzi. Nusiwo le emee nye esi:

Ebia be woawɔ meta tag

Be nàkpɔ egbɔ be mɔ̃wo ɖe axa siwo ɖoa nya ŋu nyuie la, de viewport meta tag la eme.

<meta ŋkɔ = "nukpɔƒe" emenyawo = "kekeme=mɔ̃-kekeme, gɔmedzedze-dzidzenu=1.0" >  

Nusi wowɔna

Media biabia ɖe mɔ na CSS tɔxɛ si wotu ɖe nɔnɔme geɖe dzi—dzidzemewo, kekemewo, ɖeɖefia ƒomevi, kple bubuawo—gake zi geɖe la, woƒe susu nɔa nu ŋu ƒo xlã min-widthkple max-width.

• Trɔ asi le sɔti ƒe kekeme ŋu le míaƒe grid la me
• Ƒo nuawo ɖe wo nɔewo dzi le esi teƒe be nànɔ tsia dzi le afisiafi si wòhiã le
• Trɔ tanyawo kple nuŋɔŋlɔwo ƒe lolome be woasɔ na mɔ̃wo wu

Bootstrap metsɔa media biabia siawo dea eme le eɖokui si o, gake wo gɔmesese kple wo tsɔtsɔ kpee le bɔbɔe ŋutɔ eye ebia ɖoɖo sue aɖe ko. Tiatia ʋee aɖewo le asiwò nàtsɔ ade Bootstrap ƒe ŋuɖoɖo ƒe nɔnɔmewo eme:

1. Zã nyaŋuɖoɖo ƒe tɔtrɔ si woƒo ƒu, bootstrap-responsive.css
2. Tsɔ @import "responsive.less" kpee eye nàgbugbɔ aƒo Bootstrap nu ƒu
3. Trɔ asi le responsive.less ŋu eye nàgbugbɔ aƒo ƒu abe faɛl si le vovo ene

Nukata màtsɔe ade eme ko oa? Ne míagblɔe tututu la, menye nusianue wòle be wòawɔ nu ɖe ​​ame ŋu nyuie o. Le esi teƒe be míade dzi ƒo na dɔwɔlawo be woaɖe nɔnɔme sia ɖa la, míebu eŋu be anyo wu be míawɔe wòawɔ dɔ.

  // Landscape telefonwo kple anyime
  @media ( max - kekeme : 480px ) { ... }.     
 
  // Anyigba ƒe nɔnɔme telefon na nɔnɔmetata tablɛt
  @media ( max - kekeme : 768px ) { ... }.     
 
  // Portrait tablet ɖe anyigba kple kplɔ̃ dzi
  @media ( min - kekeme : 768px ) kple ( max - kekeme : 980px ) { ... }.        
 
  // Dɔwɔkplɔ̃ gã aɖe
  @media ( min - kekeme : 1200px ) { . } .