Matimu

Emasikwini yo sungula ya Twitter, vanjhiniyara a va tirhisa kwalomu ka layiburari yin’wana ni yin’wana leyi a va yi toloverile leswaku va fikelela swilaveko swa le mahlweni. Bootstrap yi sungurile tanihi nhlamulo ya mintlhontlho leyi nga nyikeriwa naswona nhluvukiso wu hatlisisiwile hi ku hatlisa hi nkarhi wa Hackweek yo sungula ya Twitter.

Hi ku pfuniwa na mbuyelo wa vanjhiniyara vo tala eka Twitter, Bootstrap yi kurile swinene ku katsa ku nga ri ntsena switayele swa masungulo, kambe swifaniso swo saseka no tiya swa dizayini ya le mahlweni.

Hlaya swo tala eka dev.twitter.com ›

Nseketelo wa xihlamusela-marito

Bootstrap yi kamberiwile no seketeriwa eka swihlamusela-marito leswikulu swa manguva lawa swo fana na Chrome, Safari, Internet Explorer, na Firefox.

• Safari ya sweswinyana
• Google Chrome ya sweswinyana
• Firefox ya 4+
• Xihlovo xa Internet xa 7+
• Opera ya 11

Leswi swi katsiweke

Bootstrap yi ta yi helerile na CSS leyi hlengeletiweke, leyi nga hlengeletiwangiki, na tithempleyiti ta xikombiso.

• Tifayili hinkwato ta .less ta masungulo
• CSS leyi hlengeletiweke hi ku helela ni leyi hungutiweke
• Hetisa matsalwa ya xitayili xa nkongomiso
• Xikombiso xa xifaniso xa pheji (swin’wana swi ta ta ku nga ri khale)

Gridi ya xiviri

Sisiteme ya giridi ya xiviri leyi nyikiweke tanihi xiphemu xa Bootstrap i giridi yo anama ya 940px ya 16 wa tikholomu. I nantswo wa sisiteme ya grid ya 960 leyi dumeke, kambe handle ka margin/padding yo engetela eka tlhelo ra ximatsi na ra xinene.

Xikombiso xa ku fungha ka gridi

Hilaha swi kombisiweke hakona laha, xivumbeko xa xisekelo xi nga endliwa hi "tikholomu" timbirhi, yin'wana na yin'wana yi hlanganisa nhlayo ya tikholomu ta masungulo ta 16 leti hi ti hlamuseleke tanihi xiphemu xa sisiteme ya hina ya giridi. Vona swikombiso leswi nga laha hansi ku kuma ku hambana kun’wana.

<div tlilasi = "layini" > 
  <div class = "span6 tikholomu" > 
    ...
  </div>
  <div class = "tikholomu ta span10" > 
    ...
  </div>
</div>

Xivumbeko lexi nga cinciki

Xivumbeko xa xiviri ni xo olova xa 940px-wide, lexi nga exikarhi xa kwalomu ka webusayiti yin’wana ni yin’wana kumbe tluka leri nyikeriweke hi yin’we <div.container>.

<miri>
  <div class = "xigwitsirisi" > 
    ...
  </div>
</body>

Xivumbeko xa mati

Xivumbeko xin’wana, lexi cinca-cincaka xa pheji ya fluid lexi nga na min- na max-widths na sidebar ya voko ra ximatsi. Swikahle swinene eka ti apps na ti docs.

<miri>
  <div class = "xigwitsirisi-xigwitsirisi" > 
    <div class = "xiphemu xa le tlhelo" > 
      ...
    </div>
    <div class = "nhundzu" > 
      ...
    </div>
  </div>
</body>

Tinhlokomhaka & ku kopa

Xiyimo xa ntolovelo xa ku thayipa xo hlela matluka ya wena ya webu.

Gridi hinkwayo ya ku thayipa yi sekeriwe eka swilo swimbirhi leswi cinca-cincaka swa Less eka fayili ya hina ya preboot.less: @basefontna @baseline. Xo sungula i base font-size leyi tirhisiweke hinkwako kasi xa vumbirhi i base line-height.

Hi tirhisa swilo sweswo leswi cinca-cincaka, ni tinhlayo tin’wana, ku endla ti- margin, ti-padding, ni ti-line-height ta muxaka wa hina hinkwawo ni swin’wana.

h1. Nhlokomhaka ya 1

h2. Nhlokomhaka ya 2

h3. Nhlokomhaka ya 3

h4. Nhlokomhaka ya 4

h5. Nhlokomhaka ya 5

h6. Nhlokomhaka ya 6

Xikombiso xa ndzimana

Nullam quis risus eget xitombo xa xirhendzevutani lexi khavisiweke vel eu leo. Cum sociis natoque penatibus na magnis leyi nga na ku veleka, nascetur ridiculus mus. Nullam id dolor id nibh ultricies mimovha ut id elit.

Xikombiso xa nhlokomhaka Xi na nhlokomhaka-ntsongo...

Misc. swiaki swa xiaki

Ku tirhisa ku kandziyisa, tiadirese, & swipfuxeto

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

Xana u fanele u tirhisa rini

Tithegi to kandziyisa ( <strong>na <em>) ti fanele ku tirhisiwa ku kombisa nkoka lowu engetelekeke kumbe ku kandziyisiwa ka rito kumbe xivulwa loko xi pimanisiwa ni kopi leyi ri rhendzeleke. Tirhisa <strong>hi nkoka ni <em>ku kandziyisa ntshikilelo .

Ku kandziyisiwa eka ndzimana

Fusce dapibus , tellus ac cursus commodo , tortor mauris xitombo xa xirhendzevutani xa xirhendzevutani xa xirhendzevutani xa xirhendzevutani xa xirhendzevutani xa xirhendzevutani. Maecenas faucibus mollis leyi nga exikarhi ka yona. Nulla vitae elit libero, ku nga pharetra augue.

Xiya: Swi ha ri kahle ku tirhisa <b>na <i>tithegi eka HTML5 naswona a swi bohi leswaku swi va na xitayili xa bold na italic, hi ku landzelelana (hambi leswi loko ku ri na elemente ya semantic swinene, yi tirhise). <b>yi endleriwe ku kombisa marito kumbe swivulwa handle ko hundzisela nkoka lowu engetelekeke, kasi <i>ngopfungopfu i ya rito, marito ya xithekiniki, na swin’wana.

Tiadirese

Xiaki <address>lexi xi tirhisiwa eka vuxokoxoko bya vuhlanganisi bya kokwa wa xona wa le kusuhi, kumbe miri hinkwawo wa ntirho. Hi leyi ndlela leyi swi langutekaka ha yona:

Xiya: Layini yin’wana na yin’wana eka an <address>yi fanele ku hela hi line-break ( <br />) kutani yi phutseriwe hi thegi ya xiyimo xa xibokisana (xikombiso, <p>) ku hlela kahle leswi nga endzeni.

Swipfuxeto

Eka swipfuxeto na swihlamusela-marito, tirhisa <abbr>thegi ( <acronym>yi nga ha tirhisiwi eka HTML5 ). Veka fomo ya xitlhokovetselo endzeni ka thegi ivi u veka nhlokomhaka ya vito leri heleleke.

Switlhokovetselo swa swibokisana

<blockquote> <p> <small>

Ndlela yo tshaha

Ku katsa blockquote, phutsela <blockquote>etlhelo <p>na <small>tithegi. Tirhisa <small>element ku tshaha xihlovo xa wena u ta kuma em dash —emahlweni ka yona.

Lorem ipsum dolor tshama amet, consectetur adipiscing xiyimo xa le henhla. Nhlayo leyi heleleke ya xiyimo xa le mahlweni i ante venenatis dapibus posuere velit aliquet.

Dokodela Julius Hibbert

A swi odariwanga<ul>

• Lorem ipsum dolor tshama amet
• Consectetur leyi nga ni mafurha yo tala
• Nhlayo leyi heleleke ya molestie lorem eka massa
• Facilisis eka xirhendzevutani xa pretium nisl aliquet
• Nulla volutpat xitsonga xitsonga xitsonga xitsonga
  • Xiphemu xa xirhendzevutani xa iaculis neque
  • Purus sodales ya switsongwatsongwana swa ultricies
  • Vestibulum laoreet xirho xa xirhendzevutani sem
  • Ac tristique libero xitsonga xitsonga xitsonga xitsonga
• Faucibus porta lacus xihlala xa xirhendzevutani xa xirhendzevutani
• Aenean tshama amet erat nunc
• Eget porttitor xitsonga xitsonga

Ku nga ri na xitayili<ul.unstyled>

• Lorem ipsum dolor tshama amet
• Consectetur leyi nga ni mafurha yo tala
• Nhlayo leyi heleleke ya molestie lorem eka massa
• Facilisis eka xirhendzevutani xa pretium nisl aliquet
• Nulla volutpat xitsonga xitsonga xitsonga xitsonga
  • Xiphemu xa xirhendzevutani xa iaculis neque
  • Purus sodales ya switsongwatsongwana swa ultricies
  • Vestibulum laoreet xirho xa xirhendzevutani sem
  • Ac tristique libero xitsonga xitsonga xitsonga xitsonga
• Faucibus porta lacus xihlala xa xirhendzevutani xa xirhendzevutani
• Aenean tshama amet erat nunc
• Eget porttitor xitsonga xitsonga

Ku odariwile<ol>

1. Lorem ipsum dolor tshama amet
2. Consectetur leyi nga ni mafurha yo tala
3. Nhlayo leyi heleleke ya molestie lorem eka massa
4. Facilisis eka xirhendzevutani xa pretium nisl aliquet
5. Nulla volutpat xitsonga xitsonga xitsonga xitsonga
6. Faucibus porta lacus xihlala xa xirhendzevutani xa xirhendzevutani
7. Aenean tshama amet erat nunc
8. Eget porttitor xitsonga xitsonga

Nhlamuselodl

Minxaxamelo ya tinhlamuselo

Nxaxamelo wa tinhlamuselo wu hetisekile ku hlamusela marito.

Euismod

Vestibulum id ligula porta felis euismod xitombo xa xitombo xa xitombo xa xitombo xa xitombo xa xitombo xa xitombo.

Donec id elit leyi nga riki na mi porta gravida eka eget metus.

Malesuada ya xitsonga

Etiam porta sem malesuada leyikulu leyi nga ni vuxiyaxiya.

Ku aka matafula

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

Matafula i makulu—eka swilo swo tala. Matafula lamakulu, hambiswiritano, ya lava rirhandzu nyana ra markup leswaku ya pfuna, ya ringaniseriwa, naswona ya hlayeka (eka xiyimo xa khodi). Hi leswi switsundzuxo swi nga ri swingani leswi u nga swi pfunaka.

Minkarhi hinkwayo phutsela tinhlokomhaka ta wena ta tikholomu hi ndlela ya <thead>leswaku xiyimo xa le henhla xi va <thead>> <tr>> <th>.

Ku fana na tinhlokomhaka ta tikholomu, hinkwaswo leswi nga endzeni ka miri wa tafula ra wena swi fanele ku phutseriwe hi a <tbody>so xiyimo xa wena xi va <tbody>> <tr>> <td>.

Xikombiso: Switayili swa tafula swa xiviri

Matafula hinkwawo ya ta endliwa hi ku tisungulela hi ku tisungulela hi mindzilakano ya nkoka ntsena ku tiyisisa ku hlayeka na ku hlayisa xivumbeko. A ku na xilaveko xo engetela titlilasi leti engetelekeke kumbe swihlawulekisi.

<tafula>
  ...
</tafula>

Xikombiso: Zebra-striped

Endla ku sasekanyana hi matafula ya wena hi ku engetela zebra-striping—engetela ntsena .zebra-stripedtlilasi.

Xiya: Zebra-striping i ku antswisiwa loku yaka emahlweni loku nga kumeki eka swihlamusela-marito swa khale swo fana na IE8 na le hansi.

< tlilasi ya tafula = "zebra-striped" > 
...
</tafula>

Xikombiso: Xirhendzevutana xa Zebra w/ TableSorter.js

Hi ku teka xikombiso lexi hundzeke, hi antswisa ku pfuna ka matafula ya hina hi ku nyika ntirho wo hlela hi ku tirhisa jQuery na Tablesorter plugin. Click nhlokomhaka ya kholomo yin’wana na yin’wana ku cinca ku hlela.

<script src = "js/jquery/jquery.xihlawulekisi xa tafula.min.js" ></script> 
<tsalwa > 
  $ ( ntirho () { . 
    $ ( "tafula#xikombiso xa Tafula ro hlela" ). xihlawulekisi xa tafula ({ nxaxamelo wa nxaxamelo : [[ 1 , 0 ]] });  
  });
</script>
< tlilasi ya tafula = "zebra-striped" > 
  ...
</tafula>

Switayili swa xiviri

Tifomo hinkwato ti nyikiwa switayele swa ntolovelo ku ti humesa hi ndlela leyi hlayekaka na ku ringaniseriwa. Switayili swi nyikiwile eka ku nghenisa matsalwa, minxaxamelo yo hlawula, tindhawu ta matsalwa, swikoweto swa xiya-ni-moya na mabokisi yo kambela, na swikomba-nkarhi.

Tifomo leti hlanganisiweke

Engetela .form-stackedeka HTML ya fomo ya wena kutani u ta va na malebvu ehenhla ka tinsimu ta vona ematshan’wini ya le tlhelo ra vona ra ximatsi. Leswi swi tirha kahle loko tifomo ta wena ti koma kumbe u ri na tikholomu timbirhi ta swingheniso swa tifomo to tika.

Swikomba-nkarhi

Tanihi ntwanano, swikomba-nkarhi swi tirhisiwa eka swiendlo kasi swihlanganisi swi tirhisiwa eka swilo. Xikombiso, "Download" yi nga va button naswona "recent activity" yi nga va link.

Tiboto hinkwato ti default eka xitayili xa grey yo vonikela, kambe nhlayo ya titlilasi ta ntirho ti nga tirhisiwa eka switayele swa mihlovo yo hambana. Titlilasi leti ti katsa tlilasi ya wasi .primary, tlilasi ya wasi wo vonikela .info, tlilasi ya rihlaza .successna tlilasi yo tshwuka .danger. Plus, ku rolling switayele swa wena swa olova peasy.

Xikombiso xa swikomba-nkarhi

Switayili swa button swinga tirhisiwa eka xin’wana na xin’wana na leswi .btntirhisiweke. Hi ntolovelo u ta lava ku tirhisa leswi eka ntsena <a>, <button>, na ku hlawula <input>swiaki. Hi leyi ndlela leyi swi langutekaka ha yona:

Ku cinca-cinca vukulu

Xana u fanisa swikomba-nkarhi leswikulu kumbe leswitsongo? Vana na swona!

Xiyimo xa vulema

Eka swikomba-nkarhi leswi nga tirhiki kumbe leswi nga tirhisiwiki hi app hikwalaho ka xivangelo xin’wana kumbe xin’wana, tirhisa xiyimo lexi nga tirhiki. Sweswo i .disabledswa swihlanganisi na :disabledswa <button>swiaki.

Swihlanganisi

Swikomba-nkarhi

Xana i yini

Topbar ya hina i bar leyi nga cinciki leyi nga ni logo kumbe vito ra webusayiti, ku famba-famba ko sungula ni fomo yo lavisisa.

Swi nga endliwa hi ku landza swilaveko swa wena

Swiaki hinkwaswo endzeni, na topbar hinkwayo na yona, i swa ku tihlawulela. U nga hlawula ku katsa logo/vito, nav, ku lavisisa ni nav ya vumbirhi—kumbe ku hlanganisiwa kwihi na kwihi ka sweswo.

Ti dropdowns ti katsiwile

Tanihi xiphemu xa ku famba-famba lokukulu, hi katsile vuswikoti bya wena byo engetela swilo leswi nga ehansi eka nav ya wena. Languta secondary nav laha henhla (right aligned) ku vona leswaku swi endliwa njhani.

Tithebhu na tiphilisi

Endla ku famba-famba ka vumbirhi ko olova hi <ul>. Cincana exikarhi ka tithebhu kumbe tiphilisi hi ku engetela tlilasi leyi faneleke.

Swikahle eka swiyengentsongo swa swilo swo fana na matluka ya hina ya swiletelo swa akhawunti na milayeni ya nkarhi ya vatirhisi yo cinca-cinca exikarhi ka matluka ya nhundzu yo fana. Yi kumeka hi switayele swa tabbed kumbe swa tiphilisi.

• Kaya
• Phurofayili
• Mahungu
• Switirhisiwa
• Hlanganisa

<ul tlilasi = "tithebhu" > 
  <li class = "ntirho" ><a href = "#" > Ekaya </a></li>  
  <li><a href = "#" > Xifaniso xa xirhendzevutani </a></li> 
  <li><a href = "#" > Mahungu </a></li> 
  <li><a href = "#" > Switirhisiwa </a></li> 
  <li><a href = "#" > Tihlanganisi na </a></li> 
</ul>

• Kaya
• Phurofayili
• Mahungu
• Switirhisiwa
• Hlanganisa

<ul class = "tiphilisi" > 
  <li class = "ntirho" ><a href = "#" > Ekaya </a></li>  
  <li><a href = "#" > Xifaniso xa xirhendzevutani </a></li> 
  <li><a href = "#" > Mahungu </a></li> 
  <li><a href = "#" > Switirhisiwa </a></li> 
  <li><a href = "#" > Tihlanganisi na </a></li> 
</ul>

Ku vekiwa ka matluka

Ultra simplistic na minimally styled pagination leyi hlohloteriweke hi Rdio. Xibokisana lexikulu xa tika ku xi hundza, xi olova ku xi ringanisiwa naswona xi nyika tindhawu letikulu to tsindziyela.

<div class = "xiphemu xa mapheji" > 
  <ul>
    <li class = "ku tsandzeka ku tirha khale" ><a href = "#" > ← Lexi hundzeke </a></li>  
    <li tlilasi = "ntirho" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 Xihlamusela -marito xa Xitsonga 
    <li><a href = "#" > 3 Xihlamusela -marito xa Xitsonga 
    <li><a href = "#" > 4 ​​Xihlamusela -marito xa Xitsonga 
    <li><a href = "#" > 5 </a></li> Xihlamusela-marito xa Xitsonga 
    <li class = "leyi landzelaka" ><a href = "#" > Lexi landzelaka → </a></li>  
  </ul>
</div>

Switsundzuxo swa xisekelo

div.alert-message

Mahungu ya layini yin’we yo kombisa ku tsandzeka, ku tsandzeka loku nga ha vaka kona kumbe ku humelela ka xiendlo. Ngopfu-ngopfu swi pfuna eka tifomo.

Ku sivela marungula

div.alert-message.block-message

Eka marungula lama lavaka nhlamuselo nyana, hi na switsundzuxo swa xitayili xa ndzimana. Leswi swi hetisekile ku bubbling up marungula yo leha ya swihoxo, ku tsundzuxa mutirhisi hi goza leri yimeleke, kumbe ku humesa ntsena rungula leswaku u ta kandziyisa ngopfu eka tluka.

Timodali

Timodali—ti-dialog kumbe ti-lightbox—i kahle swinene eka swiendlo swa xiyimo eka swiyimo laha swi nga swa nkoka leswaku xiyimo xa le ndzhaku xi hlayisiwa.

Switsundzuxo swa Switirhisiwa

Twipsies yi pfuna swinene eka ku pfuna mutirhisi loyi a pfilunganyekeke no va kombetela eka ndlela leyinene.

Popovers

Tirhisa ti-popover ku nyika vuxokoxoko bya le hansi eka tluka handle ko khumba layout.

Bootstrap yi akiwile hi Preboot , phakiti ra xihlovo lexi pfulekeke xa mixins na swilo leswi cinca-cincaka leswi nga ta tirhisiwa swin’we na Less , preprocessor ya CSS ya nhluvukiso wa webu hi ku hatlisa no olova.

Languta ndlela leyi hi tirhiseke Preboot ha yona eka Bootstrap na ndlela leyi u nga yi tirhisaka ha yona loko u fanele u hlawula ku fambisa Less eka phurojeke ya wena leyi landzelaka.

Ndlela yo yi tirhisa

Tirhisa nhlawulo lowu ku tirhisa hi ku helela swilo leswi cinca-cincaka swa Less swa Bootstrap, mixins, na nesting eka CSS hi ku tirhisa javascript eka browser ya wena.

<link rel = "xiphephana xa xitayili/le hansi" href = "leswi nga ehansi/bootstrap.less" media = "hinkwaswo" />    
<script src = "js/leswi nga ehansi-1.1.3.min.js" ></script> 

A wu titwi u ri na xitshunxo xa .js? Ringeta app ya Less Mac kutani u tirhisa Node.js ku hlengeleta loko u tirhisa khodi ya wena.

Leswi swi katsiweke

Hi leswi swin’wana swa swilo leswikulu swa leswi katsekaka eka Twitter Bootstrap tanihi xiphemu xa Bootstrap. Nhloko eka webusayiti ya Bootstrap kumbe tluka ra phurojeke ya Github ku dawuniloda na ku dyondza swo tala.

Swilo leswi cinca-cincaka

Swilo leswi cinca-cincaka eka Less swi hetisekile ku hlayisa na ku pfuxeta CSS ya wena handle ka ku pandza ka nhloko. Loko u lava ku cinca ntikelo wa muvala kumbe ntikelo lowu tirhisiwaka ngopfu, wu pfuxete endhawini yin’we ivi u vekiwile.

// Swihlanganisi
@Muhlovo wa xihlanganisi : #8b59c2;         
@linkColorHover :     ku va munyama ( @Muhlovo wa xihlanganisi , 10 ); 
 
// Swivungu
@ntima : #000;             
@grayDark : ku voninga (           @ntima , 25 %); 
@gray : ku voninga (               @ntima , 50 %); 
@grayLight : ku voninga (          @ntima , 70 %); 
@grayLighter : ku voninga (        @ntima , 90 %); 
@wo basa : #fff;             
 
// Mihlovo ya Accent
@xivunguvungu : #08b5fb;              
@rihlaza : #46a546;             
@yo tshwuka : #9d261d;               
@yo tshwuka : #ffc40d;            
@orange : #f89406, xihlangi xa xirhendzevutani;            
@xitshopana : #c3325f;              
@xivunguvungu : #7a43b6;            
 
// Gridi ya masungulo
@xivumbeko xa xisekelo : 13px ;          
@xisekelo : 18px ;          

Ku nyika mavonelo

Less yi tlhela yi nyika xitayili xin’wana xo nyika mavonelo ku engetela eka /* ... */xivumbeko xa ntolovelo xa CSS.

// Leyi i nhlamuselo
/* Leyi na yona i comment */

Mixins ku ya ehenhla ka wazoo

Mixins hi xisekelo i swi katsa kumbe swiphemu swa CSS, leswi ku pfumelelaka ku hlanganisa xibokisana xa khodi xi va xin’we. Swi kahle eka swihlawulekisi swa swirhangi swa vaxavisi swo fana na box-shadow, swirhendzevutani swa xihlamusela-marito, switachi swa tifonto, na swin’wana. Laha hansi ku na xikombiso xa ti mixins leti katsekaka na Bootstrap.

Switachi swa tifonto

#font ya { .
  . shorthand ( @ndzilo : ntolovelo , @vukulu : 14px , @lineHeight : 20px ) {     
    fonto - vukulu : @sayizi ; 
    font - ntiko : @ndzilo ; 
    layini - ku tlakuka : @lineHeight ; 
  } .
  . sans - serif ( @ndzilo : ntolovelo , @vukulu : 14px , @ku leha ka layini : 20px ) {     
    font - ndyangu : "Helvetica Neue" , ​​Xihlamusela - marito xa Xitsonga , Arial , xitsonga ;   
    fonto - vukulu : @sayizi ; 
    font - ntiko : @ndzilo ; 
    layini - ku tlakuka : @lineHeight ; 
  } .
  . serif ( @ndzilo : ntolovelo , @vukulu : 14px , @ku leha ka layini : 20px ) {     
    font - family : "Georgia" , Nkarhi lowuntshwa wa Rhoma , Minkarhi , sans - serif ;     
    fonto - vukulu : @sayizi ; 
    font - ntiko : @ndzilo ; 
    layini - ku tlakuka : @lineHeight ; 
  } .
  . monospace ( @ndzilo : ntolovelo , @vukulu : 12px , @ku leha ka layini : 20px ) {     
    font - ndyangu : "Monaco" , Murhumiwa Lowuntshwa , ndhawu yin'we ;   
    fonto - vukulu : @sayizi ; 
    font - ntiko : @ndzilo ; 
    layini - ku tlakuka : @lineHeight ; 
  } .
} .

Ti-gradient

#xirhendzevutani { .
  . horizontal ( @Muhlovo wo sungula : #555, @Muhlovo wo hetelela: #333) { 
muvala wa le     ndzhaku : @endColor ; 
    background - ku phindha : ku phindha - x ;
    background - image : - khtml - gradient ( linear , ximatsi ehenhla , xinene ehenhla , ku suka eka ( @startColor ), ku ya eka ( @endColor )); // Muendli wa swilo   
xifaniso - xifaniso xa     le ndzhaku : -moz - linear - gradient ( ximatsi , @Muvala wo sungula , @Muvala wo hetelela ); // FF 3.6+    
xifaniso - xifaniso xa     le ndzhaku : -ms - linear - gradient ( ximatsi , @Muhlovo wo sungula , @Muvala wo hetelela ); // IE10    
    background - image : - webkit - gradient ( linear , ximatsi ehenhla , xinene ehenhla , muvala - yima ( 0 %, @startColor ), muvala - yima ( 100 %, @endColor )); // Safari 4+, Xitirhisiwa xa chrome 2+    
xifaniso - xifaniso xa     le ndzhaku : -webkit - linear - gradient ( ximatsi , @Muvala wo sungula , @Muvala wo hetelela ); // Safari 5.1+, Chrome 10+    
xifaniso xa le     ndzhaku : - o - linear - gradient ( left , @startColor , @endColor ); // Opera ya 11.10    
xifaniso xa     le ndzhaku : linear - gradient ( eximatsi , @Muhlovo wo sungula , @Muvala wo hetelela ); // Le xiyimo xa le henhla   
  } .
  . vertical ( @Muhlovo wo sungula : #555, @Muhlovo wo hetelela: #333) { 
muvala wa le     ndzhaku : @endColor ; 
    background - ku phindha : ku phindha - x ;
    background - image : - khtml - gradient ( linear , ximatsi ehenhla , ximatsi ehansi , ku suka eka ( @startColor ), ku ya eka ( @endColor )); // Muendli wa swilo   
xifaniso xa     le ndzhaku : - moz - linear - gradient ( @Muhlovo wo sungula , @Muhlovo wo hetelela ); // FF 3.6+   
xifaniso xa     le ndzhaku : - ms - linear - gradient ( @Muhlovo wo sungula , @Muhlovo wo hetelela ); // IE10   
    background - image : - webkit - gradient ( linear , ximatsi ehenhla , ximatsi ehansi , muvala - ku yima ( 0 %, @startColor ), muvala - ku yima ( 100 %, @endColor )); // Safari 4+, Xitirhisiwa xa chrome 2+    
xifaniso xa     le ndzhaku : - webkit - linear - gradient ( @Muhlovo wo sungula , @Muvala wo hetelela ); // Safari 5.1+, Chrome 10+   
xifaniso xa     le ndzhaku : - o - linear - gradient ( @Muhlovo wo sungula , @Muvala wo hetelela ); // Opera ya 11.10   
xifaniso xa le     ndzhaku : linear - gradient ( @Muhlovo wo sungula , @Muvala wo hetelela ); // Xiyimo xa xiyimo xa le henhla  
  } .
  . directional ( @Muhlovo wo sungula : #555, @Muhlovo wo hetelela: #333, @deg: 45deg) { 
    ...
  } .
  . yi yimile - yinharhu - mihlovo ( @Muhlovo wo sungula : #00b3ee, @Muhlovo wa le xikarhi: #7a43b6, @Muvala wo yima: 50%, @Muhlovo wo hetelela: #c3325f) { 
    ...
  } .
} .

Matirhelo na sisiteme ya giridi

Kuma fancy u endla math yo karhi ku humesa ti mixins leti cinca-cincaka na matimba ku fana na leyi nga laha hansi.

// Griditude ya xiyimo xa le henhla
@gridTikholomu : 16 ;       
@gridKu anama ka Kholomo : 40px ;   
@gridGutterKu anama : 20px ;   
@siteWidth : ( @Tikholomu ta gridi * @Ku anama ka Kholomo ya gridi ) + ( @Ku anama ka Gutter ya gridi * ( @Tikholomu ta gridi - 1 ));                 
 
// Sisiteme ya Gridi
. xigwitsirisi { .
  ku anama : @Ku anama ka sayiti ; 
  margin : 0 hi ku tisungulela ;  
  . ku lulamisa erivaleni ();
} .
. tikholomu ( @columnSpan : 1 ) { .  
  width : ( @GridKu anama ka Kholomo * @Xiphemu xa kholomo ) + ( @GridGutterWidth * ( @Xiphemu xa kholomo - 1 ));         
} .
. offset ( @kholomoOffset : 1 ) { .  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @kholomo yaOffset - 1 )) + @Xivandla xo engetela ;           
} .