O le fa'aogaina o le fa'asologa fa'asologa o lo'o tu'uina atu o se vaega o le Bootstrap o le 940px-lautele, 12-column grid .

E iai fo'i suiga e fa e tali mai mo masini eseese ma fa'ai'uga: telefoni, ata papalama, laufanua laulau ma tama'i komipiuta, ma lau komepiuta lapopo'a.

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

E pei ona fa'aalia iinei, e mafai ona faia se fa'atulagaga fa'avae i "koluma" e lua, e ta'itasi ta'itasi i se numera o koluma fa'avae e 12 na matou fa'amatalaina o se vaega o la matou faiga fa'asologa.

Fa'atasi ai ma le fa'aogaina (non-fluid) grid system i Bootstrap, e faigofie le fa'amomoli. Ina ia fa'aputu lau anotusi, na'o le fa'aopoopoina o se koluma fou .rowma se seti .span*i totonu ole .span*koluma o iai.

Faataitaiga

O laina fa'aputu e tatau ona aofia ai se seti o koluma e fa'aopoopo i le numera o koluma o lona matua. Mo se faʻataʻitaʻiga, e lua .span3koluma faʻapipiʻi e tatau ona tuʻuina i totonu o se .span6.

<div class = "laina" > 
  <div vasega = "span12" > 
    Laasaga 1 o le koluma
    <div class = "laina" > 
      <div class = "span6" > Laasaga 2 </div> 
      <div class = "span6" > Laasaga 2 </div> 
    </div>
  </div>
</div>

pasene, ae le o pika

O le fa'aogaina o le fa'aogaina o le fa'aogaina o pasene mo le lautele o koluma nai lo pika fa'amau. E iai fo'i suiga tutusa e tali mai ai e pei o la tatou faiga fa'avasega fa'amautu, fa'amautinoaina le fua fa'atatau mo fa'ai'uga mata ma masini.

laina vai

Fai so'o se laina vai i le na'o le sui .rowi le .row-fluid. O koluma e tumau i le tutusa, ma fa'afaigofie ai le fe'ai i le va o fa'atonuga ma'i.

Fa'ailoga

<div class = "laina-vai" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

E fai si 'ese'ese o le fa'aputuga fa'atasi ai ma fa'aputuga vai: o le aofa'i o koluma fa'amo'amo'a e le mana'omia ona fetaui ma matua. Ae, o au koluma e toe setiina i tulaga ta'itasi ona o laina ta'itasi e 100% o le koluma matua.

<div class = "laina-vai" > 
  <div vasega = "span12" > 
    Laasaga 1 o le koluma
    <div class = "laina-vai" > 
      <div class = "span6" > Laasaga 2 </div> 
      <div class = "span6" > Laasaga 2 </div> 
    </div>
  </div>
</div>

Fesuia'i ile LESS

Fausia i totonu o Bootstrap o ni nai fesuiaiga mo le faʻavasegaina o le faʻaogaina o le 940px grid system, faʻamaumauga i luga. O fesuiaiga uma mo le fa'asologa o lo'o teuina i le variables.less.

Fa'afefea ona fa'avasega

Suia le faʻasologa o lona uiga o le suia o suiga e tolu @grid*ma toe faʻapipiʻi Bootstrap. Suia le fa'asologa o fesuiaiga i variables.less ma fa'aoga se tasi o auala e fa ua fa'amaumauina e toe fa'aopoopo . Afai o lo'o e fa'aopoopoina nisi koluma, ia mautinoa e fa'aopoopo le CSS mo i latou i le grid.less.

Tumau e tali atu

Fa'asinomaga o le fa'asologa e na'o le tulaga fa'aletonu, le 940px grid. Ina ia fa'atumauina vaega tali mai o Bootstrap, e tatau fo'i ona e fa'avasega le fa'asologa i le tali.less.

Fa'atulaga lelei

Le fa'aletonu ma faigofie 940px-lautele, fa'atonuga fa'atotonu mo na'o so'o se upegatafa'ilagi po'o itulau e tu'uina atu e se tasi <div class="container">.

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

Fua fa'atulagaina

<div class="container-fluid">e maua ai le fausaga o itulau fetuutuunai, min- ma le max-lautele, ma le itu tauagavale. E lelei tele mo polokalame ma fa'amaumauga.

<div class = "container-fluid" > 
  <div class = "laina-vai" > 
    <div class = "span2" > 
      <!--Sidebar anotusi-->
    </div>
    <div class = "span10" > 
      <!--I totonu o le tino-->
    </div>
  </div>
</div>

Masini lagolago

E lagolagoina e Bootstrap ni nai fesili fa'asalalau i totonu o se faila e tasi e fesoasoani e fa'aoga talafeagai au galuega i masini eseese ma fa'ai'uga mata. O mea nei e aofia ai:

Manaomia meta tag

Ina ia mautinoa o loʻo faʻaalia lelei e masini itulau tali mai, faʻapipiʻi le meta tag viewport.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  

O mea latou te faia

O fa'asalalauga fa'asalalauga e fa'ataga ai le CSS fa'ale-aganu'u e fa'atatau i le tele o tulaga—fa'atatau, lautele, ituaiga fa'aaliga, ma isi—ae e masani lava ona taula'i min-widthma max-width.

• Suia le lautele o le koluma i la tatou fa'asologa
• Fa'aputu elemene nai lo le fa'afefe i so'o se mea e mana'omia
• Toe fa'alia ulutala ma tusitusiga ina ia sili atu ona talafeagai mo masini

O le Bootstrap e le otometi ona aofia ai nei faʻasalalauga faʻasalalauga, ae o le malamalama ma le faʻaopoopoina e matua faigofie ma e manaʻomia sina seti. E i ai ni nai au filifiliga mo le aofia ai o foliga tali o Bootstrap:

1. Fa'aaogā le tu'ufa'atasiga tali fa'atusa, bootstrap-responsive.css
2. Faʻaopoopo @import "responsive.less" ma toe faʻapipiʻi Bootstrap
3. Suia ma toe fa'aopoopo le responsive.less e fai ma faila ese

Aiseā e lē na o le faaaofia ai? O le mea moni, e le o mea uma e manaʻomia ona tali mai. Nai lo le faʻamalosia o tagata atiaʻe e aveese lenei vaega, matou te manatu e sili ona mafai.

  // Telefoni fa'afanua ma lalo
  @media ( max - lautele : 480px ) { ... }     
 
  // Telefoni fa'afanua i le laulau fa'atusa
  @media ( max - lautele : 768px ) { ... }     
 
  // Ata laupapa i le laufanua ma le laulau
  @media ( min - lautele : 768px ) ma ( max - lautele : 980px ) { ... }        
 
  // Laupapa lapopoa
  @media ( min - lautele : 1200px ) { .. }