Talafaasolopito

I aso muamua o Twitter, na faʻaogaina e inisinia toetoe lava o soʻo se faletusi latou te masani ai e faʻafetaui manaoga pito i luma. Na amata le Bootstrap o se tali i luʻitau na faʻaalia ma faʻavavevave le atinaʻe i le taimi muamua o le Hackweek Twitter.

Faatasi ai ma le fesoasoani ma manatu faaalia o le tele o inisinia i Twitter, ua matua tuputupu ae Bootstrap e aofia ai e le gata o sitaili masani, ae sili atu le matagofie ma le umi o mamanu mamanu pito i luma.

Faitau atili ile dev.twitter.com ›

Lagolago su'esu'e

Bootstrap e faʻataʻitaʻiina ma lagolagoina i suʻesuʻega faʻaonapo nei e pei o Chrome, Safari, Internet Explorer, ma Firefox.

• Safari fou
• Google Chrome fou
• Firefox 4+
• Internet Explorer 7+
• Opera 11

O mea e aofia ai

O le Bootstrap e sau faʻatasi ma CSS tuʻufaʻatasia, e leʻi tuʻufaʻatasia, ma faʻataʻitaʻiga faʻataʻitaʻiga.

• O faila uma .less muamua
• Fa'aopoopoina atoatoa ma fa'aitiitiina le CSS
• Fa'atumu pepa ta'iala
• Fa'ata'ita'iga itulau fa'ata'ita'iga (sili atu o le a vave ona o'o mai)

Fa'asologa masani

O le fa'aogaina o le fa'aogaina o le fa'aogaina o se vaega o le Bootstrap o le 940px lautele 16-koluma fa'asologa. O se tofo o le lauiloa 960 grid system, ae aunoa ma se faʻaopoopoga faaopoopo / padding i le itu agavale ma taumatau.

Fa'ata'ita'iga fa'ailoga fa'asologa

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 le aofa'i o koluma fa'avae e 16 na matou fa'amatalaina o se vaega o la matou fa'asologa. Va'ai fa'ata'ita'iga o lo'o i lalo mo nisi suiga.

<div class = "laina" > 
  <div class = "span6 koluma" > 
    ...
  </div>
  <div class = "span10 koluma" > 
    ...
  </div>
</div>

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

<tino>
  <div class = "container" > 
    ...
  </div>
</tino>

Fua fa'atulagaina

O se isi mea, fetuutuuna'i le fausaga o itulau vai ma le laititi ma le maualuga-lautele ma le itu tauagavale. Lelei mo apps ma docs.

<tino>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "anotusi" > 
      ...
    </div>
  </div>
</tino>

Ulutala & kopi

Ose fa'atonuga fa'akomipiuta mo le fa'atulagaina o au itulau uepi.

O le fa'asologa atoa o fa'asologa o lo'o fa'avae i luga o le lua Less variables i la tatou faila preboot.less: @basefontma @baseline. O le mea muamua o le fa'amaufa'ailoga faavae-tele o lo'o fa'aogaina atoa ma le lona lua o le laina-maualuga fa'avae.

Matou te faʻaogaina na fesuiaiga, ma nisi numera, e fatu ai pito, paddings, ma laina-maualuga o matou ituaiga uma ma sili atu.

h1. Ulutala 1

h2. Ulutala 2

h3. Ulutala 3

h4. Ulutala 4

h5. Ulutala 5

h6. Ulutala 6

Faataitaiga parakalafa

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Ulutala fa'ata'ita'iga E iai so'a ulutala...

Misc. elemene

Fa'aaogā fa'amamafa, tuatusi, & fa'apuupuuga

<strong> <em> <address> <abbr>

Le taimi e fa'aoga ai

E tatau ona fa'aoga fa'ailoga fa'amamafa ( <strong>ma <em>) e fa'ailoa ai le fa'aopoopoina o le taua po'o le fa'amamafa o se upu po'o se fasifuaitau e fa'atatau i lona kopi o lo'o si'omia. Fa'aoga <strong>mo le taua ma <em>mo le fa'amamafaina.

Faamamafa i se parakalafa

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Fa'aaliga: E lelei lava le fa'aoga <b>ma <i>fa'ailoga ile HTML5 ma e le mana'omia ona fa'ailoga mata'utia ma fa'amaufa'ailoga, fa'asologa (e ui o lo'o i ai se elemene sili atu le fa'aoga, fa'aoga). <b>e fa'atatau e fa'amanino ai upu po'o fasifuaitau e aunoa ma le fa'ailoaina atu o le taua fa'aopoopo, ae <i>tele lava mo leo, upu fa'apitoa, ma isi.

Tulaga

O le <address>elemene e faʻaaogaina mo faʻamatalaga faʻafesoʻotaʻi mo lona tuaa lata ane, poʻo le tino atoa o galuega. O lona uiga la:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Fa'aaliga: O laina ta'itasi i totonu e <address>tatau ona fa'ai'u i se laina-motu ( <br />) pe afifi i se fa'ailoga poloka poloka (fa'ata'ita'iga, <p>) e fa'atulaga lelei ai le anotusi.

Faapuupuuga

Mo fa'apuupuuga ma fa'apuupuuga, fa'aoga le <abbr>pine ( <acronym>ua fa'ate'aina ile HTML5 ). Tuu le fomu faapuupuu i totonu o le pine ma seti se ulutala mo le igoa atoa.

Blockquotes

<blockquote> <p> <small>

E faapefea ona sii mai

E aofia ai se poloka upusii, afifi <blockquote>solo <p>ma <small>pine. Fa'aoga le <small>elemene e ta'u mai ai lau puna'oa ma o le ae mauaina se fa'ailoga i —luma atu.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr. Julius Hibbert

Le fa'atonu<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ma masa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean nofo amet erat nunc
• Eget porttitor lorem

Le fa'ailoga<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ma masa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean nofo amet erat nunc
• Eget porttitor lorem

Fa'atonu<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem ma masa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean nofo amet erat nunc
8. Eget porttitor lorem

Fa'amatalagadl

Lisi fa'amatalaga

Ole lisi fa'amatalaga e lelei atoatoa mo le fa'amalamalamaina o upu.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida and eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Fausia laulau

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

E lelei laulau-mo le tele o mea. O laulau tetele, e ui i lea, e manaʻomia sina faʻailoga alofa ina ia aoga, faʻaleleia, ma mafai ona faitau (i le tulaga code). O nai fautuaga ia e fesoasoani ai.

Ia afifi i taimi uma lau ulutala koluma i se <thead>tulaga e faapea o le fa'atonu o <thead>le > <tr>> <th>.

E tutusa ma ulutala koluma, o mea uma o le tino o lau laulau e tatau ona afifi i totonu o le <tbody>mea lea o lau fa'asologa o <tbody>le > <tr>> <td>.

Faataitaiga: Sitaili laulau masani

O laulau uma o le a otometi lava ona fa'apipi'iina na'o tuaoi taua e fa'amautinoa ai le faitau ma fa'atumauina le fausaga. Leai se mana'oga e fa'aopoopo nisi vasega po'o uiga.

#	Igoa muamua	Fa'aiu	Gagana
1	O nisi	Tasi	Igilisi
2	Joe	Sixpack	Igilisi
3	Stu	Dent	Code

< laulau>
  ...
</ laulau>

Faataitaiga: Sebra-strid

Fai sina fa'alelei i au laulau e ala i le fa'aopoopoina o le zebra-striping—na'o le fa'aopoopoina o le .zebra-stripedvasega.

#	Igoa muamua	Fa'aiu	Gagana
1	O nisi	Tasi	Igilisi
2	Joe	Sixpack	Igilisi
3	Stu	Dent	Code

Manatua: Zebra-striping o se faʻaleleia atili e le o avanoa mo suʻesuʻega matutua e pei o le IE8 ma lalo.

< vasega laulau = "sebra-striped" > 
...
</ laulau>

Faataitaiga: Sebra-striped w/ TableSorter.js

O le faia o le faʻataʻitaʻiga muamua, matou te faʻaleleia le aoga oa matou laulau e ala i le tuʻuina atu o galuega faʻavasega e ala i le jQuery ma le Tablesorter plugin. Kiliki so'o se ulutala o le koluma e sui ai le fa'avasega.

#	Igoa muamua	Fa'aiu	Gagana
1	O lau	Tasi	Igilisi
2	Joe	Sixpack	Igilisi
3	Stu	Dent	Code

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( galuega () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< vasega laulau = "sebra-striped" > 
  ...
</ laulau>

Sitaili masani

O fomu uma e tu'uina atu i sitaili fa'aletonu e tu'uina atu i se auala e mafai ona faitau ma fa'alautele. Ua saunia sitaili mo mea e fai ai tusitusiga, filifili lisi, vaega o tusitusiga, ki leitio ma pusa siaki, ma faamau.

Fa'ata'ita'iga fomu talatu'u

X-Fa'aaofia Tele

Filifili

1 2 3 4 5

Filifili

1 2 3 4 5

Fa'aulu e le mafai ona fa'asaoina

O nisi o taua iinei

Fa'atotonugalemu

X-Fa'aaofia Tele

La'ititi la'ititi o tusitusiga fesoasoani

Fa'ata'ita'iga fomu talatu'u

Tusitusi ua saunia

@

Pusa Siaki ua saunia

Fa'aopoopo Pusa Siaki

Fa'amatalaga faila

Fa'ata'ita'iga fomu talatu'u

Lisi o Filifiliga

• O le filifiliga muamua o le mea lea ma lena—ia mautinoa e aofia ai pe aisea e manaia ai
• E mafai fo'i ona siaki le filifiliga lua ma fa'aofi i fa'ai'uga
• O le filifiliga lona tolu e mafai—ioe, na e mateina—e siaki fo'i ma fa'aaofia i fa'ai'uga
• O le filifiliga fa e le mafai ona siaki ona e le atoatoa.

Fa'aaliga: Fa'ailoga o lo'o si'omia uma filifiliga mo le tele o vaega kiliki ma se fomu e sili atu ona fa'aoga.

Va'aiga o Aso

ia O taimi uma e fa'aalia o le Pacific Standard Time (GMT -08:00).

Textarea

Poloka o tusitusiga fesoasoani e faʻamatala ai le fanua o loʻo i luga pe a manaʻomia.

Lisi o Filifiliga

• O le filifiliga muamua o le mea lea ma lena—ia mautinoa e aofia ai pe aisea e manaia ai
• O le filifiliga lona lua e mafai o se isi mea ma o le filifilia o le a faʻaumatia filifiliga 1

  Fa'aleaogaina

Fa'aputu fomu

Fa'aopoopo .form-stackedi le HTML o lau fomu ma e iai sau fa'ailoga i luga o latou fanua nai lo le agavale. E aoga tele pe afai e pupuu au fomu pe lua au koluma o mea e fai mo pepa mamafa.

Fa'ata'ita'iga fomu talatu'u

X-Fa'aaofia Tele

Filifili

1 2 3 4 5

Fa'ata'ita'iga fomu talatu'u

X-Fa'aaofia Tele

La'ititi la'ititi o tusitusiga fesoasoani

Lisi o Filifiliga

• O le filifiliga muamua o le mea lea ma lena—ia mautinoa e aofia ai pe aisea e manaia ai
• E mafai fo'i ona siaki le filifiliga lua ma fa'aofi i fa'ai'uga

Fa'aaliga: Fa'ailoga o lo'o si'omia uma filifiliga mo le tele o vaega kiliki ma se fomu e sili atu ona fa'aoga.

Faasaoina Suiga  Fa'aleaogaina

Fa'amau

I le avea ai o se tauaofiaga, e faʻaogaina faʻamau mo gaioiga aʻo faʻaoga fesoʻotaʻiga mo mea faitino. Mo se fa'ata'ita'iga, o le "Download" e mafai ona avea ma fa'amau ma "gaoioiga lata mai" e mafai ona avea ma so'oga.

O fa'amau uma e le mafai i se sitaili lanu efuefu, ae o le tele o vasega aoga e mafai ona fa'aoga mo sitaili lanu eseese. O nei vasega e aofia ai se .primaryvasega lanumoana, se vasega moli-lanu moana .info, se vasega lanu meamata .success, ma se vasega mumu .danger. Ma le isi, o le ta'avale a oe lava sitaili e faigofie lava.

Faataitaiga faamau

E mafai ona fa'aoga sitaili fa'amau i so'o se mea e .btnfa'aoga. E masani lava e te mana'o e fa'aoga nei mea i na'o <a>, <button>, ma filifili <input>elemene. O lona uiga la:

Su'i lapopoa

Mana'o i fa'amau tetele pe la'ititi? Fai i ai!

Tulaga le atoatoa

Mo fa'amau e le o fa'agaoioia pe fa'aletonu e le app mo se tasi mafua'aga po'o se isi, fa'aoga le tulaga le atoatoa. E .disabledmo sooga ma :disabledmo <button>elemene.

So'oga

Fa'amau

O le a

O le matou pito i luga o se pa faʻamau e faʻapipiʻi ai le logo poʻo le igoa o le upega tafaʻilagi, faʻasalalauga muamua, ma le fomu suʻesuʻe.

Customizable

O elemene uma i totonu, ma le pito i luga atoa, e filifili. E mafai ona e filifili e aofia ai se logo/igoa, nav, search, ma se lua nav—po'o so'o se tu'ufa'atasiga o lena mea.

E aofia ai fa'alalolalo

I le avea ai o se vaega o le fa'atautaiga autu, ua matou fa'aopoopoina le agava'a mo oe e fa'aopoopo ai fa'alalo i lalo i lau nav. Siaki le pito lona lua i luga (fa'aoga taumatau) e va'ai pe fa'apefea ona fai.

Tabs ma fualaau

Fausia se folauga lona lua faigofie ma se <ul>. Fesuiai i le va o laupepa poʻo fualaau e ala i le faʻaopoopoina o le vasega talafeagai.

Lelei mo vaega laiti o anotusi e pei o matou itulau fa'atulagaina o tala ma fa'asologa o taimi mo tagata fa'aoga mo le fesuia'i i le va o itulau o mea fa'apenei. E maua i sitaili fa'amau po'o pili.

• Aiga
• Tala'aga
• Feau
• Fa'atonu
• Fa'afeso'ota'i
• Pa'u i lalo
  • So'oga lona lua
  • O se isi mea iinei
  • O le isi so'oga

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Tala'aga </a></li> 
  <li><a href = "#" > Savali </a></li> 
  <li><a href = "#" > Fa'atonu </a></li> 
  <li><a href = "#" > Fa'afeso'ota'i </a></li> 
</ul>

• Aiga
• Tala'aga
• Feau
• Fa'atonu
• Fa'afeso'ota'i

<ul class = "pills" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Tala'aga </a></li> 
  <li><a href = "#" > Savali </a></li> 
  <li><a href = "#" > Fa'atonu </a></li> 
  <li><a href = "#" > Fa'afeso'ota'i </a></li> 
</ul>

Itulautusi

Fa'akomupiuta e sili ona faigofie ma laititi na fa'auluina e Rdio. O le poloka tele e faigata ona misi, faigofie ona faʻaleleia, ma maua ai vaega tetele kiliki.

<div class = "fa'asinomaga" > 
  <ul>
    <li vasega = "mua'i le atoatoa" ><a href = "#" > ← Muamua </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > Next → </a></li>  
  </ul>
</div>

Fa'aliga fa'avae

div.alert-message

Fe'au laina e tasi mo le fa'ailoaina o le fa'aletonu, fa'aletonu, po'o le manuia o se gaioiga. Aemaise le aoga mo fomu.

poloka fe'au

div.alert-message.block-message

Mo fe'au e mana'omia sina fa'amatalaga, o lo'o i ai a matou fa'aaliga sitaili parakalafa. O nei mea e lelei atoatoa mo le faʻatupuina o feʻau sese umi, lapataia se tagata faʻaoga i se gaioiga o loʻo faʻatali, pe naʻo le tuʻuina atu o faʻamatalaga mo le faʻamamafa atili i luga o le itulau.

Modal

Modals—fa'atalanoaga po'o pusa moli-e lelei tele mo fa'atinoga fa'atatau ile tulaga e taua ai le fa'atumauina o le tala fa'asolopito.

Fautuaga Meafaigaluega

Twipsies e sili ona aoga mo le fesoasoani i se tagata le mautonu ma faasino i latou i le itu saʻo.

Popovers

Fa'aoga popovers e tu'uina atu ai fa'amatalaga fa'amatalaga i se itulau e aunoa ma le a'afiaina o le fa'atulagaina.

Bootstrap na fausia ma Preboot , o se pusa tatala-puna o mixins ma fesuiaiga e faʻaoga faʻatasi ma Less , o se CSS preprocessor mo le vave ma faigofie le atinaʻeina o upega tafaʻilagi.

Siaki pe faʻafefea ona matou faʻaogaina Preboot i Bootstrap ma pe faʻapefea ona e faʻaogaina pe a e filifili e tamoʻe Less i lau isi poloketi.

Fa'afefea ona fa'aoga

Fa'aoga lenei filifiliga e fa'aoga atoatoa ai le Bootstrap's Less variables, mixins, ma le fa'amomoli i le CSS e ala i le javascript i lau su'esu'ega.

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "uma" />    
<script src = "js/less-1.1.3.min.js" ></script> 

Le lagona le .js fofo? Taumafai le Less Mac app pe fa'aoga Node.js e fa'apipi'i pe ae fa'aogaina lau code.

O mea e aofia ai

O nisi nei o mea taua o mea o loʻo aofia i le Twitter Bootstrap o se vaega o Bootstrap. Ulu atu i luga ole upega tafaʻilagi a Bootstrap poʻo Github poloketi itulau e sii mai ma aʻoaʻo atili.

Fuafuaga

Fesuia'iga i Less e lelei atoatoa mo le tausia ma le fa'afouina o lou ulu ulu CSS e leai se totogi. Afai e te manaʻo e sui se lanu lanu poʻo se faʻaoga masani, faʻafouina i se tasi nofoaga ma e te setiina.

// So'oga
@linkColor : #8b59c2;         
@linkColorHover :     pogisa ( @linkColor , 10 ); 
 
// Efuefu
@uliuli : #000;             
@grayDark :           fa'amama ( @black , 25 %); 
@gray :               fa'amama ( @black , 50 %); 
@grayLight :          fa'amama ( @black , 70 %); 
@grayLighter :        fa'amama ( @black , 90 %); 
@pa'epa'e : #fff;             
 
// Lanu Fa'ailoga
@blue : #08b5fb;              
@meamata : #46a546;             
@mumu : #9d261d;               
@samasama : #ffc40d;            
@ moli : #f89406;            
@pini : #c3325f;              
@violē : #7a43b6;            
 
// Fa'asologa o laina faavae
@basefont : 13px ;          
@baseline : 18px ;          

Fa'amatalaga

Less e maua ai fo'i se isi sitaili o fa'amatalaga e fa'aopoopo i le /* ... */syntax masani a le CSS.

// O se faʻamatalaga lenei
/* O se faamatalaga foi lea */

Faafefiloi le wazoo

Mixins o lo'o aofia ai po'o ni vaega mo le CSS, e mafai ai ona e tu'ufa'atasia se poloka o le code i le tasi. E lelei tele mo mea fa'atau e fa'amuamua e pei o box-shadowle , fa'asolo su'esu'e fa'alili, fa'aputu vaitusi, ma isi mea. Lalo o se faʻataʻitaʻiga o mixins o loʻo aofia ai ma Bootstrap.

Fa'aputuga Font

#mataitusi {
  . fa'apuupuu ( @mamafa : masani , @tele : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    vai - mamafa : @weight ; 
    laina - maualuga : @lineHeight ; 
  }
  . sans - serif ( @mamafa : masani , @tele : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    vai - mamafa : @weight ; 
    laina - maualuga : @lineHeight ; 
  }
  . serif ( @mamafa : masani , @tele : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - size : @size ; 
    vai - mamafa : @weight ; 
    laina - maualuga : @lineHeight ; 
  }
  . monospace ( @mamafa : masani , @tele : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    font - size : @size ; 
    vai - mamafa : @weight ; 
    laina - maualuga : @lineHeight ; 
  }
}

Gradients

#gradient {
  . faalava ( @startColor : #555, @endColor: #333) { 
    tua - lanu : @endColor ; 
    tua - toe fai : toe fai - x ;
    tua - ata : - khtml - gradient ( linear , agavale pito i luga , taumatau pito i luga , mai ( @startColor ), i ( @endColor )); // Fa'ato'ilalo   
    tua - ata : - moz - laina - gradient ( agavale , @startColor , @endColor ); // FF 3.6+    
    tua - ata : - ms - laina - gradient ( agavale , @startColor , @endColor ); // IE10    
    tua - ata : - webkit - gradient ( linear , agavale pito i luga , taumatau pito i luga , lanu - taofi ( 0 %, @startColor ), lanu - taofi ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    tua - ata : - webkit - laina - gradient ( agavale , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    tua - ata : - o - laina - gradient ( agavale , @startColor , @endColor ); // Opera 11.10    
    tua - ata : laina - gradient ( agavale , @startColor , @endColor ); // Le tulaga   
  }
  . tūsa'o ( @startColor : #555, @endColor: #333) { 
    tua - lanu : @endColor ; 
    tua - toe fai : toe fai - x ;
    tua - ata : - khtml - gradient ( linear , agavale pito i luga , agavale pito i lalo , mai ( @startColor ), i ( @endColor )); // Fa'ato'ilalo   
    tua - ata : - moz - laina - gradient ( @startColor , @endColor ); // FF 3.6+   
    tua - ata : - ms - laina - gradient ( @startColor , @endColor ); // IE10   
    tua - ata : - webkit - gradient ( linear , agavale pito i luga , agavale pito i lalo , lanu - taofi ( 0 %, @startColor ), lanu - taofi ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    tua - ata : - webkit - laina - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    tua - ata : - o - laina - gradient ( @startColor , @endColor ); // Opera 11.10   
    tua - ata : laina - gradient ( @startColor , @endColor ); // O le tulaga  
  }
  . faasinoala ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . tūsa'o - tolu - lanu ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Fa'agaioiga ma faiga fa'asologa

Fa'afiafia ma fa'atino ni numera e fa'atupu ai fefiloi fetu'una'i ma mamana e pei o lo'o i lalo.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Grid System
. pusa {
  lautele : @siteWidth ; 
  pito : 0 ta'avale ;  
  . clearfix ();
}
. koluma ( @columnSpan : 1 ) {  
  lautele : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. offset ( @columnOffset : 1 ) {  
  pito - agavale : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}