Imbali

Kwiintsuku zangaphambili ze-Twitter, iinjineli zasebenzisa phantse naliphi na ithala leencwadi ababeqhelene nalo ukuhlangabezana neemfuno eziphambili. I-Bootstrap yaqala njengempendulo kwimiceli mngeni eye yabonisa kwaye uphuhliso lwakhawuleza ngexesha leHackweek yokuqala ye-Twitter.

Ngoncedo kunye nempendulo yeenjineli ezininzi kwi-Twitter, i-Bootstrap ikhule ngokuphawulekayo ukuba ingabandakanya kuphela izitayile ezisisiseko, kodwa iipateni zokuyila eziphambili kunye nezizinzileyo.

Funda ngakumbi kwi-dev.twitter.com ›

Inkxaso yebhrawuza

I-Bootstrap iyavavanywa kwaye iyaxhaswa kwiziphequluli eziphambili zale mihla njengeChrome, Safari, Internet Explorer, kunye neFirefox.

• ISafari yamva nje
• UGoogle Chrome wamva nje
• IFirefox 4+
• Internet Explorer 7+

Yintoni ebandakanyiweyo

I-Bootstrap iza iphelele kunye ne-CSS ehlanganisiweyo, engaqokelelwanga, kunye nemizekelo yeetemplates.

• Zonke iifayile zoqobo .ezingaphantsi
• Iqulunqwe ngokupheleleyo kwaye yancitshiswa CSS
• Gqibezela amaxwebhu esikhokelo sesimbo
• Umzekelo wetemplate yephepha (okuninzi kuseza kungekudala)

Igridi ehlala ikho

Inkqubo yegridi engagqibekanga enikezelweyo njengenxalenye yeBootstrap yi 940px ebanzi 16-kholamu yegridi. Yincasa yenkqubo yegridi edumileyo ye-960, kodwa ngaphandle komjikelo ongezelelweyo / ukupakisha kwicala lasekhohlo nasekunene.

Umzekelo wophawulo lwegridi

Njengoko kubonisiwe apha, uyilo olusisiseko lunokwenziwa “ngeekholamu” ezimbini, nganye ithatha inani leekholamu ezili-16 ezisisiseko esizichaze njengenxalenye yenkqubo yethu yegridi. Jonga le mizekelo ingezantsi ukuze ufumane iinguqulelo ezininzi.

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

Uyilo oluzinzileyo

Isiseko se-940px esibanzi, esisembindini uyilo lwesikhongozeli malunga nayo nayiphi na indawo okanye iphepha.

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

Uyilo lolwelo

I-flexible fluid okanye i-liquid page structure kunye ne-min- kunye ne-max-widths kunye nebar yecala lasekhohlo. Ilungele usetyenziso.

<umzimba>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </ div>
    <div class = "umxholo" > 
      ...
    </ div>
  </ div>
</ umzimba>

Izihloko kunye nekopi

Uluhlu olusemgangathweni lwenkqubo yokuchwetheza yokulungisa amaphepha akho ewebhu.

h1. Isihloko 1

h2. Isihloko 2

h3. Isihloko 3

h4. Isihloko 4

h5. Isihloko 5

h6. Isihloko 6

Umhlathi womzekelo

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.

Umzekelo wesihloko Inesihloko esisezantsi...

NONE izinto

Ukusebenzisa ugxininiso, iidilesi, & nezifinyezo

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

Ukusetyenziswa nini

Iithegi zogxininiso ( <strong>kunye <em>) mazisetyenziswe ukubonisa ukubaluleka okanye ugxininiso lwegama okanye ibinzana elinxulumene nekopi yalo elingqongileyo. Sebenzisa <strong>ngokubaluleka kunye <em>nogxininiso loxinzelelo .

Ugxininiso kwisiqendu

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

Qaphela: Kulungile ukusebenzisa <b>kunye <i>neethegi kwi-HTML5, kodwa azisezi nezitayile zendalo kwakhona. <b>yenzelwe ukuqaqambisa amagama okanye amabinzana ngaphandle kokudlulisela ukubaluleka okongeziweyo, ngelixa <i>ubukhulu becala iselizwi, amagama obugcisa, njl.

Iidilesi

Isici <address>sisetyenziselwa ulwazi loqhagamshelwano kukhokho walo okufutshane, okanye umzimba wonke womsebenzi. Nantsi indlela ekhangeleka ngayo:

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

Qaphela: Umgca ngamnye <address>kufuneka uphele ngokuqhawula umgca ( <br />) okanye usongelwe kwithegi yomgangatho webhloko (umzekelo, <p>) ukucwangcisa ngokufanelekileyo umxholo.

Ushunqulelo

Ukwenzela izifinyezo kunye nee-akhronimi, sebenzisa i- <abbr>tag ( <acronym>ihoxisiwe kwi- HTML5 ). Beka ifom ye-shorthand ngaphakathi kwethegi kwaye usete isihloko segama elipheleleyo.

Iingcaphuno zebhloko

<blockquote> <p> <small>

Indlela yokucaphula

Ukubandakanya i-blockquote, <blockquote>jikeleza <p>kunye <small>neethegi. Sebenzisa <small>isiqalelo ukucaphula umthombo wakho kwaye uya kufumana i-dash em —phambi kwayo.

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

UGqr Julius Hibbert

Ayiodolwanga<ul>

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

Ayifakwanga isimbo<ul.unstyled>

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

Iodolwe<ol>

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

Inkcazodl

Uluhlu lweenkcazelo

Uluhlu lwenkcazo lufanelekile ukuchaza amagama.

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.

Ukwakha iitafile

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

Iitafile zilungile-kwizinto ezininzi. Iitheyibhile ezinkulu, nangona kunjalo, zidinga uthando lwemarkup ukuba lube luncedo, lube luncedo, kwaye lufundeke (kwinqanaba lekhowudi). Nanga amacebiso ambalwa okunceda.

Soloko usongele iiheader zekholamu yakho ngendlela <thead>yokuba ulawulo lweqela <thead>> <tr>> <th>.

Ngokufana neeheader zekholamu, wonke umxholo womzimba wetheyibhile yakho kufuneka usongelwe <tbody>ukuze ulawulo lwakho lube <tbody>> <tr>> <td>.

Umzekelo: Izimbo zetafile ehlala ikho

Zonke iitheyibhile ziya kwenziwa ngohlobo oluzenzekelayo kunye nemida ebalulekileyo kuphela ukuqinisekisa ukufundeka kunye nokugcinwa kwesakhiwo. Akukho mfuneko yokongeza iiklasi ezongezelelweyo okanye iimpawu.

#	Igama lokuqala	Ifani	Ulwimi
1	Abanye	Nye	IsiNgesi
2	UJoe	Iiphekhi ezintandathu	IsiNgesi
3	Stu	Isibonda	Ikhowudi

< iklasi yetafile = "itafile eqhelekileyo"> iklasi = "itafile eqhelekileyo" >
  ...
</ table>

Umzekelo: IQwarha linemigca

Fumana ubumnandi obuncinci ngeetafile zakho ngokongeza i-zebra-striping-yongeza nje .zebra-stripediklasi.

#	Igama lokuqala	Ifani	Ulwimi
1	Abanye	Nye	IsiNgesi
2	UJoe	Iiphekhi ezintandathu	IsiNgesi
3	Stu	Isibonda	Ikhowudi

Qaphela: IZebra-striping luphuculo oluqhubela phambili alufumanekiyo kwizikhangeli ezindala ezifana ne-IE8 nangaphantsi.

<table class="common-table zebra-striped"> class = "common-table zebra-striped" >
...
</ table>

Umzekelo: Zebra-striped w/ TableSorter.js

Ukuthatha umzekelo wangaphambili, siphucula ukusebenziseka kweetafile zethu ngokubonelela ngokuhlelwa kokusebenza nge- jQuery kunye ne- plugin yeTablesorter . Nqakraza nawuphi na umxholo womhlathi ukutshintsha uhlobo.

#	Igama lokuqala	Ifani	Ulwimi
1	Eyakho	Nye	IsiNgesi
2	UJoe	Iiphekhi ezintandathu	IsiNgesi
3	Stu	Isibonda	Ikhowudi

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" > </script>
<script > 
  $ ( umsebenzi () { 
    $ ( "itafile#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< iklasi yetafile = "i-zebra-striped yetafile eqhelekileyo" > 
  ...
</ table>

Izimbo ezihlala zikhona

Zonke iifom zinikwa izimbo ezihlala zikhona ukuze zibonise ngendlela efundekayo nenokwaleka. Izimbo zibonelelwa ngamagalelo okubhaliweyo, khetha uluhlu, iindawo ezibhaliweyo, amaqhosha erediyo kunye neebhokisi zokukhangela, kunye namaqhosha.

Umzekelo welivo

X-Enkulu iNgeniso

Khetha

1 2 3 4 5

Khetha

1 2 3 4 5

Igalelo elingenakuhleleleka

Ixabiso elithile Apha

Ungeniso olungasebenziyo

X-Enkulu iNgeniso

Isiqwengana esincinci sombhalo woncedo

Umzekelo welivo

Isiqendu esiPhambili

@

Ibhokisi yokuKhangela eMiselweyo

Ibhokisi yokukhangela eFakelweyo

Ungeniso Lwefayile

Umzekelo welivo

Uluhlu lweenketho

• Ukhetho lokuqala yile kwaye leya-qiniseka ukuba ubandakanya ukuba kutheni ilungile
• Ukhetho lwesibini lunokutshekishwa kwaye lufakwe kwiziphumo zefom
• Ukhetho lwesithathu lunako-ewe, uqikelele-nalo lujongwe kwaye lufakwe kwiziphumo zefomu
• Ukhetho lwesine alunakujongwa njengoko luvaliwe.

Qaphela: Iileyibhile zijikeleze zonke iinketho zeendawo ezinkulu zokucofa kunye nefomu esebenzisekayo ngakumbi.

Uluhlu lomhla

ukuya Onke amaxesha aboniswa njengeXesha loMgangatho wePasifiki (GMT -08:00).

Textarea

Ibhloko yoncedo olubhaliweyo lokuchaza indawo engentla ukuba kuyimfuneko.

Uluhlu lweenketho

• Ukhetho lokuqala yile kwaye leya-qiniseka ukuba ubandakanya ukuba kutheni ilungile
• Ukhetho lwesibini lunokutshekishwa kwaye lufakwe kwiziphumo zefom

Gcina Utshintsho  Rhoxisa

Iifom ezipakishiweyo

Yongeza .form-stackedkwi-HTML yefomu yakho kwaye uya kuba neeleyibhile ngaphezulu kwamasimi azo endaweni yasekhohlo. Oku kusebenza kakuhle ukuba iifom zakho zimfutshane okanye uneekholamu ezimbini zamagalelo kwiifom ezinzima.

Umzekelo welivo

X-Enkulu iNgeniso

Khetha

1 2 3 4 5

Umzekelo welivo

X-Enkulu iNgeniso

Isiqwengana esincinci sombhalo woncedo

Uluhlu lweenketho

• Ukhetho lokuqala yile kwaye leya-qiniseka ukuba ubandakanya ukuba kutheni ilungile
• Ukhetho lwesibini lunokutshekishwa kwaye lufakwe kwiziphumo zefom

Qaphela: Iileyibhile zijikeleze zonke iinketho zeendawo ezinkulu zokucofa kunye nefomu esebenzisekayo ngakumbi.

Gcina Utshintsho  Rhoxisa

Amaqhosha

Njengesiqhelo, amaqhosha asetyenziselwa izenzo ngelixa amakhonkco asetyenziselwa izinto. Umzekelo, "Khuphela" inokuba liqhosha kwaye "umsebenzi wamva nje" unokuba likhonkco.

Onke amaqhosha angagqibekanga kwisitayile esingwevu esikhanyayo, kodwa udidi oluluhlaza .primaryluyafumaneka. Kwaye, ukuqengqeleka izitayile zakho kulula peasy.

Umzekelo amaqhosha

Izimbo zamaqhosha zinokusetyenziswa kuyo nantoni na .btnesetyenzisiweyo. Ngokwesiqhelo uya kufuna ukusebenzisa ezi kuphela <a>, <button>, kwaye ukhethe <input>izinto. Nantsi indlela ekhangeleka ngayo:

Ubungakanani obunye

Unqwenela amaqhosha amakhulu okanye amancinci? Yiba nayo!

Ilizwe labakhubazekileyo

Kumaqhosha angasebenziyo okanye avaliwe yi-app ngenxa yesizathu esinye okanye esinye, sebenzisa imeko yokukhubazeka. Leyo .disabledyeyamakhonkco kunye :disablednezinto <button>.

Unxulumano

Amaqhosha

Yintoni

Ibar yethu ephezulu yibha esisigxina enelogo yewebhusayithi okanye igama, ukukhangela okuphambili, kunye nefomu yokukhangela.

Customizable

Zonke izinto ezingaphakathi, kunye nebar engaphezulu iyonke ngokunjalo, azikhethele. Unokukhetha ukubandakanya i-logo/igama, i-nav, uphendlo, kunye ne-nav yesibini-okanye nayiphi na indibaniselwano yaloo nto.

Ukwehla kuqukiwe

Njengenxalenye yokukhangela okuphambili, sifake ukukwazi kwakho ukongeza ukwehla kwi-nav yakho. Jonga i-nav yesibini ngasentla (ilungelelaniswe ekunene) ukuze ubone ukuba yenziwa njani.

Iithebhu kunye neepilisi

Yenza ukhangelo olulula lwesibini nge <ul>. Tshintsha phakathi kweethebhu okanye iipilisi ngokudibanisa iklasi efanelekileyo.

Ilungele amacandelwana asezantsi omxholo afana namaphepha eesethingi zeakhawunti kunye namaxesha omsebenzisi okuguqula phakathi kwamaphepha omxholo ofanayo. Ifumaneka kwiindlela zeetab okanye iipilisi.

• Ekhaya
• Inkangeleko yesimo
• Imiyalezo
• Iisetingi
• Qhagamshelana

<ul class="tabs"> iklasi = "iithebhu" >
  <li iklasi = "esebenzayo" > <a href = "#"> Ekhaya </a></li>  
  <li><a href = "#"> Iprofayile </a> </li> 
  <li><a href = "#"> Imiyalezo </a> </li> 
  <li><a href = "#"> Useto </a> </li> 
  <li><a href = "#"> Qhagamshelana </a> </li> 
</ul>

• Ekhaya
• Inkangeleko yesimo
• Imiyalezo
• Iisetingi
• Qhagamshelana

<ul class="pills"> iklasi = "iipilisi" >
  <li iklasi = "esebenzayo" > <a href = "#"> Ekhaya </a></li>  
  <li><a href = "#"> Iprofayile </a> </li> 
  <li><a href = "#"> Imiyalezo </a> </li> 
  <li><a href = "#"> Useto </a> </li> 
  <li><a href = "#"> Qhagamshelana </a> </li> 
</ul>

Ukwenziwa kwePagination

I-Ultra elula kunye ne-styled pagination encinci ephefumlelwe yi-Rdio. Ibhloko enkulu kunzima ukuyiphosa, kulula ukukala, kwaye ibonelela ngeendawo ezinkulu zokucofa.

<div class="pagination"> iklasi = "pagination" >
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Ngaphambili </a></li>  
    <li iklasi = "esebenzayo" > <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 iklasi = "elandelayo" ><a href = "#" > Okulandelayo → </a></li>  
  </ul>
</ div>

Izilumkiso ezisisiseko

Imiyalezo yomgca omnye yokuqaqambisa ukusilela, ukusilela okunokwenzeka, okanye impumelelo yesenzo. Iluncedo kakhulu kwiifom.

Vimba imiyalezo

Kwimiyalezo efuna ingcaciso kancinane, sinezilumkiso zesimbo somhlathi. Ezi zilungele ukubhabhisa imiyalezo emide yempazamo, ukulumkisa umsebenzisi ngesenzo esilindileyo, okanye ukunika ulwazi nje ukuze kugxininiswe ngakumbi kwiphepha.

Iimodeli

Iimodals-incoko zababini okanye ii-lightboxes-zilungile kwizenzo zomxholo kwiimeko apho kubalulekile ukuba umxholo ongasemva ugcinwe.

Iingcebiso zesixhobo

I-Twipsies iluncedo kakhulu ekuncedeni umsebenzisi obhidekileyo kunye nokubakhomba kwicala elifanelekileyo.

Iipopovers

Sebenzisa iipopovers ukunika ulwazi olungaphantsi komxholo kwiphepha ngaphandle kokuchaphazela uyilo.

I-Bootstrap yakhiwe nge- Preboot , ipakethe yomthombo ovulekileyo wemixube kunye nezinto eziguquguqukayo eziza kusetyenziswa ngokubambisana noNcinci , i-CSS yangaphambili yokuphuhliswa kwewebhu ngokukhawuleza kwaye kulula.

Jonga indlela esisebenzise ngayo i-Preboot kwi-Bootstrap kunye nendlela onokuyisebenzisa ngayo xa ukhetha ukuqhuba Ngaphantsi kwiprojekthi yakho elandelayo.

Indlela yokuyisebenzisa

Sebenzisa olu khetho ukwenza usetyenziso olugcweleyo lweBootstrap's Okuguquguqukayo Okuncinci, imixube, kunye nendlwane kwi-CSS ngejavascript kumkhangeli zincwadi wakho.

<link rel="ishiti lesimbo/ngaphantsi" href="less/bootstrap.less" media="konke" /> rel = "icwecwe lesimbo/ngaphantsi" href = "ngaphantsi/bootstrap.less" media = "konke" />   
<script src = "js/less-1.0.41.min.js" > </script> 

Awuziva isisombululo se.js? Zama i-Less Mac app okanye usebenzise i-Node.js ukuqokelela xa uhambisa ikhowudi yakho.

Yintoni ebandakanyiweyo

Nanga amanye amagqabantshintshi okubandakanyiweyo kwi-Twitter Bootstrap njengenxalenye yeBootstrap. Yiya kwiwebhusayithi yeBootstrap okanye iphepha leprojekthi yeGithub ukuze ukhuphele kwaye ufunde ngakumbi.

Iinguqu zemibala

Izinto eziguquguqukayo kwiNgancinci zigqibelele ukugcina kunye nokuhlaziya intloko yakho ye-CSS simahla. Xa ufuna ukutshintsha ixabiso lombala okanye ixabiso elisetyenziswa rhoqo, lihlaziye kwindawo enye kwaye usetwe.

// Iikhonkco
@linkColor : #8b59c2;         
@linkColorHover :     mnyama ( @linkColor , 10 ); 
// Izimvi
@mnyama : #000;             
@grayDark :           khaphukha ( @black , 25 %); 
@grey :               khaphukha ( @black , 50 %); 
@grayLight :          khaphukha ( @black , 70 %); 
@grayLighter :        khaphukha ( @black , 90 %); 
@mhlophe : #fff;             
// Imibala ye-Accent
@blue : #08b5fb;              
@green : #46a546;             
@bomvu : #9d261d;               
@mthubi : #ffc40d;            
@orenji : #f89406;            
@pinki : #c3325f;              
@mfusa : #7a43b6;            
// Isiseko
@baseline : 20px ;          

Ukugqabaza

Okuncinci kukwabonelela ngesinye isimbo sokuphawula ukongeza kwi- /* ... */syntax yesiqhelo yeCSS.

// Olu luphawu
/* Oku kwakhona ngumbono */

Udibanisa wazoo

Imixube ngokusisiseko ibandakanya okanye iinxalenye zeCSS, ikuvumela ukuba udibanise ibhloko yekhowudi ibenye. Zilungile kwiipropathi ezilungiselelwe umthengisi njenge box-shadow, iigradient zebrowser ezinqamlezayo, isitaka sefonti, nokunye. Ngezantsi isampuli yeengxube ezifakwe kwi-Bootstrap.

Iifonti

#ifonti {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    ifonti - ubungakanani : @ubungakanani ; 
    ifonti - ubunzima : @weight ; 
    umgca - ubude : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - intsapho : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    ifonti - ubungakanani : @ubungakanani ; 
    ifonti - ubunzima : @weight ; 
    umgca - ubude : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - usapho : "Georgia" , Times New Roman , Times , sans - serif ;     
    ifonti - ubungakanani : @ubungakanani ; 
    ifonti - ubunzima : @weight ; 
    umgca - ubude : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - usapho : "Monaco" , Courier New , monospace ;   
    ifonti - ubungakanani : @ubungakanani ; 
    ifonti - ubunzima : @weight ; 
    umgca - ubude : @lineHeight ; 
  }
}

Imigangatho

#igradient {
  . oxwesileyo ( @startColor : #555, @endColor: #333) { 
    imvelaphi - umbala : @endColor ; 
    imvelaphi - phinda : phinda - x ;
    imvelaphi - umfanekiso : - khtml - igradient ( linear , ekhohlo phezulu , ekunene phezulu , ukusuka ( @startColor ), ukuya ( @ endColor )); // Konqueror   
    imvelaphi - umfanekiso : - moz - linear - gradient ( ekhohlo , @startColor , @endColor ); // FF 3.6+    
    imvelaphi - umfanekiso : - ms - linear - gradient ( ekhohlo , @startColor , @endColor ); // IE10    
    imvelaphi - umfanekiso : - webkit - igradient ( linear , left top , right top , color - stop ( 0 %, @startColor ), umbala - misa ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    imvelaphi - umfanekiso : - webkit - linear - gradient ( left , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    imvelaphi - umfanekiso : - o - linear - gradient ( ekhohlo , @startColor , @endColor ); // I-Opera 11.10    
    - ms - isihluzo : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    isihluzi : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    imvelaphi - umfanekiso : linear - gradient ( ekhohlo , @startColor , @endColor ); // Le umgangatho   
  }
  . nkqo ( @startColor : #555, @endColor: #333) { 
    imvelaphi - umbala : @endColor ; 
    imvelaphi - phinda : phinda - x ;
    imvelaphi - umfanekiso : - khtml - igradient ( linear , phezulu ekhohlo , ezantsi ekhohlo , ukusuka ( @startColor ), ukuya ( @ endColor )); // Konqueror   
    imvelaphi - umfanekiso : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    imvelaphi - umfanekiso : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    yangasemva - umfanekiso : - webkit - gradient ( linear , phezulu ekhohlo , ekhohlo ezantsi , umbala - misa ( 0 %, @startColor ), umbala - misa ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    imvelaphi - umfanekiso : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    imvelaphi - umfanekiso : - o - linear - gradient ( @startColor , @endColor ); // I-Opera 11.10   
    - ms - isihluzo : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    isihluzi : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    imvelaphi - umfanekiso : umgca - igradient ( @startColor , @endColor ); // Umgangatho  
  }
  . umkhombandlela ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . nkqo - emithathu - imibala ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Ukusebenza kunye nenkqubo yegridi

Fumana ubumnandi kwaye wenze izibalo ukwenza imixube ebhetyebhetye kwaye enamandla njengale ingezantsi.

// Igridi
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Inkqubo yegridi
. isikhongozeli {
  ububanzi : @siteWidth ; 
  umda : 0 auto ;  
  . clearfix ();
}
. iikholamu ( @columnSpan : 1 ) {  
  bonisa : ngaphakathi ; 
  dada : ekhohlo ;
  ububanzi : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  umda - wasekhohlo : @gridGutterWidth ; 
  & : umntwana wokuqala {
    umda - ekhohlo : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
}