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'amaumauga fa'atusitusi
  • 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'u i lalo e fiafia i le Normalize.css , o se poloketi a Nicolas Gallagher ma Jonathan Neal 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 tali mai e mafai. Fa'atasi ai ma le faila CSS tali mai fa'aopoopo, o le fa'asologa e fa'atatau i le 724px ma le 1170px lautele 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. Ona 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

Fa'asolo koluma i le itu taumatau 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.

Laasaga 1 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 ese'ese le fa'aogaina o fa'aputuga o fa'aputuga vai: e tatau ona o'o atu i le 12 koluma ta'itasi fa'amomoli o koluma. E mafua ona o le faʻaogaina o le vai e faʻaaogaina pasene, ae le o pika, mo le faʻatulagaina o lautele.

Suavai 12
Suavai 6
Suavai 6
Suavai 6
Suavai 6 
  1. <div class = "laina-vai" > 
  2.   <div vasega = "span12" > 
  3.     Suavai 12
  4.     <div class = "laina-vai" > 
  5.       <div class = "span6" > 
  6.         Suavai 6
  7.         <div class = "laina-vai" > 
  8.           <div class = "span6" > Suavai 6 </div> 
  9.           <div class = "span6" > Suavai 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Suavai 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Fa'atulagaina

Fa'atulaga lelei

E tu'uina atu se fa'atulagaina lautele fa'amautu-lautele (ma fa'atatau i le filifiliga) fa'atasi ma na'o <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 atiaʻe 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 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

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
Fa'aaliga tele 1200px ma luga 70px 30px
Fa'atonu 980px ma luga 60px 20px
Laupapa ata 768px ma luga 42px 20px
Telefoni i papa 767px ma lalo ifo Koluma vai, leai ni lautele fa'amau
Telefoni 480px ma lalo ifo Koluma vai, leai ni lautele fa'amau 
  1. /* Laupapa tele */
  2. @media ( min - lautele : 1200px ) { ... }     
  3.  
  4. /* Ata laupapa i le laufanua ma le laulau */
  5. @media ( min - lautele : 768px ) ma ( max - lautele : 979px ) { ... }        
  6.  
  7. /* Telefoni fa'afanua i le laulau fa'atusa */
  8. @media ( max - lautele : 767px ) { ... }     
  9.  
  10. /* Telefoni fa'afanua ma lalo */
  11. @media ( max - lautele : 480px ) { ... }

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. E le tatau ona fa'aogaina mea fa'aoga tali atu i laulau, ma o lea e le lagolagoina.

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