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

<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" se 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 fa'asologa o 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

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

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 'upega tafa'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 vasega = "span2" > 
      <!--Sidebar anotusi-->
    </div>
    <div class = "span10" > 
      <!--I totonu o le tino-->
    </div>
  </div>
</div>

Masini lagolago

E lagolagoina e Bootstrap ni nai fa'amatalaga fa'asalalau e fesoasoani e fa'aoga lelei au poloketi i masini eseese ma fa'ai'uga mata. O mea nei e aofia ai:

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 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 tali.fa'aitiiti e tu'ueseese

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 : 940px ) { ... }        
 
  // Laupapa lapopoa
  @media ( min - lautele : 1200px ) { .. }