Histori

Matsatsing a pejana a Twitter, baenjiniere ba ne ba sebelisa laebrari efe kapa efe eo ba e tloaetseng ho fihlela litlhoko tsa pele. Bootstrap e qalile e le karabo ea liqholotso tse hlahisitsoeng le nts'etsopele e potlakileng nakong ea Hackweek ea pele ea Twitter.

Ka thuso le maikutlo a baenjiniere ba bangata ba Twitter, Bootstrap e holile haholo ho kenyelletsa eseng feela mekhoa ea mantlha, empa le mekhoa e metle le e tšoarellang ea meralo e ka pele.

Bala haholoanyane ho dev.twitter.com ›

Tšehetso ea sebatli

Bootstrap e lekoa le ho tšehetsoa ho libatli tse kholo tsa sejoale-joale tse kang Chrome, Safari, Internet Explorer le Firefox.

• Safari ea morao-rao
• Google Chrome ea morao-rao
• Firefox 4+
• Internet Explorer 7+
• Opera 11

Se kenyellelitsoeng

Bootstrap e tla e phethehile ka CSS e hlophisitsoeng, e sa kopanngoang, le litempele tsa mohlala.

• Lifaele tsohle tsa mantlha tsa .less
• CSS e hlophisitsoeng ka botlalo le e ntlafalitsoeng
• Litokomane tse felletseng tsa styleguide
• Mohlala oa leqephe la template (tse ling li tla tla haufinyane)

Gridi ea kamehla

Sistimi ea grid ea kamehla e fanoeng e le karolo ea Bootstrap ke gridi e bophara ba 16-column ea 940px. Ke tatso ea sistimi e tsebahalang ea grid ea 960, empa ntle le marang-rang / padding ka lehlakoreng le letšehali le le letona.

Mohlala oa marang-rang

Joalokaha ho bontšitsoe mona, moralo oa motheo o ka etsoa ka "likholomo" tse peli, e 'ngoe le e' ngoe e nka palo ea litšiea tse 16 tseo re li hlalositseng e le karolo ea tsamaiso ea rona ea marang-rang. Sheba mehlala e ka tlase bakeng sa mefuta e meng e fapaneng.

<div class = "row" > 
  <div class = "span6 columns" > 
    ...
  </ div>
  <div class = "span10 columns" > 
    ...
  </ div>
</ div>

Sebopeho se tsitsitseng

Sebopeho sa kamehla le se bonolo sa 940px-wide, se bohareng bakeng sa sebaka sa marang-rang sefe kapa sefe kapa leqephe le fanoeng ke <div.container>.

<'mele>
  <div class = "setshelo" > 
    ...
  </ div>
</ mmele>

Sebopeho sa mokelikeli

Sebopeho se seng, se feto-fetohang sa leqephe le nang le min- le max-widths le karolo e ka letsohong le letšehali. E loketse lisebelisoa le litokomane.

<'mele>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </ div>
    <div class = "dikahare" > 
      ...
    </ div>
  </ div>
</ mmele>

Lihlooho & kopi

Lethathamo le tloaelehileng la typographic bakeng sa ho hlophisa maqephe a hau a tepo.

Lenane lohle la typographic le thehiloe holim'a mefuta e 'meli e Menyenyane faeleng ea rona ea preboot.less: @basefontle @baseline. Ea pele ke boholo ba fonte e sebelisoang hohle 'me ea bobeli ke bophahamo ba mohala.

Re sebelisa mefuta-futa eo, le lipalo tse ling, ho theha marang-rang, li-padding, le bophahamo ba mela ea mefuta eohle ea rona le tse ling.

h1. Sehlooho sa 1

h2. Sehlooho sa 2

h3. Sehlooho sa 3

h4. Sehlooho sa 4

h5. Sehlooho sa 5

h6. Sehlooho sa 6

Serapa sa mohlala

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.

Sehloho sa mohlala Se na le sehloohoana...

Tse ling likarolo

Ho sebelisoa khatiso, liaterese le khutsufatso

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

Nako ea ho sebelisoa

Li-tag tsa khatiso ( <strong>le <em>) li lokela ho sebelisoa ho bontša bohlokoa bo eketsehileng kapa khatiso ea lentsoe kapa poleloana e amanang le kopi e potolohileng eona. Sebelisa <strong>bakeng sa bohlokoa le <em>bakeng sa ho hatisa khatello .

Ho hatisoa serapeng

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

Tlhokomeliso: Ho ntse ho lokile ho sebelisa <b>le <i>li-tag ho HTML5 'me ha ho hlokahale hore li ngotsoe ka sebete le ka mongolo o tšekaletseng, ka ho latellana (leha ho na le karolo ea semantic, e sebelise). <b>e reretsoe ho totobatsa mantsoe kapa lipoleloana ntle le ho fana ka bohlokoa bo eketsehileng, athe <i>hangata e le ea lentsoe, mantsoe a theknoloji, joalo-joalo.

Liaterese

The <address>element e sebelisetsoa tlhahisoleseling bakeng sa moholo-holo oa eona ea haufi, kapa sehlopha sohle sa mosebetsi. Mona ke kamoo e shebahalang kateng:

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

Tlhokomeliso: Mola o mong le o mong o <address>tlameha ho qetella ka ho khaoha ( <br />) kapa o phuthetsoe ka lebokose la "block-level" (mohlala, <p>) ho hlophisa litaba hantle.

Likgutsufatso

Bakeng sa khutsufatso le li-acronyms, sebelisa <abbr>tag ( <acronym>e tlositsoe ho HTML5 ). Beha foromo e khuts'oane ka har'a tag ebe u beha sehlooho sa lebitso le felletseng.

Mantsoe a thibelang

<blockquote> <p> <small>

Mokhoa oa ho qotsa

Ho kenyelletsa blockquote, thatela <blockquote>hohle <p>le <small>li-tag. Sebelisa <small>element ho qotsa mohloli oa hau mme o tla fumana lebelo la em —pele ho lona.

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

Ngaka Julius Hibbert

Ha ea laeloa<ul>

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

Unstyled<ul.unstyled>

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

E laetsoe<ol>

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

Tlhalosodl

Manane a tlhaloso

Lethathamo la litlhaloso le nepahetse bakeng sa ho hlalosa mantsoe.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Ho aha litafole

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

Litafole li ntle - bakeng sa lintho tse ngata. Litafole tse kholo, leha ho le joalo, li hloka lerato la "markup" hore le be molemo, le fokotsehe, 'me le balehe (boemong ba khoutu). Litlhahiso tse 'maloa tse ka u thusang ke tsena.

Ka linako tsohle phuthela lihlooho tsa kholomo ea hau ka tsela <thead>eo bolaoli bo leng teng <thead>> <tr>> <th>.

Joalo ka lihlooho tsa kholomo, litaba tsohle tsa 'mele oa tafole ea hau li lokela ho koaheloa ka hore sehlopha sa <tbody>hau sa maemo ke <tbody>> <tr>> <td>.

Mohlala: Mekhoa ea litafole ea kamehla

Litafole tsohle li tla etsoa ka mokhoa oa boiketsetso ka meeli ea bohlokoa feela ho netefatsa hore li balehe le ho boloka sebopeho. Ha ho hlokahale ho eketsa litlelase kapa litšobotsi tse ling.

#	Lebitso la pele	Fane	Puo
1	Ba bang	E 'ngoe	Senyesemane
2	Joe	Sixpack	Senyesemane
3	Stu	Sebono	Khoutu

<tafole>
  ...
</tafole>

Mohlala: Qoaha e metsero

Fumana monate ka litafole tsa hau ka ho eketsa liqoaha-tsenya .zebra-stripedsehlopha.

#	Lebitso la pele	Fane	Puo
1	Ba bang	E 'ngoe	Senyesemane
2	Joe	Sixpack	Senyesemane
3	Stu	Sebono	Khoutu

Tlhokomeliso: Zebra-striping ke ntlafatso e tsoelang pele ha e fumanehe bakeng sa libatli tsa khale joalo ka IE8 le ka tlase.

< sehlopha sa tafole = "zebra-striped" > 
...
</tafole>

Mohlala: Zebra-striped w/ TableSorter.js

Ho nka mohlala o fetileng, re ntlafatsa molemo oa litafole tsa rona ka ho fana ka ts'ebetso ea ho hlophisa ka jQuery le plugin ea Tablesorter . Tobetsa sehlooho sa kholomo efe kapa efe ho fetola mofuta.

#	Lebitso la pele	Fane	Puo
1	Hao	E 'ngoe	Senyesemane
2	Joe	Sixpack	Senyesemane
3	Stu	Sebono	Khoutu

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( mosebetsi () { 
    $ ( "tafole#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< sehlopha sa tafole = "zebra-striped" > 
  ...
</tafole>

Mekhoa ea kamehla

Liforomo tsohle li fuoa mekhoa e sa lekanyetsoang ho li hlahisa ka mokhoa o balehang le o qhekellang. Litaele li fanoe bakeng sa ho kenya mongolo, ho khetha manane, libaka tsa mongolo, likonopo tsa seea-le-moea le li-checkbox, le likonopo.

Tšōmo ea sebopeho sa mohlala

Kenyeletso ea X-E kholo

Khetha

1 2 3 4 5

Khetha

1 2 3 4 5

Kenyo e sa Fetoheng

Boleng bo itseng Mona

Kenyelletso e Tiisitsoeng

Kenyeletso ea X-E kholo

Sekhechana se senyane sa mongolo oa thuso

Tšōmo ea sebopeho sa mohlala

Mongolo o Reriloeng Pele

@

Lebokose la ho Hlahloba le Hlophisitsoeng

Lebokose la ho hlahloba le kentsoeng

Kenyo ea Faele

Tšōmo ea sebopeho sa mohlala

Lethathamo la Likhetho

• Khetho ea pele ke ena le eane-etsa bonnete ba hore o kenyelletsa hore na hobaneng e le ntle
• Khetho ea bobeli e ka hlahlojoa le ho kenyelletsoa liphethong tsa foromo
• Khetho ea boraro e ka—e, u e hakanyelitse—hape e ka hlahlojoa le ho kenyelletsoa liphethong tsa foromo
• Khetho ea bone e ke ke ea hlahlojoa kaha e koetsoe.

Tlhokomeliso: Li-labels li pota-potile likhetho tsohle bakeng sa libaka tse kholoanyane tsa ho tobetsa le foromo e sebetsang haholoanyane.

Letsatsi Range

ho Linako tsohle li hlahisoa e le Nako e Tloaelehileng ea Pacific (GMT -08:00).

Textarea

Sengoloa sa thuso se hlalosang karolo e kaholimo ha ho hlokahala.

Lethathamo la Likhetho

• Khetho ea pele ke ena le eane-etsa bonnete ba hore o kenyelletsa hore na hobaneng e le ntle
• Khetho ea bobeli ke ntho e 'ngoe' me ho e khetha ho tla tlosa likhetho 1

  Hlakola

Liforomo tse pakiloeng

Eketsa .form-stackedho HTML ea foromo ea hau 'me u tla ba le lileibole ka holim'a masimo a tsona ho fapana le ho le letšehali. Sena se sebetsa hantle haeba liforomo tsa hau li le khuts'oane kapa u na le mela e 'meli ea litlatsetso bakeng sa liforomo tse boima.

Tšōmo ea sebopeho sa mohlala

Kenyeletso ea X-E kholo

Khetha

1 2 3 4 5

Tšōmo ea sebopeho sa mohlala

Kenyeletso ea X-E kholo

Sekhechana se senyane sa mongolo oa thuso

Lethathamo la Likhetho

• Khetho ea pele ke ena le eane-etsa bonnete ba hore o kenyelletsa hore na hobaneng e le ntle
• Khetho ea bobeli e ka hlahlojoa le ho kenyelletsoa liphethong tsa foromo

Tlhokomeliso: Li-labels li pota-potile likhetho tsohle bakeng sa libaka tse kholoanyane tsa ho tobetsa le foromo e sebetsang haholoanyane.

Boloka Liphetoho  Hlakola

Likonopo

Joalo ka kopano, likonopo li sebelisetsoa liketso ha lihokelo li sebelisetsoa lintho. Mohlala, "Khoasolla" e ka ba konopo mme "ts'ebetso ea morao-rao" e ka ba sehokelo.

Likonopo tsohle li ikamahanya le setaele se boputsoa bo bobebe, empa ho ka sebelisoa lihlopha tse 'maloa tse sebetsang bakeng sa mefuta e fapaneng ea mebala. Lihlopha tsena li kenyelletsa sehlopha sa 'mala o moputsoa .primary, ​​​​boputsoa bo khanyang .info, sehlopha se setala .success, le sehlopha se sefubelu .danger. Ho feta moo, ho roala setaele sa hau ho bonolo.

Likonopo tsa mohlala

Mefuta ea likonopo e ka sebelisoa ho eng kapa eng e .btnsebelisitsoeng. Ka tloaelo u tla batla ho sebelisa tsena feela ho <a>, <button>, le ho khetha <input>likarolo. Mona ke kamoo e shebahalang kateng:

Mefuta e fapaneng

U batla likonopo tse kholoanyane kapa tse nyane? E be le eona!

Boemo ba bokooa

Bakeng sa likonopo tse sa sebetseng kapa tse koetsoeng ke sesebelisoa ka mabaka a mang, sebelisa boemo ba batho ba holofetseng. Ke tsa .disabledlihokelo le :disabledtsa <button>likarolo.

Lihokelo

Likonopo

Ke eng

Topbar ea rona ke bar e tsitsitseng e bolokang logo kapa lebitso la sebaka sa Marang-rang, navigation ea mantlha, le foromo ea ho batla.

Customizable

Likarolo tsohle tse ka hare, le topbar kaofela, ke boikhethelo. U ka khetha ho kenyelletsa logo/lebitso, nav, search, le nav ea bobeli-kapa motsoako ofe kapa ofe oa seo.

Li-dropdown li kenyelelitsoe

Joalo ka karolo ea mantlha ea ho sesa, re kenyelelitse bokhoni ba hore u kenye litheolelo ho nav ea hau. Sheba nav ea bobeli ka holimo (e eme ka ho le letona) ho bona hore na e etsoa joang.

Li-tab le lipilisi

Etsa mokhoa o bonolo oa ho tsamaea oa bobeli ka <ul>. Fetola pakeng tsa li-tab kapa lipilisi ka ho eketsa sehlopha se nepahetseng.

E nepahetse bakeng sa likaroloana tsa litaba joalo ka maqephe a litlhophiso tsa ak'haonte le linako tsa basebelisi bakeng sa ho fetola maqephe a litaba tse tšoanang. E fumaneha ka mefuta ea li-tabbed kapa lipilisi.

• Lehae
• Profile
• Melaetsa
• Litlhophiso
• Ikopanye
• Theosa
  • Sehokelo sa bobeli
  • Ntho e 'ngoe mona
  • Sehokelo se seng

<ul class = "tabs" > 
  <li class = "active" ><a href = "#"> Lehae </a></li >  
  <li><a href = "#"> Boemo </a> </li> 
  <li><a href = "#"> Melaetsa </a> </li> 
  <li><a href = "#"> Litlhophiso </a> </li> 
  <li><a href = "#"> Ikopanye </a> </li> 
</ul>

• Lehae
• Profile
• Melaetsa
• Litlhophiso
• Ikopanye

<ul sehlopha = "lipilisi" > 
  <li class = "active" ><a href = "#"> Lehae </a></li >  
  <li><a href = "#"> Boemo </a> </li> 
  <li><a href = "#"> Melaetsa </a> </li> 
  <li><a href = "#"> Litlhophiso </a> </li> 
  <li><a href = "#"> Ikopanye </a> </li> 
</ul>

Pagination

Mokhoa o bonolo le o sa reng letho oa pagination o khothalelitsoeng ke Rdio. Sebaka se seholo se thata ho fosa, se ka senyeha habonolo, 'me se fana ka libaka tse kholo tsa ho tobetsa.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← E fetileng </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 = "#"> E latelang & rarr ; </a></li>  
  </ul>
</ div>

Litemoso tsa mantlha

div.alert-message

Melaetsa ea mola o le mong bakeng sa ho totobatsa ho hloleha, ho hloleha ho ka bang teng, kapa katleho ea ketso. E bohlokoa haholo bakeng sa liforomo.

Thibela melaetsa

div.alert-message.block-message

Bakeng sa melaetsa e hlokang tlhaloso e fokolang, re na le litlhokomeliso tsa mokhoa oa lirapa. Tsena li nepahetse bakeng sa ho fana ka melaetsa e telele ea liphoso, ho lemosa mosebelisi ka ketso e sa lebelloang, kapa ho hlahisa tlhahisoleseling bakeng sa khatiso e eketsehileng leqepheng.

Mekhoa e metle

Li-modals-dialogs kapa lightboxes-li ntle bakeng sa liketso tsa maemo maemong ao ho leng bohlokoa hore maemo a ka morao a bolokehe.

Tool Tips

Li-Twipsies li bohlokoa haholo ho thusa mosebelisi ea ferekaneng le ho ba supa tseleng e nepahetseng.

Bafutsana

Sebelisa li-popovers ho fana ka lintlha tse tlase ho leqephe ntle le ho ama sebopeho.

Bootstrap e hahiloe ka Preboot , pakete e bulehileng ea li-mixins le mefuta e fapaneng e lokelang ho sebelisoa hammoho le Less , CSS preprocessor bakeng sa tsoelo-pele ea websaete e potlakileng le e bonolo.

Sheba hore na re sebelisitse Preboot joang ho Bootstrap le hore na u ka e sebelisa joang ha u ka khetha ho sebetsa ka tlase ho projeke ea hau e latelang.

Mokhoa oa ho e sebelisa

Sebelisa khetho ena ho sebelisa ka botlalo mefuta-futa ea Bootstrap's Less Less, metsoako, le nesting ho CSS ka javascript ho sebatli sa hau.

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

Ha u utloe tharollo ea .js? Leka sesebelisoa sa Less Mac kapa sebelisa Node.js ho bokella ha o tsamaisa khoutu ea hau.

Se kenyellelitsoeng

Mona ke tse ling tsa lintlha-khōlō tsa se kenyellelitsoeng ho Twitter Bootstrap e le karolo ea Bootstrap. E fetela ho webosaete ea Bootstrap kapa leqephe la projeke ea Github ho jarolla le ho ithuta haholoanyane.

Lintho tse fapaneng

Liphetoho ho tse Nyenyane li nepahetse bakeng sa ho boloka le ho nchafatsa hlooho ea hau ea CSS mahala. Ha u batla ho fetola boleng ba 'mala kapa boleng bo sebelisoang khafetsa, e nchafatse sebakeng se le seng 'me u sete.

// Lihokelo
@linkColor : #8b59c2;         
@linkColorHover :     fifala ( @linkColor , 10 ); 
 
// Meputsoana
@batsho : #000;             
@grayDark :           khantša ( @black , 25 %); 
@gray :               khantša ( @black , 50 %); 
@grayLight :          khantša ( @black , 70 %); 
@grayLighter :        khantša ( @black , 90 %); 
@tšoeu : #fff ;             
 
// Mebala ya Puo
@putsoa : #08b5fb;              
@tala : #46a546;             
@khubelu : #9d261d;               
@mosehla : #ffc40d;            
@orange : #f89406;            
@pinki : #c3325f;              
@pherese : #7a43b6;            
 
// Keriti ya motheo
@basefont : 13px ;          
@baseline : 18px ;          

Ho fana ka maikutlo

Less e boetse e fana ka mokhoa o mong oa ho fana ka maikutlo ho phaella ho /* ... */syntax e tloaelehileng ea CSS.

// Ena ke tlhaloso
/* Hona hape ke maikutlo */

E kopanya "wazoo".

Li-mixins ha e le hantle li kenyelletsa kapa likaroloana tsa CSS, li u lumella ho kopanya boloko ba khoutu ho e le 'ngoe. Li ntle bakeng sa thepa e kentsoeng pele ea barekisi joalo ka box-shadow, li-gradients tsa sebatli, mekotla ea litlhaku, le tse ling. Ka tlase ke mohlala oa li-mixins tse kenyellelitsoeng le Bootstrap.

Melato ea litlhaku

#mongolo {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
boholo ba     mongolo : @size ; 
    fonte - boima : @weight ; 
    mola - bophahamo : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - lelapa : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
boholo ba     mongolo : @size ; 
    fonte - boima : @weight ; 
    mola - bophahamo : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
boholo ba     mongolo : @size ; 
    fonte - boima : @weight ; 
    mola - bophahamo : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
boholo ba     mongolo : @size ; 
    fonte - boima : @weight ; 
    mola - bophahamo : @lineHeight ; 
  }
}

Gradients

#gradient {
  . rapama ( @startColor : #555, @endColor: #333) { 
    bokamorao - mmala : @endColor ; 
    bokamorao - pheta-pheta : pheta - x ;
    bokamorao - setšoantšo : - khtml - gradient ( linear , left top , right top , ho tloha ( @startColor ), ho ea ( @endColor )); // Mokgosi   
    bokamorao - setšoantšo : - moz - linear - gradient ( le letšehali , @startColor , @endColor ); // FF 3.6+    
    bokamorao - setšoantšo : - ms - linear - gradient ( ka ho le letšehali , @startColor , @endColor ); // IE10    
    bokamorao - setšoantšo : - webkit - gradient ( linear , holimo ka ho le letšehali, holimo ka ho le letona , 'mala - emisa ( 0 %, @startColor ), mmala - emisa ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    bokamorao - setšoantšo : - webkit - linear - gradient ( le letšehali , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    bokamorao - setšoantšo : - o - linear - gradient ( le letšehali , @startColor , @endColor ); // Opera 11.10    
    bokamorao - setšoantšo : linear - gradient ( left , @startColor , @endColor ); // Le standard   
  }
  . e thethehileng ( @startColor : #555, @endColor: #333) { 
    bokamorao - mmala : @endColor ; 
    bokamorao - pheta-pheta : pheta - x ;
    bokamorao - setšoantšo : - khtml - gradient ( linear , left top , left bottom , ho tloha ( @startColor ), ho ea ( @endColor )); // Mokgosi   
    bokamorao - setšoantšo : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    bokamorao - setšoantšo : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    bokamorao - setšoantšo : - webkit - gradient ( linear , holimo ka ho le letšehali , tlase ka ho le letšehali , mmala - emisa ( 0 %, @startColor ), mmala - emisa ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    bokamorao - setšoantšo : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    bokamorao - setšoantšo : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    bokamorao - setšoantšo : linear - gradient ( @startColor , @endColor ); // Boemo  
  }
  . tataiso ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . e emeng - e meraro - mebala ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Ts'ebetso le sistimi ea grid

E-ba majabajaba 'me u etse lipalo ho hlahisa metsoako e tenyetsehang le e matla joalo ka e ka tlase.

// Bokgale
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Sistimi ea Grid
. setshelo {
  bophara : @siteWidth ; 
  moeli : 0 auto ;  
  . clearfix ();
}
. likholomo ( @columnSpan : 1 ) {  
  bophara : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. offset ( @columnOffset : 1 ) {  
  margin - ka ho le letšehali : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}