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

<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

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ɔ nyadzɔdzɔgblɔmɔnuwo ƒe nyabiase ʋɛ aɖewo 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:

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 eŋu eye nàgbugbɔ aƒo responsive.less abe ɖe 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 : 940px ) { ... }.        
 
  // Dɔwɔkplɔ̃ gã aɖe
  @media ( min - kekeme : 1200px ) { . } .