O le Bootstrap e fausia i luga o se fa'asologa o koluma e 12. Ua matou fa'apipi'i fo'i fa'atulaga-ma-lau-lautele fa'avae i luga o lena faiga.
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.
- <div class = "laina" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
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 .row
ma se seti .span*
i totonu ole .span*
koluma o iai.
- <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 | Tau fa'aletonu | Fa'amatalaga |
---|---|---|
@gridColumns |
12 | Numera o koluma |
@gridColumnWidth |
60px | Lautele o koluma taitasi |
@gridGutterWidth |
20px | Avanoa leaga i le va o koluma |
@siteWidth |
Ole aofa'i o koluma uma ma alavai | Faitau le numera o koluma ma alavai e seti ai le lautele o le .container-fixed() paluga |
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.
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.
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.
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>
<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>
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:
Fa'ailoga | Laufanua fa'atulagaina | Lautele o koluma | Laufanua lautele |
---|---|---|---|
Telefonitelefoni | 480px ma lalo ifo | Koluma vai, leai ni lautele fa'amau | |
Laupapa ata | 480px i le 768px | Koluma vai, leai ni lautele fa'amau | |
Laupapa fanua | 768px i le 940px | 44px | 20px |
Fa'atonu | 940px ma luga | 60px | 20px |
Fa'aaliga tele | 1210px ma luga | 70px | 30px |
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-width
ma max-width
.
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:
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 ) { .. }