Umlando

Ezinsukwini zangaphambili ze-Twitter, onjiniyela basebenzisa cishe noma yimuphi umtapo wezincwadi ababejwayele ukuhlangabezana nezidingo zangaphambili. I-Bootstrap yaqala njengempendulo ezinseleleni ezethulwa kanye nentuthuko eshesha ngokushesha phakathi ne-Hackweek yokuqala ye-Twitter.

Ngosizo nempendulo yonjiniyela abaningi ku-Twitter, i-Bootstrap ikhule ngokuphawulekayo ukuze ihlanganise hhayi izitayela eziyisisekelo kuphela, kodwa amaphethini edizayini aphambili futhi ahlala isikhathi eside.

Funda kabanzi ku-dev.twitter.com ›

Usekelo lwesiphequluli

I-Bootstrap ihlolwe futhi isekelwa kuziphequluli ezinkulu zesimanje njenge-Chrome, Safari, Internet Explorer, neFirefox.

• I-Safari yakamuva
• I-Google Chrome yakamuva
• IFirefox 4+
• I-Internet Explorer 7+
• I-Opera 11

Yini efakiwe

I-Bootstrap iza iphelele ne-CSS ehlanganisiwe, engahlanganisiwe, nezifanekiso eziyisibonelo.

• Wonke amafayela asekuqaleni .less
• I-CSS ehlanganiswe ngokuphelele ne-minified
• Gcwalisa imibhalo yomhlahlandlela wesitayela
• Isifanekiso sekhasi eliyisibonelo (okuningi okuzayo maduze)

Igridi ezenzakalelayo

Isistimu yegridi ezenzakalelayo enikeziwe njengengxenye ye-Bootstrap iyigridi yamakholomu angu-16 ebanzi engu-940px. Ukunambitheka kwesistimu yegridi engu-960 edumile, kodwa ngaphandle kwemajini engeziwe/i-padding kwesokunxele nakwesokudla.

Isibonelo somakhaphu wegridi

Njengoba kuboniswe lapha, ukwakheka okuyisisekelo kungadalwa “ngamakholomu” amabili, ngalinye lihlanganisa inombolo yamakholomu ayisisekelo angu-16 esiwachaze njengengxenye yesistimu yethu yegridi. Bheka izibonelo ngezansi ukuze uthole ukuhluka okwengeziwe.

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

Isakhiwo esilungisiwe

Isakhiwo esimisiwe nesilula esibanzi esingu-940px-wide, esimaphakathi sanoma iyiphi iwebhusayithi noma ikhasi elihlinzekwe ngomunye <div.container>.

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

Isakhiwo samanzi

Okunye, ukwakheka kwekhasi elishintshashintshayo elinobubanzi obuncane kanye nobukhulu obukhulu kanye nebha eseceleni engakwesokunxele. Ilungele izinhlelo zokusebenza namadokhumenti.

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

Izihloko & kopisha

Uhlelo olujwayelekile lwe-typographic lokuhlela amakhasi akho ewebhu.

Yonke igridi yokubhala isekelwe eziguquguqukayo ezimbili Ezincane kufayela lethu elithi preboot.less: @basefontkanye @baseline. Esokuqala siwusayizi wefonti eyisisekelo osetshenziswa kuyo yonke indawo kanti eyesibili ubude bomugqa oyisisekelo.

Sisebenzisa lezo ziguquguqukayo, kanye nezibalo ezithile, ukuze sakhe amamajini, ama-paddings, nobude bomugqa balo lonke uhlobo lwethu nokunye.

h1. Isihloko 1

h2. Isihloko 2

h3. Isihloko 3

h4. Isihloko 4

h5. Isihloko 5

h6. Isihloko 6

Isigaba sesibonelo

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

Isibonelo sesihloko Sinesihlokwana...

Okunhlobonhlobo. izakhi

Kusetshenziswa ukugcizelela, amakheli, nezifinyezo

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

Isetshenziswa nini

Amathegi okugcizelela ( <strong>kanye <em>) kufanele asetshenziselwe ukukhombisa ukubaluleka okwengeziwe noma ukugcizelela kwegama noma ibinzana elihlobene nekhophi elizungezile. Sebenzisa <strong>ngokubaluleka nokugcizelela ingcindezi<em> .

Ukugcizelela esigabeni

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

Qaphela: Kusalungile ukusebenzisa <b>kanye <i>namathegi ku-HTML5 futhi akudingekile ukuthi babhalwe ngokugqamile noma kube yi-ithalikhi, ngokulandelana (yize uma kukhona ingxenye ye-semantic eyengeziwe, isebenzise). <b>ihloselwe ukugqamisa amagama noma imishwana ngaphandle kokudlulisa ukubaluleka okwengeziwe, kuyilapho <i>ikakhulukazi eyezwi, amagama obuchwepheshe, njll.

Amakheli

Isici <address>sisetshenziselwa ulwazi lokuxhumana lukakhokho walo oseduze, noma wonke umsebenzi. Nansi indlela ebukeka ngayo:

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

Qaphela: Umugqa ngamunye <address>kufanele uphethe ngokunqanyulwa komugqa ( <br />) noma usongwe ngomaka weleveli yebhulokhi (isb, <p>) ukuze uhlele kahle okuqukethwe.

Izifinyezo

Ukuze uthole izifinyezo nama-akhronimi, sebenzisa <abbr>ithegi ( <acronym>yehlisiwe ku- HTML5 ). Faka ifomu elifushane phakathi kwethegi bese usetha isihloko segama eliphelele.

Izingcaphuno zokuvimba

<blockquote> <p> <small>

Indlela yokucaphuna

Ukuze ufake i-blockquote, zisonga <blockquote>bese <p>umaka <small>. Sebenzisa <small>isici ukucaphuna umthombo wakho futhi uzothola ideshi em —ngaphambi kwawo.

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

UDkt Julius Hibbert

Aku-odwe<ul>

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

Okungabhalwanga isitayela<ul.unstyled>

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

I-oda<ol>

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

Incazelodl

Uhlu lwezincazelo

Uhlu lwezincazelo luphelele ekuchazeni 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

I-Etiam porta sem malesuada magna mollis euismod.

Ukwakha amatafula

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

Amathebula mahle—ngezinto eziningi. Amathebula amahle, nokho, adinga uthando lwemakhaphu ukuze abe wusizo, akhule, futhi afundeke (ezingeni lekhodi). Nawa amathiphu ambalwa okusiza.

Ngaso sonke isikhathi bopha izihloko zekholomu yakho ngendlela <thead>yokuthi ukulandelana kube <thead>> <tr>> <th>.

Ngokufanayo nezihloko zekholomu, konke okuqukethwe komzimba wethebula lakho kufanele kusongwe ngokuthi ukulandelana <tbody>kwakho kube <tbody>> <tr>> <td>.

Isibonelo: Izitayela zetafula ezizenzakalelayo

Wonke amathebula azohlelwa ngokuzenzakalelayo abe nemingcele ebalulekile kuphela ukuze kuqinisekiswe ukufundeka nokugcina ukwakheka. Asikho isidingo sokungeza amakilasi engeziwe noma izibaluli.

#	Igama	Isibongo	Ulimi
1	Abanye	Eyodwa	IsiNgisi
2	UJoe	Okuhamba ngasithupha	IsiNgisi
3	Stu	I-Dent	Ikhodi

<ithebula>
  ...
</ithebula>

Isibonelo: Idube elinemithende

Thola okumnandi ngamatafula akho ngokungeza idube-striping—vele wengeze .zebra-stripedikilasi.

#	Igama	Isibongo	Ulimi
1	Abanye	Eyodwa	IsiNgisi
2	UJoe	Okuhamba ngasithupha	IsiNgisi
3	Stu	I-Dent	Ikhodi

Qaphela: I-Zebra-striping iyisithuthukisi esiqhubekayo esingatholakali kuziphequluli ezindala njenge-IE8 nangaphansi.

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

Isibonelo: I-Zebra-striped w/ TableSorter.js

Ngokuthatha isibonelo sangaphambilini, sithuthukisa ukusebenza kwamathebula ethu ngokuhlinzeka ngokusebenza kokuhlunga nge - jQuery kanye ne-plugin ye- Tablesorter . Chofoza unhlokweni wanoma isiphi ikholomu ukuze ushintshe ukuhlunga.

#	Igama	Isibongo	Ulimi
1	Eyakho	Eyodwa	IsiNgisi
2	UJoe	Okuhamba ngasithupha	IsiNgisi
3	Stu	I-Dent	Ikhodi

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

Izitayela ezizenzakalelayo

Wonke amafomu anikezwa izitayela ezizenzakalelayo ukuze awethule ngendlela efundekayo nengakala. Izitayela zinikezwa okokufaka kombhalo, khetha izinhlu, izindawo zombhalo, izinkinobho zomsakazo namabhokisi okuhlola, nezinkinobho.

Inganekwane yefomu lesibonelo

Okokufaka Okukhulu kwe-X

Khetha

1 2 3 4 5

Khetha

1 2 3 4 5

Okokufaka Okungahleleki

Inani elithile Lapha

Okokufaka Kukhutshaziwe

Okokufaka Okukhulu kwe-X

Amazwibela amancane ombhalo wosizo

Inganekwane yefomu lesibonelo

Umbhalo Omisiwe

@

Ibhokisi Lokuhlola Elimisiwe

Ibhokisi lokuhlola elifakwe

Okokufaka Kwefayela

Inganekwane yefomu lesibonelo

Uhlu Lwezinketho

• Inketho yokuqala yile nalokhuya—qiniseka ukuthi uyafaka phakathi ukuthi kungani kukuhle
• Inketho yesibili nayo ingahlolwa futhi ifakwe emiphumeleni yefomu
• Inketho yesithathu inga—yebo, ukuqagelile—futhi ingahlolwa futhi ifakwe emiphumeleni yefomu
• Inketho yesine ayikwazi ukubhekwa njengoba ivaliwe.

Qaphela: Amalebula azungeza zonke izinketho zezindawo zokuchofoza ezinkulu kakhulu kanye nefomu elisebenziseka kakhudlwana.

Ibanga Ledethi

ku Zonke izikhathi ziboniswa njenge-Pacific Standard Time (GMT -08:00).

Indawo yombhalo

Ibhulokhi yombhalo wosizo ukuchaza inkambu engenhla uma kudingeka.

Uhlu Lwezinketho

• Inketho yokuqala yile nalokhuya—qiniseka ukuthi uyafaka phakathi ukuthi kungani kukuhle
• Inketho yesibili yekani ingokunye futhi ukuyikhetha kuzosusa ukukhetha oku-1

  Khansela

Amafomu astakiwe

Engeza .form-stackedku-HTML yefomu lakho futhi uzoba namalebula ngaphezulu kwezinkambu zawo esikhundleni sakwesokunxele. Lokhu kusebenza kahle uma amafomu akho emafushane noma unamakholomu amabili okokufaka kumafomu asinda kakhulu.

Inganekwane yefomu lesibonelo

Okokufaka Okukhulu kwe-X

Khetha

1 2 3 4 5

Inganekwane yefomu lesibonelo

Okokufaka Okukhulu kwe-X

Amazwibela amancane ombhalo wosizo

Uhlu Lwezinketho

• Inketho yokuqala yile nalokhuya—qiniseka ukuthi uyafaka phakathi ukuthi kungani kukuhle
• Inketho yesibili nayo ingahlolwa futhi ifakwe emiphumeleni yefomu

Qaphela: Amalebula azungeza zonke izinketho zezindawo zokuchofoza ezinkulu kakhulu kanye nefomu elisebenziseka kakhudlwana.

Londoloza Izinguquko  Khansela

Izinkinobho

Njengomthetho, izinkinobho zisetshenziselwa izenzo kuyilapho izixhumanisi zisetshenziselwa izinto. Isibonelo, "Landa" kungaba inkinobho futhi "umsebenzi wakamuva" kungaba isixhumanisi.

Zonke izinkinobho zizenzakalela zesitayela esimpunga ngokukhanyayo, kodwa inani lamakilasi okusebenza angasetshenziswa kuzitayela ezihlukene zemibala. Lawa makilasi ahlanganisa ikilasi eliluhlaza okwesibhakabhaka .primary, ikilasi eliluhlaza okwesibhakabhaka .info, eliluhlaza okotshani .success, kanye nekilasi elibomvu .danger. Futhi, ukugoqa izitayela zakho kulula peasy.

Izinkinobho eziyisibonelo

Izitayela zezinkinobho zingasetshenziswa kunoma yini .btnesetshenzisiwe. Ngokuvamile uzofuna ukusebenzisa lezi kokuthi kuphela <a>, <button>, bese ukhetha <input>izici. Nansi indlela ebukeka ngayo:

Osayizi abahlukile

Uyathanda izinkinobho ezinkulu noma ezincane? Yiba nakho!

Isimo sokukhubazeka

Ngezinkinobho ezingasebenzi noma ezikhutshazwe uhlelo lokusebenza ngesizathu esisodwa noma esinye, sebenzisa isimo sokukhubazeka. Lokho okwezixhumanisi .disabledkanye nezakhi.:disabled<button>

Izixhumanisi

Izinkinobho

Kwenzenjani

Ibha yethu ephezulu iyibha engashintshi egcina ilogo yewebhusayithi noma igama, ukuzulazula okuyinhloko, kanye nefomu lokusesha.

Yenza ngokwezifiso

Wonke ama-elementi angaphakathi, kanye nayo yonke ibha ephezulu, angokuzithandela. Ungakhetha ukufaka ilogo/igama, i-nav, usesho, ne-nav yesibili—noma iyiphi inhlanganisela yalokho.

Okwehliswayo kufakiwe

Njengengxenye yokuzulazula okuyinhloko, sifake ikhono lakho lokwengeza okwehliswayo ku-nav yakho. Hlola i-nav yesibili ngenhla (iqondaniswe kwesokudla) ukuze ubone ukuthi yenziwa kanjani.

Amathebhu namaphilisi

Dala ukuzulazula kwesibili okulula nge- <ul>. Shintsha phakathi kwamathebhu noma amaphilisi ngokwengeza ikilasi elifanele.

Ilungele izingxenye ezingaphansi zokuqukethwe njengamakhasi wezilungiselelo ze-akhawunti yethu kanye nezikhathi zomsebenzisi zokuguqula phakathi kwamakhasi anokuqukethwe okufana. Itholakala ngezitayela zamathebhu noma zamaphilisi.

• Ikhaya
• Iphrofayela
• Imilayezo
• Izilungiselelo
• Oxhumana naye
• Okwehlayo
  • Isixhumanisi sesibili
  • Okunye lapha
  • Esinye isixhumanisi

<ul class = "amathebhu" > 
  <li class = "active" ><a href = "#" > Ikhaya </a></li>  
  <li><a href = "#" > Iphrofayela </a></li> 
  <li><a href = "#" > Imilayezo </a></li> 
  <li><a href = "#" > Izilungiselelo </a></li> 
  <li><a href = "#" > Xhumana naye </a></li> 
</ul>

• Ikhaya
• Iphrofayela
• Imilayezo
• Izilungiselelo
• Oxhumana naye

<ul class = "amaphilisi" > 
  <li class = "active" ><a href = "#" > Ikhaya </a></li>  
  <li><a href = "#" > Iphrofayela </a></li> 
  <li><a href = "#" > Imilayezo </a></li> 
  <li><a href = "#" > Izilungiselelo </a></li> 
  <li><a href = "#" > Xhumana naye </a></li> 
</ul>

Amakhasi

I-Ultra simplistic futhi inesitayela esincane sokuphegetha okukhuthazwe yi-Rdio. Ibhulokhi enkulu kunzima ukuyigeja, ingakala kalula, futhi ihlinzeka ngezindawo ezinkulu zokuchofoza.

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

Izexwayiso eziyisisekelo

div.alert-message

Imilayezo yomugqa owodwa yokugqamisa ukwehluleka, ukwehluleka okungenzeka, noma impumelelo yesenzo. Iwusizo kakhulu kumafomu.

Vimba imilayezo

div.alert-message.block-message

Emilayezweni edinga incazelo kancane, sinezixwayiso zesitayela sendima. Lokhu kulungele ukugcwalisa imilayezo yamaphutha amade, ukuxwayisa umsebenzisi ngesenzo esilindile, noma ukwethula ulwazi ukuze kugcizelelwe kakhulu ekhasini.

Amamodeli

Ama-modal—izingxoxo noma ama-lightboxes—alungele izenzo zomongo ezimeni lapho kubalulekile ukuthi umongo wangemuva ugcinwe.

Ithuluzi Amathiphu

Ama-Twipsies awusizo kakhulu ekusizeni umsebenzisi odidekile futhi amkhombise indlela efanele.

Ama-Popovers

Sebenzisa ama-popover ukuze unikeze ulwazi lombhalo ongaphansi ekhasini ngaphandle kokuthinta isakhiwo.

I-Bootstrap yakhiwe nge- Preboot , iphekhi yomthombo ovulekile wamamiksi nokuguquguquka okufanele kusetshenziswe ngokuhambisana Nokuncane , i-preprocessor ye-CSS yokuthuthukiswa kwewebhu okusheshayo nokulula.

Bheka ukuthi sisebenzise kanjani i-Preboot ku-Bootstrap nokuthi ungayisebenzisa kanjani uma ukhetha ukusebenzisa Okuncane kuphrojekthi yakho elandelayo.

Isetshenziswa kanjani

Sebenzisa le nketho ukuze usebenzise ngokugcwele okuguquguqukayo Okuncane kwe-Bootstrap, imiksi, nokuzalela ku-CSS usebenzisa i-javascript esipheqululini sakho.

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

Awusizwa isixazululo se-.js? Zama uhlelo lokusebenza lwe-Less Mac noma usebenzise i-Node.js ukuze uhlanganise lapho usebenzisa ikhodi yakho.

Yini efakiwe

Nazi ezinye zezinto ezivelele ezifakwe ku-Twitter Bootstrap njengengxenye ye-Bootstrap. Yiya kuwebhusayithi ye-Bootstrap noma ikhasi lephrojekthi ye-Github ukuze ulande futhi ufunde kabanzi.

Okuguquguqukayo

Okuguquguqukayo kokuthi Okuncane kulungile ekugcineni nokubuyekeza ikhanda lakho le-CSS mahhala. Uma ufuna ukushintsha inani lombala noma inani elisetshenziswa njalo, libuyekeze endaweni eyodwa bese usumisiwe.

// Izixhumanisi
@linkColor : #8b59c2;         
@linkColorHover :     mnyama ( @linkColor , 10 ); 
 
// Izimpunga
@omnyama : #000;             
@grayDark :           khanyisa ( @black , 25 %); 
@grey :               khanyisa ( @black , 50 %); 
@grayLight :          khanyisa ( @black , 70 %); 
@grayLighter :        khanyisa ( @black , 90 %); 
@mhlophe : #fff;             
 
// Imibala Ye-Accent
@blue : #08b5fb;              
@green : #46a546;             
@bomvu : #9d261d;               
@yellow : #ffc40d;            
@orange : #f89406;            
@pinki : #c3325f;              
@purple : #7a43b6;            
 
// Igridi yesisekelo
@basefont : 13px ;          
@isisekelo : 18px ;          

Ukuphawula

Okuncane futhi kuhlinzeka ngesinye isitayela sokubeka amazwana ngaphezu kwe- /* ... */syntax evamile ye-CSS.

// Lokhu ukuphawula
/* Lokhu futhi ukuphawula */

Hlanganisa i-wazoo

Imiksi ngokuyisisekelo ihlanganisa noma izingxenye ze-CSS, okukuvumela ukuthi uhlanganise ibhulokhi yekhodi ibe yinto eyodwa. Zilungele izakhiwo eziqalwe ngumthengisi njenge- box-shadow, ama-gradient esipheqululini esiphambanayo, izitaki zefonti, nokuningi. Ngezansi isampula yamamiksi afakwe ne-Bootstrap.

Izitaki zefonti

#ifonti {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
usayizi     wefonti : @size ; _ 
    ifonti - isisindo : @weight ; 
    umugqa - ubude : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    ifonti - umndeni : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
usayizi     wefonti : @size ; _ 
    ifonti - isisindo : @weight ; 
    umugqa - ubude : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    ifonti - umndeni : "Georgia" , Times New Roman , Times , sans - serif ;     
usayizi     wefonti : @size ; _ 
    ifonti - isisindo : @weight ; 
    umugqa - ubude : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    ifonti - umndeni : "Monaco" , Courier New , monospace ;   
usayizi     wefonti : @size ; _ 
    ifonti - isisindo : @weight ; 
    umugqa - ubude : @lineHeight ; 
  }
}

Ama-Gradients

#igradient {
  . ovundlile ( @startColor : #555, @endColor: #333) { 
    ingemuva - umbala : @endColor ; 
    ingemuva - phinda : phinda - x ;
    ingemuva - isithombe : - khtml - i- gradient ( umugqa , phezulu kwesokunxele , phezulu kwesokudla , ukusuka ( @startColor ), kuya ku ( @endColor )); // Konqueror   
    ingemuva - isithombe : - moz - linear - gradient ( kwesokunxele , @startColor , @endColor ); // FF 3.6+    
    ingemuva - isithombe : - ms - linear - gradient ( kwesokunxele , @startColor , @endColor ); // IE10    
    ingemuva - isithombe : - webkit - i- gradient ( umugqa , phezulu kwesokunxele , phezulu kwesokudla , umbala - ima ( 0 %, @startColor ), umbala - misa ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    ingemuva - isithombe : - webkit - linear - gradient ( left , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    ingemuva - isithombe : - o - linear - gradient ( kwesokunxele , @startColor , @endColor ); // I-Opera 11.10    
    ingemuva - isithombe : umugqa - i- gradient ( kwesobunxele , @startColor , @endColor ); // Le standard   
  }
  . mpo ( @startColor : #555, @endColor: #333) { 
    ingemuva - umbala : @endColor ; 
    ingemuva - phinda : phinda - x ;
    ingemuva - isithombe : - khtml - i- gradient ( umugqa , phezulu kwesokunxele , phansi kwesokunxele , ukusuka ( @startColor ), kuya ku ( @endColor )); // Konqueror   
    ingemuva - isithombe : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    ingemuva - isithombe : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    ingemuva - isithombe : - webkit - gradient ( umugqa , phezulu kwesokunxele , phansi kwesokunxele , umbala - ima ( 0 %, @startColor ), umbala - misa ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    ingemuva - isithombe : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    ingemuva - isithombe : - o - linear - gradient ( @startColor , @endColor ); // I-Opera 11.10   
    ingemuva - isithombe : umugqa - i- gradient ( @startColor , @endColor ); // Izinga  
  }
  . isiqondiso ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . mpo - emithathu - imibala ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Ukusebenza kanye nesistimu yegridi

Zijabulise futhi wenze izibalo ukuze ukhiqize izingxube eziguquguqukayo nezinamandla njengale engezansi.

// Igridi
@gridIkholomu : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Igridi System
. isitsha {
  ububanzi : @siteWidth ; 
  umkhawulo : 0 auto ;  
  . clearfix ();
}
. amakholomu ( @columnSpan : 1 ) {  
  ububanzi : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. offset ( @columnOffset : 1 ) {  
  imajini - kwesokunxele : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}