Bootstrap

Fa'amanu

O le Bootstrap e fausia i luga o se fa'asologa o koluma e 12. Ua matou fa'aaofia fo'i fa'atonuga fa'amau-ma-lautele fa'atatau i lena faiga.

Sitaili faʻavaomalo mo le toe setiina o le CSS, faʻasologa, ma fesoʻotaʻiga

Manaomia HTML5 doctype

Bootstrap e faʻaogaina elemene HTML ma CSS meatotino e manaʻomia le faʻaogaina o le HTML5 doctype. Ia mautinoa e aofia ai i le amataga o itulau uma Bootstrapped i lau poloketi.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Tusitusi ma sootaga

I totonu o le faila scaffolding.less , matou te setiina faʻaaliga faʻavaomalo, typography, ma sitaili soʻotaga. Aemaise lava, matou:

  • Aveese le pito i luga o le tino
  • Seti background-color: white;i luga o lebody
  • Fa'aaoga le @baseFontFamily, @baseFontSize, ma @baseLineHeightuiga e fai ma a matou fa'avae fa'asologa
  • Seti le lanu feso'ota'iga fa'avaomalo e ala @linkColorma fa'aoga na'o laina vase feso'ota'iga:hover

Toe seti e ala i le Normalize

E pei o le Bootstrap 2, o le CSS reset masani ua faʻaleleia e faʻaoga ai elemene mai Normalize.css , o se poloketi a Nicolas Gallagher e faʻamalosia ai foi le HTML5 Boilerplate .

Ole toe setiina fou e mafai lava ona maua ile reset.less , ae faʻatasi ai ma le tele o elemene ua aveesea mo le faʻapuupuu ma le saʻo.

Faiga fa'asologa masani 12 koluma ma se mimilo tali

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

O le fa'aogaina o le fa'asologa o fa'atonuga o lo'o tu'uina atu i Bootstrap e fa'aogaina ai le 12 koluma e fa'aalia i le lautele o le 724px, 940px (fa'aletonu e aunoa ma le tali CSS aofia ai), ma le 1170px. I lalo ifo o le 767px va'aiga, o koluma e fa'asusu ma fa'aputu fa'asaga i luga.

  1. <div class = "laina" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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


Fa'ase'e koluma

4
4 fa'asolo 4
3 fa'apena 3
3 fa'apena 3
8 fa'afesuiai 4 
  1. <div class = "laina" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Koluma faamoega

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ʻanofo e tatau ona tuʻuina i totonu o se .span6.

Laasaga 1 o le koluma
Laasaga 2
Laasaga 2 
  1. <div class = "laina" > 
  2.   <div class = "span6" > 
  3.     Laasaga 1 koluma
  4.     <div class = "laina" > 
  5.       <div class = "span3" > Laasaga 2 </div> 
  6.       <div class = "span3" > Laasaga 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Fa'asologa o le vai 12 tali, koluma fa'avae pasene

Koluma vai

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

  1. <div class = "laina-vai" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Faamoega vai

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.

Suavai 12
Suavai 6
Suavai 6 
  1. <div class = "laina-vai" > 
  2.   <div vasega = "span12" > 
  3.     Laasaga 1 o le koluma
  4.     <div class = "laina-vai" > 
  5.       <div class = "span6" > Laasaga 2 </div> 
  6.       <div class = "span6" > Laasaga 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Fa'avasegaga fa'aaufa'atasi

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

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.

Layouts Fa'ata'ita'iga fa'avae e fai ai itulau uepi

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

  1. <tino>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </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.

  1. <div class = "container-fluid" > 
  2.   <div class = "laina-vai" > 
  3.     <div class = "span2" > 
  4.       <!--Sidebar anotusi-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--I totonu o le tino-->
  8.     </div>
  9.   </div>
  10. </div>

Fuafuaga tali Fa'asalalauga fesili mo masini eseese ma iugafono

Masini tali

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

Fa'aoga fa'atatau fa'asalalauga fesili ma na'o se amataga i au fa'alogo feavea'i. Mo galuega tetele, mafaufau i fa'amaufa'ailoga fa'avae fa'apitoa ae le o fa'asologa o fa'asalalauga fa'asalalauga.

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:

Fa'ailoga Laufanua fa'atulagaina Lautele o koluma Laufanua lautele
Telefonitelefoni 480px ma lalo ifo Koluma vai, leai ni lautele fa'amau
Telefonitelefoni i papa 767px ma lalo ifo Koluma vai, leai ni lautele fa'amau
Laupapa ata 768px ma luga 42px 20px
Fa'atonu 980px ma luga 60px 20px
Fa'aaliga tele 1200px ma luga 70px 30px

Manaomia meta tag

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

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

Fa'aaogaina o fesili a le aufaasālalau

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.

  1.   /* Telefoni fa'afanua ma lalo */
  2.   @media ( max - lautele : 480px ) { ... }     
  3.  
  4.   /* Telefoni fa'afanua i le laulau fa'atusa */
  5.   @media ( max - lautele : 767px ) { ... }     
  6.  
  7.   /* Ata laupapa i le laufanua ma le laulau */
  8.   @media ( min - lautele : 768px ) ma ( max - lautele : 979px ) { ... }        
  9.  
  10.   /* Laupapa tele */
  11.   @media ( min - lautele : 1200px ) { ... }

vasega fa'aoga tali

O a i latou

Mo le televave o le atina'eina o le telefoni feavea'i, fa'aoga nei vasega aoga mo le fa'aalia ma le nanaina o mea e ala ile masini.

Le taimi e fa'aoga ai

Fa'aoga i luga o se fa'avae fa'atapula'a ma aloese mai le faia o fa'aliliuga 'ese'ese atoa o le saite e tasi. Nai lo lena, ia fa'aoga e fa'aopoopo i fa'amatalaga a masini ta'itasi.

Mo se faʻataʻitaʻiga, atonu e te faʻaalia se <select>elemene mo le nav i luga o faʻasologa feaveaʻi, ae le o luga o papa ma komepiuta.

Vasega lagolago

O lo'o fa'aalia iinei le laulau o vasega matou te lagolagoina ma o latou a'afiaga i luga o se fa'atulagaina o fesili fa'asalalau (fa'ailogaina e masini). E mafai ona maua i responsive.less.

Vasega Telefoni480px ma lalo ifo Papamaa767px ma lalo ifo Desktops768px ma luga
.visible-phone Va'aia
.visible-tablet Va'aia
.visible-desktop Va'aia
.hidden-phone Va'aia Va'aia
.hidden-tablet Va'aia Va'aia
.hidden-desktop Va'aia Va'aia

Su'ega su'ega

Toe sui lau su'esu'ega po'o uta i masini eseese e su'e ai vasega o lo'o i luga.

Va'aia ile...

Fa'ailoga lanu meamata e fa'aalia ai o lo'o va'aia le vasega i lau va'aiga o lo'o iai nei.

  • Telefoni✔ Telefoni
  • Laupapa✔ Laupapa
  • Desktop✔ Desktop

Natia ile...

Iinei, fa'ailoga lanu meamata e fa'aalia ai o lo'o natia le vasega i lau va'aiga o lo'o iai nei.

  • Telefoni✔ Telefoni
  • Laupapa✔ Laupapa
  • Desktop✔ Desktop