Storja

Fil-jiem ta 'qabel ta' Twitter, l-inġiniera użaw kważi kull librerija li kienu familjari magħha biex jissodisfaw ir-rekwiżiti front-end. Bootstrap beda bħala tweġiba għall-isfidi li ppreżenta u l-iżvilupp malajr aċċellera matul l-ewwel Hackweek ta 'Twitter.

Bl-għajnuna u r-rispons ta 'ħafna inġiniera fuq Twitter, Bootstrap kiber b'mod sinifikanti biex jinkludi mhux biss stili bażiċi, iżda mudelli ta' disinn front-end aktar eleganti u durabbli.

Aqra aktar fuq dev.twitter.com ›

Appoġġ għall-browser

Bootstrap huwa ttestjat u appoġġjat fil-browsers moderni ewlenin bħal Chrome, Safari, Internet Explorer, u Firefox.

• L-aħħar Safari
• L-aħħar Google Chrome
• Firefox 4+
• Internet Explorer 7+
• Opera 11

X'inhu inkluż

Bootstrap jiġi komplut b'mudelli CSS ikkumpilati, mhux ikkompilati u eżempju.

• Il-fajls .less oriġinali kollha
• CSS kompletament miġbura u mminifikat
• Tlesti d-dokumentazzjoni tal-gwida tal-istil
• Mudell ta’ paġna ta’ eżempju (aktar dalwaqt)

Grid default

Is-sistema ta' grilja awtomatika pprovduta bħala parti minn Bootstrap hija grilja ta' 16-il kolonna wiesgħa 940px. Huwa togħma tas-sistema popolari tal-grilja 960, iżda mingħajr il-marġni/ikkuttunar addizzjonali fuq in-naħat tax-xellug u tal-lemin.

Eżempju tal-markup tal-grilja

Kif muri hawn, jista 'jinħoloq tqassim bażiku b'żewġ "kolonni," kull wieħed ikopri numru ta' 16-il kolonna fundamentali li ddefinijna bħala parti mis-sistema tal-grilja tagħna. Ara l-eżempji hawn taħt għal aktar varjazzjonijiet.

<div class = "ringiela" > 
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 kolonni" > 
    ...
  </div>
</div>

Tqassim fiss

It-tqassim default u sempliċi ta' 940px wiesgħa, iċċentrat għal kważi kull websajt jew paġna pprovduta minn <div.container>.

<korp>
  <div class = "kontenitur" > 
    ...
  </div>
</body>

It-tqassim tal-fluwidu

Struttura alternattiva u flessibbli tal-paġna tal-fluwidu b'wisa 'min u max u bar tal-ġenb tax-xellug. Kbir għall-apps u docs.

<korp>
  <div class = "kontenitur-fluwidu" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "kontenut" > 
      ...
    </div>
  </div>
</body>

Intestaturi u kopja

Ġerarkija tipografika standard għall-istrutturar tal-paġni web tiegħek.

Il-grilja tipografika kollha hija bbażata fuq żewġ varjabbli Inqas fil-fajl preboot.less tagħna: @basefontu @baseline. L-ewwel hija d-daqs tat-tipa bażi użata u t-tieni hija l-għoli tal-linja bażi.

Aħna nużaw dawk il-varjabbli, u xi matematika, biex noħolqu l-marġini, paddings, u line-heights tat-tip kollu tagħna u aktar.

h1. Intestatura 1

h2. Intestatura 2

h3. Intestatura 3

h4. Intestatura 4

h5. Intestatura 5

h6. Intestatura 6

Eżempju ta' paragrafu

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.

Eżempju ta' intestatura Għandu sotto-intestatura...

Misc. elementi

Uża enfasi, indirizzi, u abbrevjazzjonijiet

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

Meta tuża

Tikketti ta' enfasi ( <strong>u <em>) għandhom jintużaw biex jindikaw importanza jew enfasi addizzjonali ta' kelma jew frażi relattiva għall-kopja ta' madwarha. Uża <strong>għall-importanza u <em>għall -enfasi tal -istress .

Enfasi f'paragrafu

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

Nota: Għadu tajjeb li tuża <b>u <i>tags f'HTML5 u m'għandhomx għalfejn ikunu stiljati b'tipa grassa u korsiva, rispettivament (għalkemm jekk ikun hemm element aktar semantiku, użah). <b>huwa maħsub biex jenfasizza kliem jew frażijiet mingħajr ma jwassal importanza addizzjonali, filwaqt li <i>huwa l-aktar għal vuċi, termini tekniċi, eċċ.

Indirizzi

L- <address>element jintuża għall-informazzjoni ta 'kuntatt għall-eqreb antenat tiegħu, jew il-korp kollu tax-xogħol. Ara kif tidher:

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

Nota: Kull linja <address>f'must tispiċċa b'line-break ( <br />) jew tkun imgeżwer f'tikketta tal-livell ta' blokka (eż. <p>) biex tistruttura sew il-kontenut.

Abbrevjazzjonijiet

Għall-abbrevjazzjonijiet u l-akronimi, uża t- <abbr>tikketta ( <acronym>hija deprecata f'HTML5 ). Poġġi l-formola shorthand fit-tikketta u waqqaf titolu għall-isem sħiħ.

Blockquotes

<blockquote> <p> <small>

Kif tikkwota

Biex tinkludi blockquote, wrap <blockquote>around <p>u <small>tags. Uża l- <small>element biex tikkwota s-sors tiegħek u ikollok sing em —qabel.

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

Dr Julius Hibbert

Mhux ordnat<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • 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 at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Ordnat<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at 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

Deskrizzjonidl

Listi ta' deskrizzjoni

Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.

Euismod

Vestibulum id ligula porta felis euismod sempre 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.

Imwejjed tal-bini

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

It-tabelli huma tajbin—għal ħafna affarijiet. Tabelli kbar, madankollu, jeħtieġu ftit imħabba ta 'markup biex ikunu utli, skalabbli, u jinqraw (fil-livell tal-kodiċi). Hawn huma ftit suġġerimenti biex jgħinu.

Dejjem wrap l-intestaturi tal-kolonni tiegħek b'tali mod li l - <thead>ġerarkija tkun <thead>>> <tr>.<th>

Simili għall-intestaturi tal-kolonni, il-kontenut kollu tal-korp tal-mejda tiegħek għandu jkun imgeżwer <tbody>f'tali mod li l-ġerarkija tiegħek tkun <tbody>> <tr>> <td>.

Eżempju: Stili ta' tabella default

It-tabelli kollha se jiġu stiljati awtomatikament bil-borduri essenzjali biss biex tiġi żgurata l-leġibbiltà u tinżamm l-istruttura. M'hemmx bżonn li żżid klassijiet jew attributi żejda.

#	Isem	Kunjom	Lingwa
1	Xi wħud	Waħda	Ingliż
2	Joe	Sixpack	Ingliż
3	Stu	Dent	Kodiċi

<tabella>
  ...
</mejda>

Eżempju: Żebra-striped

Ikseb ftit fancy mat-tabelli tiegħek billi żżid zebra-striping—sempliċement żid il- .zebra-stripedklassi.

#	Isem	Kunjom	Lingwa
1	Xi wħud	Waħda	Ingliż
2	Joe	Sixpack	Ingliż
3	Stu	Dent	Kodiċi

Nota: Zebra-striping huwa titjib progressiv mhux disponibbli għal browsers anzjani bħal IE8 u taħt.

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

Eżempju: Żebra-striped w/ TableSorter.js

Filwaqt li nieħdu l-eżempju ta 'qabel, intejbu l-utilità tat-tabelli tagħna billi nipprovdu funzjonalità ta' għażla permezz ta ' jQuery u l- plugin Tablesorter . Ikklikkja l-header ta 'kwalunkwe kolonna biex tibdel it-tip.

#	Isem	Kunjom	Lingwa
1	Tiegħek	Waħda	Ingliż
2	Joe	Sixpack	Ingliż
3	Stu	Dent	Kodiċi

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

Stili default

Il-formoli kollha jingħataw stili awtomatiċi biex jippreżentawhom b'mod li jinqara u skalabbli. L-istili huma pprovduti għal inputs ta' test, listi ta' għażla, żoni tat-test, buttuni tar-radju u kaxxi ta' kontroll, u buttuni.

Leġġenda tal-formola ta' eżempju

Input X-Kbir

Agħżel

1 2 3 4 5

Agħżel

1 2 3 4 5

Input mhux editjat

Xi Valur Hawnhekk

Input b'diżabilità

Input X-Kbir

Ftit żgħir ta' test ta' għajnuna

Leġġenda tal-formola ta' eżempju

Test imqabbad

@

Kaxxa ta' kontroll ippreċeduta

Mehmuża Checkbox

Input tal-Fajl

Leġġenda tal-formola ta' eżempju

Lista ta' Għażliet

• L-ewwel għażla hija din u dik—kun żgur li tinkludi għaliex hija kbira
• It-tieni għażla tista' wkoll tiġi kkontrollata u inkluża fir-riżultati tal-formola
• It-tielet għażla tista'—iva, qtajtha—ukoll tiġi kkontrollata u inkluża fir-riżultati tal-formola
• L-erba' għażla ma tistax tiġi ċċekkjata peress li hija diżattivata.

Nota: It-tikketti jdawru l-għażliet kollha għal żoni ta 'klikk ħafna akbar u forma aktar użabbli.

Medda tad-Data

biex Il-ħinijiet kollha huma murija bħala Ħin Standard tal-Paċifiku (GMT -08:00).

Textarea

Blokk ta' test ta' għajnuna biex tiddeskrivi l-qasam ta' hawn fuq jekk ikun hemm bżonn.

Lista ta' Għażliet

• L-ewwel għażla hija din u dik—kun żgur li tinkludi għaliex hija kbira
• L-għażla tnejn tista 'hija xi ħaġa oħra u l-għażla tagħha se tneħħi l-għażla 1

  Ikkanċella

Formoli f'munzelli

Żid .form-stackedmal-HTML tal-formola tiegħek u jkollok tikketti fuq l-oqsma tagħhom minflok fuq ix-xellug tagħhom. Dan jaħdem tajjeb jekk il-formoli tiegħek huma qosra jew għandek żewġ kolonni ta 'inputs għal forom itqal.

Leġġenda tal-formola ta' eżempju

Input X-Kbir

Agħżel

1 2 3 4 5

Leġġenda tal-formola ta' eżempju

Input X-Kbir

Ftit żgħir ta' test ta' għajnuna

Lista ta' Għażliet

• L-ewwel għażla hija din u dik—kun żgur li tinkludi għaliex hija kbira
• It-tieni għażla tista' wkoll tiġi kkontrollata u inkluża fir-riżultati tal-formola

Nota: It-tikketti jdawru l-għażliet kollha għal żoni ta 'klikk ħafna akbar u forma aktar użabbli.

Ħlief Bidliet  Ikkanċella

Buttuni

Bħala konvenzjoni, il-buttuni jintużaw għall-azzjonijiet filwaqt li l-links jintużaw għall-oġġetti. Pereżempju, "Niżżel" tista' tkun buttuna u "attività riċenti" tista' tkun link.

Il-buttuni kollha default għal stil griż ċar, iżda numru ta 'klassijiet funzjonali jistgħu jiġu applikati għal stili ta' kulur differenti. Dawn il-klassijiet jinkludu klassi blu .primary, klassi blu ċar .info, klassi ħadra .success, u klassi ħamra .danger. Barra minn hekk, ir-rolling tal-istili tiegħek huwa faċli.

Buttuni ta' eżempju

L-istili tal-buttuni jistgħu jiġu applikati għal kull ħaġa bl- .btnapplikata. Tipikament tkun trid tapplika dawn għal elementi biss <a>, <button>, u agħżel <input>. Ara kif tidher:

Daqsijiet alternattivi

Fancy buttuni akbar jew iżgħar? Ikollhom!

Stat b'diżabilità

Għal buttuni li mhumiex attivi jew li huma diżattivati ​​mill-app għal xi raġuni jew oħra, uża l-istat diżabbli. Dak .disabledgħall-links u :disabledgħall - <button>elementi.

Links

Buttuni

X'inhu

Topbar tagħna huwa bar fiss li fih il-logo jew l-isem ta' websajt, in-navigazzjoni primarja, u l-formola tat-tfittxija.

Customizable

L-elementi kollha ġewwa, u l-topbar kollu wkoll, huma fakultattivi. Tista' tagħżel li tinkludi logo/isem, nav, tfittxija, u nav sekondarju—jew kwalunkwe kombinazzjoni ta' dan.

Dropdowns inklużi

Bħala parti min-navigazzjoni ewlenija, inkludejna l-abbiltà għalik li żżid dropdowns man-nav tiegħek. Iċċekkja n-nav sekondarju hawn fuq (allinjat mal-lemin) biex tara kif isir.

Tabs u pilloli

Oħloq navigazzjoni sekondarja sempliċi b' <ul>. Ibdel bejn tabs jew pilloli billi żżid il-klassi xierqa.

Kbira għal sub-taqsimiet ta' kontenut bħall-paġni tas-settings tal-kont tagħna u l-iskedi ta' żmien tal-utent biex taqleb bejn paġni ta' kontenut simili. Disponibbli fi stili tabbed jew pillola.

• Dar
• Profil
• Messaġġi
• Settings
• Kuntatt
• Dropdown
  • Rabta sekondarja
  • Xi ħaġa oħra hawn
  • Rabta oħra

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Dar </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Messaġġi </a></li> 
  <li><a href = "#" > Settings </a></li> 
  <li><a href = "#" > Kuntatt </a></li> 
</ul>

• Dar
• Profil
• Messaġġi
• Settings
• Kuntatt

<ul class = "pilloli" > 
  <li class = "active" ><a href = "#" > Dar </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Messaġġi </a></li> 
  <li><a href = "#" > Settings </a></li> 
  <li><a href = "#" > Kuntatt </a></li> 
</ul>

Paġnar

Paġnar ultra simplistiku u b'mod minimu ispirat minn Rdio. Il-blokka l-kbira hija diffiċli biex titlifha, tista 'tiġi skalata faċilment, u tipprovdi żoni ta' klikkjar kbar.

<div class = "paġinazzjoni" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Preċedenti </a></li>  
    <li class = "attiv" ><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 = "li jmiss" ><a href = "#" > Li jmiss → </a></li>  
  </ul>
</div>

Twissijiet bażiċi

div.alert-message

Messaġġi f'linja waħda biex jenfasizzaw il-falliment, il-falliment possibbli, jew is-suċċess ta 'azzjoni. Partikolarment utli għall-formoli.

Imblokka messaġġi

div.alert-message.block-message

Għal messaġġi li jeħtieġu ftit spjegazzjoni, għandna twissijiet ta 'stil ta' paragrafu. Dawn huma perfetti biex ibaxxu messaġġi ta 'żball itwal, iwissu lil utent dwar azzjoni pendenti, jew sempliċement jippreżentaw informazzjoni għal aktar enfasi fuq il-paġna.

Modali

Modali—djalogi jew lightboxes—huma tajbin għal azzjonijiet kuntestwali f'sitwazzjonijiet fejn huwa importanti li jinżamm il-kuntest ta' l-isfond.

Għodda Suġġerimenti

Twipsies huma super utli biex jgħinu utent konfuż u jippontahom fid-direzzjoni t-tajba.

Popovers

Uża popovers biex tipprovdi informazzjoni sottotestwali lil paġna mingħajr ma taffettwa t-tqassim.

Bootstrap inbniet bi Preboot , pakkett open-source ta 'mixins u varjabbli li għandhom jintużaw flimkien ma' Less , preproċessur CSS għal żvilupp tal-web aktar mgħaġġel u eħfef.

Iċċekkja kif użajna Preboot f'Bootstrap u kif tista' tagħmel użu minnu jekk tagħżel li tmexxi Less fuq il-proġett li jmiss tiegħek.

Kif tużah

Uża din l-għażla biex tagħmel użu sħiħ mill-varjabbli, mixins, u nesting ta' Bootstrap Less f'CSS permezz ta' javascript fil-browser tiegħek.

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

Mhux qed tħoss is-soluzzjoni .js? Ipprova l-app Less Mac jew uża Node.js biex tikkompila meta tuża l-kodiċi tiegħek.

X'inhu inkluż

Hawn huma xi wħud mill-punti ewlenin ta 'dak li hu inkluż f'Twitter Bootstrap bħala parti minn Bootstrap. Mur fuq il-websajt Bootstrap jew il-paġna tal-proġett Github biex tniżżel u titgħallem aktar.

Varjabbli

Varjabbli f'Inqas huma perfetti biex iżommu u jaġġornaw l-uġigħ ta 'ras CSS tiegħek ħieles. Meta trid tibdel valur tal-kulur jew valur użat ta 'spiss, aġġornah f'post wieħed u tkun issettjat.

// Links
@linkColor : #8b59c2;         
@linkColorHover :     jiskura ( @linkColor , 10 ); 
 
// Griżi
@iswed : #000;             
@grayDark : ħfief (           @black , 25 %); 
@griż : ħfief (               @iswed , 50 %); 
@grayLight : ħfief (          @iswed , 70 %); 
@grayLighter : ħfief (        @iswed , 90 %); 
@abjad : #fff;             
 
// Kuluri Aċċent
@blu : #08b5fb;              
@aħdar : #46a546 ;             
@aħmar : #9d261d ;               
@isfar : #ffc40d;            
@oranġjo : #f89406 ;            
@roża : #c3325f ;              
@vjola : #7a43b6;            
 
// Grid tal-linja bażi
@basefont : 13px ;          
@linja bażi : 18px ;          

Kumment

Less jipprovdi wkoll stil ieħor ta' kumment flimkien mas- /* ... */sintassi normali tas-CSS.

// Dan huwa kumment
/* Dan huwa wkoll kumment */

Ħallat il-wazoo

Mixins huma bażikament jinkludi jew parzjali għal CSS, li jippermettulek tgħaqqad blokka ta 'kodiċi f'waħda. Huma tajbin għal proprjetajiet prefissati tal-bejjiegħ bħal box-shadow, gradjenti cross-browser, munzelli ta 'font, u aktar. Hawn taħt hemm kampjun tal-mixins li huma inklużi ma 'Bootstrap.

Munzelli tat-tipa

#font {
  . shorthand ( @weight : normali , @size : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . sans - serif ( @piż : normali , @daqs : 14px , @LinjaHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . serif ( @piż : normali , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . monospazju ( @piż : normali , @daqs : 12px , @LinjaHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
}

Gradjenti

#gradjent {
  . orizzontali ( @startColor : #555, @endColor: #333) { 
    background - color : @endColor ; 
    sfond - irrepeti : irrepeti - x ;
    sfond - immaġni : - khtml - gradjent ( lineari , xellug ta 'fuq , lemin ta ' fuq , minn ( @startColor ), sa ( @endColor )); // Konqueror   
    sfond - immaġni : - moz - lineari - gradjent ( xellug , @startColor , @endColor ); // FF 3.6+    
    background - image : - ms - linear - gradient ( xellug , @startColor , @endColor ); // IE10    
immaġni fl-     isfond : - webkit - gradjent ( lineari , xellug ta 'fuq , lemin ta' fuq , kulur - stop ( 0 %, @startColor ), kulur - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    sfond - immaġni : - webkit - lineari - gradjent ( xellug , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - image : - o - linear - gradient ( xellug , @startColor , @endColor ); // Opera 11.10    
    sfond - immaġni : lineari - gradjent ( xellug , @startColor , @endColor ); // Le standard   
  }
  . vertikali ( @startColor : #555, @endColor: #333) { 
    background - color : @endColor ; 
    sfond - irrepeti : irrepeti - x ;
    sfond - immaġni : - khtml - gradjent ( lineari , xellug ta ' fuq , xellug ta ' isfel , minn ( @startColor ), sa ( @endColor )); // Konqueror   
    sfond - immaġni : - moz - lineari - gradjent ( @startColor , @endColor ); // FF 3.6+   
    sfond - immaġni : - ms - linear - gradjent ( @startColor , @endColor ); // IE10   
immaġni fl-     isfond : - webkit - gradjent ( lineari , xellug ta 'fuq , xellug ta' isfel , kulur - stop ( 0 %, @startColor ), kulur - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    sfond - immaġni : - webkit - lineari - gradjent ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    sfond - immaġni : - o - lineari - gradjent ( @startColor , @endColor ); // Opera 11.10   
    sfond - immaġni : lineari - gradjent ( @startColor , @endColor ); // L-istandard  
  }
  . direzzjonali ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertikali - tliet kuluri ( @startColor : # 00b3ee , @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Operazzjonijiet u sistema tal-grilja

Ikseb fancy u wettaq xi matematika biex tiġġenera mixins flessibbli u qawwija bħal dik ta 'hawn taħt.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Sistema tal-Grid
. kontenitur {
  wisa : @sitWidth ; 
  marġini : 0 auto ;  
  . clearfix ();
}
. kolonni ( @columnSpan : 1 ) {  
  wisa : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. offset ( @columnOffset : 1 ) {  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}