Ekisenge ekisookerwako

Enkola ya grid esookerwako ewereddwa ng’ekitundu kya Bootstrap ye 940px obugazi 16-column grid. It’s a flavor of the popular 960 grid system, naye nga tewali margin/padding eyongezeddwa ku ludda olwa kkono ne ddyo.

Eky’okulabirako grid markup

Nga bwe kiragibwa wano, ensengeka enkulu esobola okutondebwa nga erina "ennyiriri" bbiri, buli emu ekwata ku muwendo gw'ennyiriri 16 ez'omusingi ze twannyonnyola ng'ekitundu ky'enkola yaffe eya giridi. Laba ebyokulabirako wansi okufuna enjawulo endala.

<div ekibiina="olunyiriri"> class = "olunyiriri" >
  <div class = "ennyiriri span6" > 
    ...
  </div> nga bwe kiri
  <div class = "ennyiriri span10" > 
    ...
  </div> nga bwe kiri
</div> nga bwe kiri

Enteekateeka eteredde

Enteekateeka y’ekintu ekikulu 940px obugazi, wakati kumpi ku mukutu gwonna oba omuko.

<omubiri>
  <div class = "ekintu ekitereka" > 
    ...
  </div> nga bwe kiri
</omubiri>

Ensengeka y’amazzi

Ensengeka y’olupapula ey’amazzi oba amazzi ekyukakyuka ng’erina obugazi bwa min- ne max n’oludda olwa kkono. Kirungi nnyo ku apps.

<omubiri>
  <div class = "ekibya-amazzi" > 
    <div class = "olubaawo lw'ebbali" > 
      ...
    </div> nga bwe kiri
    <div class = "ebirimu" > 
      ...
    </div> nga bwe kiri
  </div> nga bwe kiri
</omubiri>

Emitwe n’okukoppa

Ensengeka y’okuwandiika eya bulijjo ey’okusengeka empapula zo ez’oku mutimbagano.

h1. Omutwe 1

h2. Omutwe 2

h3. Omutwe 3

h4. Omutwe 4

h5. Omutwe 5

h6. Omutwe 6

Eky’okulabirako akatundu

Nullam quis risus eget ekikuta ky’omusajja eky’okwewunda vel eu leo. Cum sociis natoque penatibus ne magnis dis parturient montes, nascetur okusekererwa mus. Nullam id dolor id nibh ebidduka ebidduka ut id elit.

Eky'okulabirako omutwe Gulina omutwe omutono...

Osobola n’okugattako emitwe emitonotono nga olina <strong>ne<em>

Misc. ebirungo ebikola

Okukozesa okuggumiza, endagiriro, & ebifupi

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

Ddi lw’olina okukozesa

Ebiwandiiko ebiggumiza ( <strong>ne <em>) bisaana okukozesebwa okwongerako enjawulo eraga wakati w’ekigambo oba ekigambo ne kkopi ekyetoolodde. Kozesa <strong>ku plain old attention ne <em>ku slick attention n'emitwe.

Okuggumiza mu katundu

Fusce dapibus , tellus ac cursus commodo , tortor mauris ekirungo ekizimbulukusa nibh , ekizimbulukusa massa justo okutuula amet risus. Ekimera ekiyitibwa Maecenas faucibus ekiwuka ekiyitibwa mollis ekiyitibwa interdum. Nulla vitae elit libero, eddagala eriyitibwa pharetra augue.

Endagiriro

Element addressekozesebwa ku —wakiteebereza! —endagiriro. Laba engeri gye kirabika:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890. Enkola y’okukozesa eddagala lino

Weetegereze: Buli layini mu addressmust okukoma n’okumenya layini ( <br />) okusengeka obulungi ebirimu nga bwe bisomebwa mu bulamu obw’amazima awatali sitayiro yonna essiddwaako.

Ebifupi ebifupi

Ku bifupi n'enfunyiro, kozesa abbrakabonero ( acronymis deprecated in HTML5 ). Teeka foomu y’ennyiriri munda mu tag era oteekewo omutwe gw’erinnya mu bujjuvu.

Ebigambo ebiziyiza

<blockquote> <p> <cite>

Kakasa nti ozinga blockquotearound zo paragraphne citetags. Bw’oba ​​ojuliza ensibuko, kozesa citeekintu ekyo. CSS ejja kusooka erinnya ne em dash (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed okukola eiusmod okugwa okw’ekiseera ut okukola et dolore magna aliqua...

Omusawo Julius Hibbert

Etalagirwa<ul>

• Jeremy Bixby bwe yategeezezza
• Robert Dezure, omuwandiisi w’ebitabo
• Josh Washington, omuwandiisi w’ebitabo
• Anton Capresi, omuwandiisi w’ebitabo
• Bannange ba Ttiimu
  • George Castanza omuwandiisi w’ebitabo
  • Jerry Seinfeld, omuwandiisi w’ebitabo
  • Omusawo Kramer
  • Elaine Bennis, omuwandiisi w’ebitabo
  • Omupya
• Yokaana Yakobo
• Paul Pierce omuwandiisi w’ebitabo
• Kevin Garnett omuwandiisi w’ebitabo

Etaliiko sitayiro<ul.unstyled>

• Jeremy Bixby bwe yategeezezza
• Robert Dezure, omuwandiisi w’ebitabo
• Josh Washington, omuwandiisi w’ebitabo
• Anton Capresi, omuwandiisi w’ebitabo
• Bannange ba Ttiimu
  • George Castanza omuwandiisi w’ebitabo
  • Jerry Seinfeld, omuwandiisi w’ebitabo
  • Omusawo Kramer
  • Elaine Bennis, omuwandiisi w’ebitabo
  • Omupya
• Yokaana Yakobo
• Paul Pierce omuwandiisi w’ebitabo
• Kevin Garnett omuwandiisi w’ebitabo

Yalagirwa<ol>

1. Jeremy Bixby bwe yategeezezza
2. Robert Dezure, omuwandiisi w’ebitabo
3. Josh Washington, omuwandiisi w’ebitabo
4. Anton Capresi, omuwandiisi w’ebitabo
5. Bannange ba Ttiimu
   1. George Castanza omuwandiisi w’ebitabo
   2. Jerry Seinfeld, omuwandiisi w’ebitabo
   3. Omusawo Kramer
   4. Elaine Bennis, omuwandiisi w’ebitabo
   5. Omupya
6. Yokaana Yakobo
7. Paul Pierce omuwandiisi w’ebitabo
8. Kevin Garnett omuwandiisi w’ebitabo

Okunnyonnyoladl

Enkalala z’ennyonnyola

Olukalala lw’ennyonnyola lutuukiridde okunnyonnyola ebigambo.

Euismod

Ensigo id ligula porta felis euismod ensigo eget lacinia odio sem nec elit.

Donec id elit etali ya mi porta gravida ku eget metus.

Malesuada eriko ensolo

Etiam porta sem omusajja omunene ennyo omuto.

Okuzimba emmeeza

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

Emmeeza nnungi nnyo —ku bintu bingi. Emmeeza ennene, naye, zeetaaga akatono ak’okwagala okussaako obubonero okusobola okuba ez’omugaso, ezisobola okulinnyisibwa, era ezisomebwa (ku ddaala lya koodi). Wano waliwo obukodyo obutonotono obuyinza okuyamba.

Bulijjo zinga emitwe gyo egy'ennyiriri mu ngeri theadnti ensengeka y'ebifo thead> tr> th.

Okufaananako n'emitwe gy'ennyiriri, ebirimu byonna eby'omubiri gw'emmeeza yo birina okuzingibwa mu a tbodykale ensengeka yo eba tbody> tr> td.

Okugeza: Emisono gy’emmeeza egy’enjawulo

Emmeeza zonna zijja kukola sitayiro ya otomatiki nga zirina ensalosalo ezikulu zokka okukakasa nti zisomebwa n’okukuuma ensengeka. Tekyetaagisa kwongerako classes oba attributes ez'enjawulo.

# .	Erinnya erisooka	Erinnya erisemba	Olulimi
1.	Mu	Emu	Olungereeza
2.	Joe	Sixpack nga bwe kiri	Olungereeza
3.	Stu	Dent	Koodi

<emmeeza class="emmeeza-eza bulijjo"> class = "emmeeza-eya ​​bulijjo" >
  ...
</emmeeza>

Okugeza: Zebra-striped

Funa akatono akalungi n’emmeeza zo ng’oyongerako zebra-striping —mala yongera ku .zebra-stripedkiraasi.

# .	Erinnya erisooka	Erinnya erisemba	Olulimi
1.	Mu	Emu	Olungereeza
2.	Joe	Sixpack nga bwe kiri	Olungereeza
3.	Stu	Dent	Koodi

<table class="emmeeza eya bulijjo eriko emisono egy'empologoma"> class = "emmeeza eya bulijjo eriko emisono egy'empologoma" >
...
</emmeeza>

Okugeza: Zebra-emisono w/ TableSorter.js

Nga tutwala ekyokulabirako ekyayita, tulongoosa omugaso gw’emmeeza zaffe nga tuwa enkola y’okusunsula nga tuyita mu jQuery ne Tablesorter plugin. Nywa ku mutwe gw'ennyiriri zonna okukyusa okusunsula.

# .	Erinnya erisooka	Erinnya erisemba	Olulimi
1.	Yo	Emu	Olungereeza
2.	Joe	Sixpack nga bwe kiri	Olungereeza
3.	Stu	Dent	Koodi

<ekika ky'ekiwandiiko="ekiwandiiko/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "ekiwandiiko/javascript" src = "js/jquery/jquery.okusunsula emmeeza.min.js" ></script> 
< ekika ky'ekiwandiiko = "ekiwandiiko/javascript" > 
  $ ( ekiwandiiko ). mwetegefu ( omulimu () { . 
    $ ( "emmeeza#okusunsulaEmmeezaEkyokulabirako" ). tablesorter ( { Olukalala lw'okusunsula : [[ 1 , 0 ]]} );   
  });
</script>
< ekibiina ky'emmeeza = "emmeeza eya bulijjo eriko emisono egy'empologoma" > 
  ...
</emmeeza>

Emisono egy’enjawulo

Ffoomu zonna ziweebwa sitayiro ezisookerwako okuziyanjula mu ngeri esomebwa era esobola okulinnyisibwa. Emisono giweebwa okuyingiza ebiwandiiko, enkalala z’okulonda, ebitundu by’ebiwandiiko, obutambi bwa leediyo n’ebibokisi ebikebera, ne obutambi.

Ekyokulabirako ffoomu legend

X-Okuyingiza Okunene

Okulonda

1. 2. 3. 4. 5.

Okulonda

1. 2. 3. 4. 5.

Ebiyingizibwa Ebitasobola kulongoosebwa

Ebimu biba bya Mugaso Wano

Okuyingiza okulemeddwa

X-Okuyingiza Okunene

Akatundu akatono ak’ekiwandiiko ky’obuyambi

Ekyokulabirako ffoomu legend

Ebiwandiiko Ebiteekeddwateekeddwa nga Tebinnabaawo

@

Akabokisi k’okukebera akategekeddwa nga tekunnabaawo

Akabokisi k’okukebera akagattibwako

Okuyingiza Fayiro

Ekyokulabirako ffoomu legend

Olukalala lw’Eby’Oyinza Okulonda

• Eky’okukola ekisooka kiri kino ne kiri —kakasa nti ossaamu lwaki kirungi nnyo
• Enkola eyokubiri nayo esobola okukeberebwa n’okuteekebwa mu bivudde mu foomu
• Enkola eyokusatu esobola —yee, wakiteebereza —nayo esobola okukeberebwa n’okuteekebwa mu bivudde mu foomu
• Enkola ey'okuna tesobola kukeberebwa kuba eremeseddwa.

Weetegereze: Ebiwandiiko byetoolodde byonna eby’okulondako eby’ebitundu ebinene ennyo eby’okunyiga ne ffoomu esinga okukozesebwa.

Ennaku z’omwezi

ku Ebiseera byonna biragiddwa nga Pacific Standard Time (GMT -08:00).

Ekitundu ky’ebiwandiiko

Block of help text okunnyonnyola ennimiro waggulu bwe kiba kyetaagisa.

Olukalala lw’Eby’Oyinza Okulonda

• Eky’okukola ekisooka kiri kino ne kiri —kakasa nti ossaamu lwaki kirungi nnyo
• Enkola eyokubiri nayo esobola okukeberebwa n’okuteekebwa mu bivudde mu foomu

Teeka Enkyukakyuka okusazaamu

Ffoomu ezitumbiddwa ku ntuumu

Yongera .form-stackedku HTML ya foomu yo ojja kuba n’ebiwandiiko waggulu ku nnimiro zaabwe mu kifo ky’okubeera ku kkono waabwe. Kino kikola bulungi singa foomu zo ziba nnyimpi oba olina empagi bbiri ez’ebiyingizibwa ku foomu ezizitowa.

Ekyokulabirako ffoomu legend

X-Okuyingiza Okunene

Okulonda

1. 2. 3. 4. 5.

Ekyokulabirako ffoomu legend

Olukalala lw’Eby’Oyinza Okulonda

• Eky’okukola ekisooka kiri kino ne kiri —kakasa nti ossaamu lwaki kirungi nnyo
• Enkola eyokubiri nayo esobola okukeberebwa n’okuteekebwa mu bivudde mu foomu

Weetegereze: Ebiwandiiko byetoolodde byonna eby’okulondako eby’ebitundu ebinene ennyo eby’okunyiga ne ffoomu esinga okukozesebwa.

Teeka Enkyukakyuka okusazaamu

Ebikondo ebiyitibwa Buttons

Nga enkola, buttons zikozesebwa ku bikolwa ate links zikozesebwa ku bintu. Okugeza, "Download" eyinza okuba button ate "recent activity" eyinza okuba link.

Butaamu zonna zisookerwako ku sitayiro ya nzirugavu omutangaavu, naye .primarykiraasi ya bbululu eriwo. Plus, okuyiringisiza emisono gyo kyangu peasy.

Eky’okulabirako obutambi

Button styles zisobola okusiigibwa ku kintu kyonna nga .btnzisiigiddwa. Mu ngeri entuufu ojja kwagala okussa bino ku a, button, n’okulonda inputebintu byokka. Laba engeri gye kirabika:

Okukyusakyusa mu sayizi

Fancy buttons ennene oba entono? Mubeere ne ku kyo!

Embeera ebalema

Ku buttons ezitakola oba eziremeddwa app olw’ensonga emu oba endala, kozesa embeera eremeddwa. Ekyo kya .disabledlinks ne :disabledku buttonelements.

Enkolagana

Ebikondo ebiyitibwa Buttons

Kiki kye kiri

Ebbaala yaffe ey’okungulu ye bbaala etali nkyukakyuka erimu akabonero oba erinnya ly’omukutu, okutambulirako okusookerwako, ne foomu y’okunoonya.

Eyinza okukyusibwakyusibwa

Ebintu byonna ebiri munda, n'ebbaala yonna ey'okungulu nayo, bya kwesalirawo. Osobola okusalawo okussaamu akabonero/erinnya, nav, okunoonya, ne nav ey’okubiri —oba okugatta kwonna okw’ebyo.

Ebintu ebisuuliddwa mulimu

Ng’ekimu ku bitundu by’okutambuliramu okukulu, tukussaamu obusobozi bwo okwongerako ebikka ku nav yo. Laba secondary nav waggulu (right aligned) olabe engeri gyekikolebwamu.

Tabs n’empeke

Tonda okutambula okw'okubiri okwangu nga olina ul. Waanyisiganya wakati wa tabu oba empeke ng’ogattako kiraasi esaanira.

Kirungi nnyo eri ebitundu ebitonotono eby’ebirimu nga empapula zaffe ez’ensengeka za akawunti n’ebiseera by’abakozesa okukyusakyusa wakati w’emiko egy’ebirimu ebiringa. Esangibwa mu sitayiro za tabbed oba pill.

• Ewaka
• Ebikukwatako
• Obubaka
• Enteekateeka
• Okutuukirira

<ul ekibiina="ebipande"> class = "ebipande" >
  <li class = "ekola" ><a href = "" > Awaka </a></li>  
  <li><a href = "" > Ebifaananyi </a></li> 
  <li><a href = "" > Obubaka </a></li> 
  <li><a href = "" > Ensengeka </a></li> 
  <li><a href = "" > Tuukirira </a></li> 
</ul>

• Ewaka
• Ebikukwatako
• Obubaka
• Enteekateeka
• Okutuukirira

<ul class="empeke"> class = "empeke" >
  <li class = "ekola" ><a href = "" > Awaka </a></li>  
  <li><a href = "" > Ebifaananyi </a></li> 
  <li><a href = "" > Obubaka </a></li> 
  <li><a href = "" > Ensengeka </a></li> 
  <li><a href = "" > Tuukirira </a></li> 
</ul>

Okuwandiika empapula

Ultra simplistic era minimally styled pagination nga efunye okubudaabudibwa okuva mu Rdio. Bbulooka ennene nzibu okusubwa, nnyangu okulinnyisibwa, era egaba ebifo ebinene eby’okunyiga.

<div ekibiina="olupapula"> class = "okuwandiika empapula" >
  <ul> nga bwe kiri
    <li class = "eyali eremeddwa" ><a href = "" > ← Eddako </a></li>  
    <li kiraasi = "ekola" ><a href = "" > 1 </a></li>  
    <li><a href = "" > 2 </a></li> . Okumanya ebisingawo ku nsonga eno 
    <li><a href = "" > 3 </a></li> . Okumanya ebisingawo ku nsonga eno 
    <li><a href = "" > 4 ​​</a></li> . Okumanya ebisingawo 
    <li><a href = "" > 5 </a></li> . Okumanya ebisingawo 
    <li class = "ekiddako" ><a href = "" > Ekiddako → </a></li> nga bwe kiri  
  </ul>
</div> nga bwe kiri

Okulabula okusookerwako

Obubaka obw’olunyiriri lumu olw’okulaga okulemererwa, okulemererwa okuyinza okubaawo, oba obuwanguzi bw’ekikolwa. Naddala kya mugaso ku ffoomu.

Zibira obubaka

Ku bubaka obwetaaga okunnyonnyolwa akatono, tulina okulabula ku sitayiro y’akatundu. Bino bituukira ddala ku bubbling up obubaka obw’ensobi obuwanvu, okulabula omukozesa ku kikolwa ekisuubirwa, oba okumala okwanjula amawulire okusobola okuggumiza ennyo ku lupapula.

Ebikozesebwa mu kukola (Modals).

Modals —dialogs oba lightboxes —kirungi nnyo ku bikolwa eby’embeera mu mbeera nga kikulu embeera y’emabega okukuumibwa.

Popovers eziyitibwa Popovers

Kozesa popovers okuwa amawulire aga subtextual ku lupapula awatali kukola layout.

Bootstrap yazimbibwa ne Preboot , open-source pack ya mixins ne variables okukozesebwa awamu ne Less , CSS preprocessor okusobola okukola web mu bwangu era mu ngeri ennyangu.

Laba engeri gye twakozesaamu Preboot mu Bootstrap n'engeri gy'oyinza okugikozesaamu singa osalawo okuddukanya Less ku pulojekiti yo eddako.

Engeri y’okugikozesaamu

Kozesa enkola eno okukozesa mu bujjuvu enkyukakyuka za Bootstrap eza Less, mixins, ne nesting mu CSS nga oyita mu javascript mu browser yo.

<link rel="olupapula lw'omulembe/ekitono" ekika="ekiwandiiko/css" href="ekitono/bootstrap.ekitono" media="byona" /> rel = "olupapula lw'omulembe/ekitono" ekika = "ekiwandiiko/css" href = "ekitono/bootstrap.ekitono" media = "byona" />    
< ekika ky'ekiwandiiko = "ekiwandiiko/javascript" src = "js/ekitono-1.0.41.min.js" ></script>  

Towulira .js solution? Gezaako app ya Less Mac oba kozesa Node.js okukunganya nga oteeka code yo.

Ebirimu

Wano waliwo ebimu ku bikulu ebiri mu Twitter Bootstrap ng’ekitundu ku Bootstrap. Yolekera omukutu gwa Bootstrap oba omuko gwa pulojekiti ya Github okuwanula n’okuyiga ebisingawo.

Enkyukakyuka za langi

Enkyukakyuka mu Less zituukira ddala ku kulabirira n'okutereeza CSS yo nga tewali kulumwa mutwe. Bw’oba ​​oyagala okukyusa omuwendo gwa langi oba omuwendo ogutera okukozesebwa, gutereeze mu kifo kimu era oteekeddwa.

// Ebiyungo
@Embala y'enkolagana : #8b59c2;         
@linkColorHover : enzikiza (     @Langi y'enkolagana , 10 ); 
// Enzirugavu
@omuddugavu : #000;             
@grayDark : okutangaaza (           @omuddugavu , 25 %); 
@enzirugavu : okutangaaza (               @omuddugavu , 50 %); 
@GrayLight : okutangaaza (          @omuddugavu , 70 %); 
@grayLighter : okutangaaza (        @omuddugavu , 90 %); 
@omuzungu : #fff;             
// Langi za Accent
@blue : #08b5fb nga bwe kiri;              
@ekiddugavu : #46a546;             
@emmyufu : #9d261d;               
@emmyufu : #ffc40d;            
@emicungwa : #f89406;            
@pinki : #c3325f nga bwe kiri;              
@omumyufu : #7a43b6;            
// Omusingi
@omusingi : 20px ;          

Okukubaganya ebirowoozo

Less era egaba sitayiro endala ey'okukomentinga nga kwotadde /* ... */n'ensengeka ya CSS eya bulijjo.

// Eno ye comment
/* Eno nayo comment */

Mixins okutuuka ku wazoo

Mixins okusinga ziba includes oba partials for CSS, okukusobozesa okugatta block ya code mu emu. Zino nnungi nnyo eri eby'obugagga ebisookerwako eby'omutunzi nga box-shadow, cross-browser gradients, font stacks, n'ebirala. Wansi waliwo sample ya mixins ezibeera ne Bootstrap.

Entuumu z’empandiika

#fonti { .
  . shorthand ( @obuzito : bulijjo , @obunene : 14px , @obugulumivu bw'olunyiriri : 20px ) {     
obunene     bw'empandiika : @size ; _ 
    font - obuzito : @obuzito ; 
    layini - obugulumivu : @lineHeight ; 
  } .
  . sans - serif ( @obuzito : obwa bulijjo , @obunene : 14px , @obugulumivu bw'olunyiriri : 20px ) {     
ekika     ky'empandiika : " Helvetica Neue " , ​​Helvetica , Arial , ekintu ekitaliimu ;   
obunene     bw'empandiika : @size ; _ 
    font - obuzito : @obuzito ; 
    layini - obugulumivu : @lineHeight ; 
  } .
  . serif ( @obuzito : obwa bulijjo , @obunene : 14px , @obugulumivu bw'olunyiriri : 20px ) {     
    font - family : "Georgia" , Ebiseera Ebipya Omuruumi , Ebiseera , sans - serif ;     
obunene     bw'empandiika : @size ; _ 
    font - obuzito : @obuzito ; 
    layini - obugulumivu : @lineHeight ; 
  } .
  . monospace ( @obuzito : bulijjo , @obunene : 12px , @obugulumivu bw'olunyiriri : 20px ) {     
    font - family : "Monaco" , Omubaka Omupya , ekifo kimu ;   
obunene     bw'empandiika : @size ; _ 
    font - obuzito : @obuzito ; 
    layini - obugulumivu : @lineHeight ; 
  } .
} .

Ebikyukakyuka (gradients).

#gradient { .
  . horizontal ( @Langi y'okutandika : #555, @Langi y'enkomerero: #333) { 
langi     y'emabega : @endColor ; _ 
    background - okuddamu : okuddamu - x ;
    background - image : - khtml - gradient ( linear , ku kkono waggulu , ku ddyo waggulu , okuva ku ( @startColor ), okutuuka ku ( @endColor )); // Omukozi w'ebintu   
ekifaananyi -     eky'emabega : -moz - linear - gradient ( ku kkono , @Langi y'okutandika , @Embala y'enkomerero ); // FF 3.6+ nga bwe kiri    
ekifaananyi     eky'emabega : - ms - linear - gradient ( ku kkono , @Langi y'okutandika , @Embala y'enkomerero ); // IE10 nga bwe kiri    
    background - ekifaananyi : - webkit - gradient ( linear , ku kkono waggulu , ku ddyo waggulu , langi - okuyimirira ( 0 %, @startColor ), langi - okuyimirira ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
ekifaananyi     eky'emabega : - webkit - linear - gradient ( ku kkono , @Langa y'okutandika , @Embala y'enkomerero ); // Safari 5.1+, Chrome 10+    
ekifaananyi -     eky'emabega : -o - linear - gradient ( ku kkono , @Langi y'okutandika , @Embala y'enkomerero ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient (Embala y'okutandika='%d', langi y'enkomerero='%d', Ekika ky'Embala=1)" , @Langi y'okutandika , @Langi y'enkomerero ); // IE8+ nga bwe kiri  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient (Embala y'okutandika='%d', langi enkomerero='%d',Ekika ky'enkomerero=1)" , @Langi y'okutandika , @Langi y'enkomerero )); // IE6 & IE7 
ekifaananyi     eky'emabega : linear - gradient ( ku kkono , @Langi y'okutandika , @Embala y'enkomerero ); // Le omutindo   
  } .
  . vertical ( @Langi y'okutandika : #555, @Langi y'enkomerero: #333) { 
langi     y'emabega : @endColor ; _ 
    background - okuddamu : okuddamu - x ;
    background - image : - khtml - gradient ( linear , ku kkono waggulu , ku kkono wansi , okuva ku ( @startColor ), okutuuka ku ( @endColor )); // Omukozi w'ebintu   
ekifaananyi     eky'emabega : - moz - linear - gradient ( @Langi y'okutandika , @Embala y'enkomerero ); // FF 3.6+ nga bwe kiri   
ekifaananyi     eky'emabega : - ms - linear - gradient ( @Langi y'okutandika , @Embala y'enkomerero ); // IE10 nga bwe kiri   
    background - ekifaananyi : - webkit - gradient ( linear , kkono waggulu , kkono wansi , langi - okuyimirira ( 0 %, @startColor ), langi - okuyimirira ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
ekifaananyi     eky'emabega : - webkit - linear - gradient ( @Langi y'okutandika , @Embala y'enkomerero ); // Safari 5.1+, Chrome 10+   
ekifaananyi     eky'emabega : - o - linear - gradient ( @Langi y'okutandika , @Embala y'enkomerero ); // Opera 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(Embala y'okutandikar='%d', langi enkomerero='%d',Ekika ky'okukyusakyusa=0)" , @Langi y'okutandika , @Langi y'enkomerero ); // IE8+ nga bwe kiri  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient (Embala y'okutandika='%d', langi enkomerero='%d',Ekika ky'enkomerero=0)" , @Langi y'okutandika , @Langi y'enkomerero )); // IE6 & IE7 
ekifaananyi     eky'emabega : linear - gradient ( @Langi y'okutandika , @Embala y'enkomerero ); // Omutindo  
  } .
  . obulagirizi ( @Langi y'okutandika : #555, @Langi y'enkomerero: #333, @deg: 45deg) { 
    ...
  } .
  . vertical - ssatu - langi ( @Langi y'okutandika : #00b3ee, @Langi y'omu makkati: #7a43b6, @EmbalaStop: 0.5, @Langi y'enkomerero: #c3325f) { 
    ...
  } .
} .

Enkola y’emirimu n’enkola ya grid

Funa fancy era okole okubala okukola mixins ezikyukakyuka era ez'amaanyi nga eno wammanga.

// Ensengekera (Griditude).
@gridEmpagi : 16 ;       
@gridObugazi bw'Empagi : 40px ;   
@gridGutterObugazi : 20px ;   
// Enkola ya Grid
. ekintu ekirimu { .
  obugazi : @Obugazi bw'ekifo ; 
  margin : 0 mu ngeri ey'obwengula ;  
  . okutereeza obulungi ();
} .
. ennyiriri ( @columnSpan : 1 ) { .  
  okulaga : mu layini ; 
  float : ku kkono ;
  obugazi : ( @gridObugazi bw'Empagi * @empagiSpan ) + ( @gridGutterObugazi * ( @empagiSpan - 1 ));         
  margin - ku kkono : @GiridGutterObugazi ; 
  &: asooka - omwana { .
    margin - ku kkono : 0 ; 
  } .
} .
. offset ( @ennyiririOffset : 1 ) { .  
  margin - left : ( @gridObugazi bw'ennyiriri * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! ekikulu ;          
} .