Bootstrap

Fa'amanu

O le Bootstrap e fausia i luga ole 12-koluma grids, faʻatulagaina, ma vaega.

Fa'atonuga fa'alelalolagi

Manaomia HTML5 doctype

O Bootstrap e faʻaogaina nisi elemene HTML ma CSS meatotino e manaʻomia le faʻaogaina o le HTML5 doctype. Fa'aaofia i le amataga o au galuega fa'atino uma.

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

Tusitusi ma sootaga

Ua setiina e Bootstrap le fa'aaliga fa'alelalolagi, fa'asologa, ma sitaili feso'ota'iga. Aemaise lava, matou:

  • Aveese margini 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

O nei sitaili e mafai ona maua i totonu o fatafaitaulaga.less .

Toe seti e ala i le Normalize

Faatasi ai ma le Bootstrap 2, o le poloka toe setiina tuai ua pa'ū i le fiafia o Normalize.css , o se poloketi a Nicolas Gallagher e faʻamalosia ai foi le HTML5 Boilerplate . A o matou faʻaaogaina le tele o Normalize i totonu o la matou reset.less , ua matou aveesea nisi elemene faʻapitoa mo Bootstrap.

Faiga fa'asologa masani

Fa'ata'ita'iga fa'asologa ola

O le fa'aogaina o le Bootstrap grid system e fa'aogaina ai koluma e 12 , e fai ai se atigipusa lautele e 940px e aunoa ma ni mea e fa'aogaina . Fa'atasi ai ma le fa'aopoopoina o le faila CSS tali, o le fa'asologa e fetaui ma le 724px ma le 1170px lautele e fa'atatau i lau va'aiga. I lalo ifo o le 767px va'aiga, o koluma e fa'asusu ma fa'aputu fa'asaga i luga.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Fa'asologa autu HTML

Mo se fa'asologa faigofie e lua koluma, fai se .rowma fa'aopoopo le numera talafeagai o .span*koluma. Talu ai o se fa'asologa o koluma e 12, e ta'itasi .span*le numera o na koluma e 12, ma e tatau ona fa'aopoopo i taimi uma i le 12 mo laina ta'itasi (po'o le numera o koluma i le matua).

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

Tuuina atu lenei faʻataʻitaʻiga, matou te maua .span4ma .span8, faia mo le 12 aofaʻi o koluma ma se laina atoa.

Fa'ase'e koluma

Si'i koluma i le agavale e fa'aoga ai .offset*vasega. E fa'ateleina e vasega ta'itasi le pito agavale o se koluma i se koluma atoa. Mo se fa'ata'ita'iga, .offset4fa'agaoioi .span4luga o koluma e fa.

4
3 fa'apena 2
3 fa'asolo 1
3 fa'apena 2
6 fa'asolo 3 
  1. <div class = "laina" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Koluma faamoega

Ina ia fa'aputu au mea i le fa'asologa fa'aletonu, fa'aopoopo se seti fou .rowma se seti o .span*koluma i totonu ole .span*koluma o iai. O laina fa'aputu e tatau ona aofia ai se seti o koluma e fa'aopoopo i le numera o koluma o lona matua.

Faataitaiga

O iinei e lua .span4koluma fa'amomoli o lo'o tu'uina i totonu o se .span8.

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

Faiga fa'asusu vai

Fa'ata'ita'iga fa'asologa o le sua ola

Ole fa'aogaina ole fa'aogaina ole fa'aogaina o pasene nai lo pika mo le lautele o pou. E tutusa lava le gafatia e tali atu ai e pei o la tatou faiga fa'apipi'i, fa'amautinoaina le sa'o o vaega mo fa'ai'uga mata ma masini.

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

Fa'asologa o vai masani HTML

Fai so'o se laina "vai" e ala i le sui .rowi le .row-fluid. O vasega koluma e tumau tutusa, e faigofie ai ona fe'avea'i i le va o laina fa'amau ma vai.

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

Fa'asusu vai

E fa'agaoioi i le ala lava e tasi e pei o le fa'aogaina o le fa'asologa o fa'asologa: fa'aopoopo .offset*i so'o se koluma e fa'asili i le tele o koluma.

4
4 fa'asolo 4
3 fa'apena 3
3 fa'apena 3
6 fa'afiti 6 
  1. <div class = "laina-vai" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Faamoega vai

E fai si ese o le faamoega i laina vai: e le tatau ona tutusa le numera o koluma faamoega ma le numera o koluma a matua. Nai lo lena, o tulaga ta'itasi o koluma fa'amomoli e toe setiina 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'atulagaina

Fa'atulaga lelei

E tu'uina atu se fa'atulagaga masani lautele-lautele (ma le tali atu i le faitalia) ma na'o le <div class="container">mana'omia.

  1. <tino>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </tino>

Fua fa'atulagaina

Fausia se sua, lua-koluma itulau ma <div class="container-fluid">- lelei mo talosaga ma docs.

  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'agaoioi vaega tali

Fa'aola le CSS tali i lau poloketi e ala i le fa'aofiina o le meta tag talafeagai ma sitaili fa'aopoopo i totonu <head>o lau pepa. Afai na e tu'ufa'atasia le Bootstrap mai le Customize page, e mana'omia na'o le fa'ailoga meta.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Ulu i luga! O le Bootstrap e le o aofia ai foliga tali mai i le taimi nei aua e le o mea uma e manaʻomia ona tali mai. Nai lo le faʻamalosia o tagata atiae e aveese lenei vaega, matou te manatu e sili ona mafai pe a manaʻomia.

E uiga i le Bootstrap tali

Masini tali

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
Telefoni 480px ma lalo ifo Koluma vai, leai ni lautele fa'amau
Telefoni 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 
  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

Mo le televave o le atinaʻeina o fesoʻotaʻiga feaveaʻi, faʻaoga nei vasega aoga mo le faʻaalia ma le nanaina o mea e ala ile masini. O lo'o i lalo le laulau o vasega o lo'o avanoa 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 Telefoni767px ma lalo ifo Papamaa979px i le 768px DesktopsFa'atonu
.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

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.

Fa'ata'ita'iga mea fa'aoga tali

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