Istorija

Ankstesnėmis „Twitter“ dienomis inžinieriai naudojo beveik bet kurią jiems žinomą biblioteką, kad atitiktų sąsajos reikalavimus. „Bootstrap“ prasidėjo kaip atsakas į iškilusius iššūkius, o plėtra greitai paspartėjo per pirmąjį „Twitter“ „Hackweek“.

Daugelio „Twitter“ inžinierių pagalba ir atsiliepimais „Bootstrap“ gerokai išaugo, kad apimtų ne tik pagrindinius stilius, bet ir elegantiškesnius bei patvaresnius priekinės dalies dizaino modelius.

Skaitykite daugiau dev.twitter.com ›

Naršyklės palaikymas

„Bootstrap“ yra išbandytas ir palaikomas pagrindinėse šiuolaikinėse naršyklėse, pvz., „Chrome“, „Safari“, „Internet Explorer“ ir „Firefox“.

• Naujausias Safari
• Naujausia Google Chrome
• Firefox 4+
• Internet Explorer 7 ar naujesnė versija
• Opera 11

Kas įtraukta

„Bootstrap“ pateikiamas su sudarytais CSS, nesukompiliuotais ir pavyzdiniais šablonais.

• Visi originalūs .less failai
• Visiškai sukompiliuotas ir sumažintas CSS
• Pilna stiliaus vadovo dokumentacija
• Puslapio šablono pavyzdys (daugiau bus netrukus)

Numatytasis tinklelis

Numatytoji tinklelio sistema, pateikiama kaip Bootstrap dalis, yra 940 pikselių pločio 16 stulpelių tinklelis. Tai populiarios 960 tinklelio sistemos skonis, bet be papildomos paraštės / užpildymo kairėje ir dešinėje pusėse.

Tinklelio žymėjimo pavyzdys

Kaip parodyta čia, pagrindinį išdėstymą galima sukurti su dviem „stulpeliais“, kurių kiekvienas apima 16 pagrindinių stulpelių, kuriuos apibrėžėme kaip tinklelio sistemos dalį. Daugiau variantų rasite toliau pateiktuose pavyzdžiuose.

<div class = "row" > 
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "10 stulpelių" > 
    ...
  </div>
</div>

Fiksuotas išdėstymas

Numatytasis ir paprastas 940 pikselių pločio, centre išdėstytas išdėstymas beveik bet kuriai svetainei ar puslapiui, kurį teikia vienas <div.container>.

<kūnas>
  <div class = "konteineris" > 
    ...
  </div>
</body>

Skysčių išdėstymas

Alternatyvi, lanksti sklandi puslapio struktūra su minimaliu ir maksimaliu pločiu bei kairiąja šonine juosta. Puikiai tinka programoms ir dokumentams.

<kūnas>
  <div class = "container-fluid" > 
    <div class = "šoninė juosta" > 
      ...
    </div>
    <div class = "turinys" > 
      ...
    </div>
  </div>
</body>

Antraštės ir kopija

Standartinė tipografinė hierarchija tinklalapiams struktūrizuoti.

Visas tipografinis tinklelis yra pagrįstas dviem Less kintamaisiais mūsų preboot.less faile: @basefontir @baseline. Pirmasis yra pagrindinis šrifto dydis, naudojamas visame pasaulyje, o antrasis yra pagrindinės linijos aukštis.

Naudojame tuos kintamuosius ir šiek tiek matematikos, kad sukurtume visų tipų paraštes, užpildus ir linijų aukštį ir dar daugiau.

h1. 1 antraštė

h2. 2 antraštė

h3. 3 antraštė

h4. 4 antraštė

h5. 5 antraštė

h6. 6 antraštė

Pastraipos pavyzdys

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.

Antraštės pavyzdys Turi paantraštę…

Įvairūs elementai

Pabrėžimų, adresų ir santrumpos naudojimas

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

Kada naudoti

Kirčiavimo žymos ( <strong>ir <em>) turėtų būti naudojamos norint nurodyti papildomą žodžio ar frazės svarbą ar kirčiavimą, palyginti su jį supančia kopija. Naudokite <strong>svarbos ir <em>streso pabrėžimui .

Kirčiavimas pastraipoje

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

Pastaba: HTML5 vis tiek galima naudoti <b>ir <i>žymas, jos nebūtinai turi būti atitinkamai paryškintos ir kursyvu (nors jei yra semantiškesnis elementas, naudokite jį). <b>skirtas paryškinti žodžius ar frazes, nesuteikiant papildomos svarbos, o <i>dažniausiai skirtas balsui, techniniams terminams ir pan.

Adresai

Elementas <address>naudojamas artimiausio protėvio kontaktinei informacijai arba visam darbui. Štai kaip tai atrodo:

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

Pastaba: kiekviena eilutė <address>turi baigtis eilutės lūžiu ( <br />) arba įterpta į bloko lygio žymą (pvz., <p>), kad būtų tinkamai struktūrizuotas turinys.

Santrumpos

Sutrumpinimams ir akronimams naudokite <abbr>žymą ( HTML5<acronym> nebenaudojama ). Įdėkite trumpąją formą į žymą ir nustatykite viso pavadinimo pavadinimą.

Blokinės citatos

<blockquote> <p> <small>

Kaip cituoti

Norėdami įtraukti bloko citatą, apvyniokite ir <blockquote>pažymėkite . Naudodami elementą nurodykite šaltinį ir prieš jį gausite brūkšnelį .<p><small><small>&mdash;

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

Daktaras Julius Hibbertas

Neužsakyta<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ir masa
• 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

Nestiliuotas<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem ir masa
• 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

Užsakyta<ol>

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

apibūdinimasdl

Aprašų sąrašai

Aprašų sąrašas puikiai tinka terminams apibrėžti.

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.

Statybiniai stalai

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

Stalai puikiai tinka daugeliui dalykų. Tačiau puikioms lentelėms reikia šiek tiek žymėjimo, kad jos būtų naudingos, keičiamos ir skaitomos (kodo lygiu). Štai keletas patarimų, kurie padės.

Visada apvyniokite stulpelių antraštes <thead>taip, kad hierarchija būtų <thead>> <tr>> <th>.

Panašiai kaip ir stulpelių antraštės, visas lentelės turinys turėtų būti suvyniotas į a <tbody>, kad jūsų hierarchija būtų <tbody>> <tr>> <td>.

Pavyzdys: numatytieji lentelės stiliai

Visos lentelės bus automatiškai suformuotos tik su esminėmis kraštinėmis, kad būtų užtikrintas skaitomumas ir išlaikyta struktūra. Nereikia pridėti papildomų klasių ar atributų.

#	Pirmas vardas	Pavardė	Kalba
1	Kai kurie	Vienas	Anglų
2	Džo	Presas	Anglų
3	Stu	Įdubimas	Kodas

<lentelė>
  ...
</table>

Pavyzdys: Zebra dryžuotas

Pamėginkite savo stalus pridėję zebrų juosteles – tiesiog pridėkite .zebra-stripedklasę.

#	Pirmas vardas	Pavardė	Kalba
1	Kai kurie	Vienas	Anglų
2	Džo	Presas	Anglų
3	Stu	Įdubimas	Kodas

Pastaba: „Zebra-Striping“ yra laipsniškas patobulinimas, neprieinamas senesnėms naršyklėms, pvz., IE8 ir senesnėms naršyklėms.

<lentelės klasė = "zebras dryžuotas" > 
...
</table>

Pavyzdys: zebra dryžuotas su TableSorter.js

Atsižvelgiant į ankstesnį pavyzdį, pageriname savo lentelių naudingumą, suteikdami rūšiavimo funkciją per „ jQuery “ ir „ Tablesorter “ papildinį. Spustelėkite bet kurio stulpelio antraštę, kad pakeistumėte rūšiavimą.

#	Pirmas vardas	Pavardė	Kalba
1	Tavo	Vienas	Anglų
2	Džo	Presas	Anglų
3	Stu	Įdubimas	Kodas

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( funkcija () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<lentelės klasė = "zebras dryžuotas" > 
  ...
</table>

Numatytieji stiliai

Visoms formoms suteikiami numatytieji stiliai, kad jos būtų skaitomos ir keičiamos. Pateikiami teksto įvesties, pasirinkimo sąrašų, teksto sričių, radijo mygtukų ir žymimųjų laukelių bei mygtukų stiliai.

Formos legendos pavyzdys

X didelė įvestis

Pasirinkite

1 2 3 4 5

Pasirinkite

1 2 3 4 5

Neredaguojama įvestis

Kai kurios vertės čia

Išjungta įvestis

X didelė įvestis

Mažas pagalbos teksto fragmentas

Formos legendos pavyzdys

Pridėtas tekstas

@

Pridėtas žymimasis laukelis

Pridėtas žymimasis laukelis

Failo įvestis

Formos legendos pavyzdys

Parinkčių sąrašas

• Pirmas variantas yra tas ir tas – būtinai nurodykite, kodėl tai puikus
• Antrą variantą taip pat galima pažymėti ir įtraukti į formos rezultatus
• Trečiasis variantas – taip, jūs atspėjote – taip pat gali būti patikrintas ir įtrauktas į formos rezultatus
• Ketvirtasis variantas negali būti patikrintas, nes jis išjungtas.

Pastaba: Etiketės supa visas parinktis, skirtas daug didesniems paspaudimų plotams ir tinkamesnę naudoti formą.

Data asortimentas

į Visi laikai rodomi Ramiojo vandenyno standartiniu laiku (GMT -08:00).

Teksto sritis

Pagalbos teksto blokas, apibūdinantis aukščiau esantį lauką, jei reikia.

Parinkčių sąrašas

• Pirmas variantas yra tas ir tas – būtinai nurodykite, kodėl tai puikus
• Antrą variantą taip pat galima pažymėti ir įtraukti į formos rezultatus

Išsaugoti pakeitimus  Atšaukti

Sukrautos formos

Pridėkite .form-stackedprie formos HTML ir etiketes turėsite jų laukų viršuje, o ne kairėje. Tai puikiai tinka, jei formos yra trumpos arba turite du sunkesnių formų įvesties stulpelius.

Formos legendos pavyzdys

X didelė įvestis

Pasirinkite

1 2 3 4 5

Formos legendos pavyzdys

X didelė įvestis

Mažas pagalbos teksto fragmentas

Parinkčių sąrašas

• Pirmas variantas yra tas ir tas – būtinai nurodykite, kodėl tai puikus
• Antrą variantą taip pat galima pažymėti ir įtraukti į formos rezultatus

Pastaba: Etiketės supa visas parinktis, skirtas daug didesniems paspaudimų plotams ir tinkamesnę naudoti formą.

Išsaugoti pakeitimus  Atšaukti

Mygtukai

Paprastai mygtukai naudojami veiksmams, o nuorodos – objektams. Pavyzdžiui, „Atsisiųsti“ gali būti mygtukas, o „naujausia veikla“ gali būti nuoroda.

Pagal numatytuosius nustatymus visi mygtukai yra šviesiai pilkos spalvos, tačiau skirtingiems spalvų stiliams galima pritaikyti keletą funkcinių klasių. Šios klasės apima mėlyną .primary, šviesiai mėlyną .info, žalią .successir raudoną .dangerklasę. Be to, kurti savo stilių yra lengva.

Mygtukų pavyzdžiai

Mygtukų stiliai gali būti taikomi bet kam su .btntaikoma. Paprastai juos norėsite taikyti tik <a>, <button>ir pasirinktiems <input>elementams. Štai kaip tai atrodo:

Alternatyvūs dydžiai

Mėgstate didesnius ar mažesnius mygtukus? Turėk tai!

Neįgalus būsena

Mygtukams, kurie nėra aktyvūs arba kuriuos programa dėl vienos ar kitos priežasties išjungia, naudokite išjungtą būseną. Tai .disabledskirta nuorodoms ir :disabledelementams <button>.

Nuorodos

Mygtukai

Kas tai

Mūsų viršutinė juosta yra fiksuota juosta, kurioje yra svetainės logotipas arba pavadinimas, pagrindinė naršymo priemonė ir paieškos forma.

Pritaikoma

Visi elementai viduje ir visa viršutinė juosta yra neprivalomi. Galite pasirinkti įtraukti logotipą / pavadinimą, navigaciją, paiešką ir antrinę navigaciją arba bet kurį jų derinį.

Įtraukti išskleidžiamieji meniu

Kaip pagrindinio naršymo dalį įtraukėme galimybę prie navigacijos pridėti išskleidžiamųjų meniu. Peržiūrėkite aukščiau esančią antrinę navigaciją (sulygiuotą dešinėje), kad sužinotumėte, kaip tai daroma.

Tabletės ir tabletės

Sukurkite paprastą antrinį naršymą naudodami <ul>. Keiskite skirtukus ar tabletes pridėdami atitinkamą klasę.

Puikiai tinka turinio poskyriams, pvz., paskyros nustatymų puslapiams ir naudotojų laiko juostoms, skirtoms perjungti panašaus turinio puslapius. Galima įsigyti su skirtukais arba tabletėmis.

• Namai
• Profilis
• Žinutės
• Nustatymai
• kontaktas

<ul class = "skirtukai" > 
  <li class = "aktyvus" ><a href = "#" > Pagrindinis puslapis </a></li>  
  <li><a href = "#" > Profilis </a></li> 
  <li><a href = "#" > Žinutės </a></li> 
  <li><a href = "#" > Nustatymai </a></li> 
  <li><a href = "#" > Susisiekite su </a></li> 
</ul>

• Namai
• Profilis
• Žinutės
• Nustatymai
• kontaktas

<ul klasė = "tabletės" > 
  <li class = "aktyvus" ><a href = "#" > Pagrindinis puslapis </a></li>  
  <li><a href = "#" > Profilis </a></li> 
  <li><a href = "#" > Žinutės </a></li> 
  <li><a href = "#" > Nustatymai </a></li> 
  <li><a href = "#" > Susisiekite su </a></li> 
</ul>

Puslapių rašymas

Itin supaprastinta ir minimalaus stiliaus puslapių numeracija, įkvėpta Rdio. Didelis blokas yra sunkiai nepastebimas, lengvai keičiamas ir suteikia dideles paspaudimų sritis.

<div class = "pagination" > 
  <ul>
    <li class = "ankstesnis išjungtas" ><a href = "#" > ← Ankstesnis </a></li>  
    <li class = "aktyvus" ><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 = "kitas" ><a href = "#" > Kitas → </a></li>  
  </ul>
</div>

Pagrindiniai įspėjimai

div.alert-message

Vienos eilutės pranešimai, skirti pabrėžti veiksmo nesėkmę, galimą nesėkmę ar sėkmę. Ypač naudinga formoms.

Blokuoti pranešimus

div.alert-message.block-message

Pranešimams, kuriuos reikia šiek tiek paaiškinti, turime pastraipos stiliaus įspėjimus. Jie puikiai tinka ilgesniems klaidų pranešimams paskelbti, vartotojui įspėti apie laukiantį veiksmą arba tiesiog pateikti informaciją, kad būtų daugiau dėmesio skiriama puslapyje.

Modalai

Modalai – dialogo langai arba šviesdėžės – puikiai tinka kontekstiniams veiksmams tais atvejais, kai svarbu išlaikyti foninį kontekstą.

Įrankių patarimai

Twipsis yra labai naudingi, kad padėtų sutrikusiam vartotojui ir nukreiptų juos tinkama kryptimi.

Popovers

Naudokite iššokančius langus, kad pateiktumėte puslapio potekstinę informaciją nepaveikdami išdėstymo.

„Bootstrap“ buvo sukurta naudojant „ Preboot “ – atvirojo kodo mišinių ir kintamųjų paketą, skirtą naudoti kartu su „ Less “ – išankstiniu CSS procesoriumi, kad žiniatinklio kūrimas būtų greitesnis ir lengvesnis.

Sužinokite, kaip „Bootstrap“ naudojome „Preboot“ ir kaip galite juo pasinaudoti, jei kitame projekte pasirinktumėte paleisti „Less“.

Kaip juo naudotis

Naudokite šią parinktį, kad visiškai išnaudotumėte „Bootstrap's Less“ kintamuosius, mišinius ir įdėjimą į CSS naudodami „Javascript“ savo naršyklėje.

<link rel = "stylesheet/less" href = "mažiau/bootstrap.less" media = "visi" />    
<script src = "js/less-1.1.3.min.js" ></script> 

Nejaučiate .js sprendimo? Išbandykite „Less Mac“ programą arba naudokite „Node.js “ kompiliavimui, kai įdiegiate kodą.

Kas įtraukta

Štai keletas svarbiausių dalykų, įtrauktų į „Twitter Bootstrap“, kaip „Bootstrap“ dalį. Eikite į „Bootstrap“ svetainę arba „Github“ projekto puslapį, kad atsisiųstumėte ir sužinotumėte daugiau.

Kintamieji

Kintamieji Less puikiai tinka palaikyti ir atnaujinti jūsų CSS be galvos skausmo. Jei norite pakeisti spalvos reikšmę arba dažnai naudojamą reikšmę, atnaujinkite ją vienoje vietoje ir viskas.

// Nuorodos
@linkColor : #8b59c2;         
@linkColorHover :     tamsinti ( @linkColor , 10 ); 
 
// Pilkos
@juodas : #000;             
@grayDark : šviesinti (           @juoda , 25 %); 
@pilka :               pašviesinti ( @juoda , 50 %); 
@grayLight :          pašviesinti ( @juoda , 70 %); 
@grayLighter :        pašviesinti ( @juoda , 90 %); 
@balta : #fff;             
 
// Akcentinės spalvos
@mėlyna : #08b5fb ;              
@žalia : #46a546 ;             
@raudona : #9d261d;               
@geltona : #ffc40d;            
@oranžinė : #f89406 ;            
@rožinė : #c3325f ;              
@violetinė : #7a43b6 ;            
 
// Pagrindinės linijos tinklelis
@basefont : 13px ;          
@baseline : 18px ;          

Komentuoti

/* ... */Be įprastos CSS sintaksės , Less taip pat suteikia dar vieną komentavimo stilių .

// Tai komentaras
/* Tai taip pat komentaras */

Sumaišo wazoo

Mišiniai iš esmės yra CSS apimantys arba daliniai elementai, leidžiantys sujungti kodo bloką į vieną. Jie puikiai tinka pardavėjo ypatybėms, pvz box-shadow., , kelių naršyklių gradientams, šriftų krūvoms ir kt. Žemiau pateikiamas su Bootstrap įtrauktų mišinių pavyzdys.

Šriftų krūvos

#font {
  . trumpinys ( @svoris : normalus , @dydis : 14 pikselių , @linijos aukštis : 20 pikselių ) {     
    šrifto dydis : @size ; _ 
    šriftas - svoris : @weight ; 
    eilutės aukštis : @lineHeight ; _ 
  }
  . sans - serif ( @svoris : normalus , @size : 14px , @lineHeight : 20px ) {     
    šriftų šeima : " Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    šrifto dydis : @size ; _ 
    šriftas - svoris : @weight ; 
    eilutės aukštis : @lineHeight ; _ 
  }
  . serif ( @svoris : normalus , @size : 14px , @lineHeight : 20px ) {     
    šriftų šeima : " Georgia" , Times New Roman , Times , sans - serif ;     
    šrifto dydis : @size ; _ 
    šriftas - svoris : @weight ; 
    eilutės aukštis : @lineHeight ; _ 
  }
  . monospace ( @svoris : normalus , @size : 12px , @lineHeight : 20px ) {     
    šriftų šeima : " Monaco" , Courier New , monospace ;   
    šrifto dydis : @size ; _ 
    šriftas - svoris : @weight ; 
    eilutės aukštis : @lineHeight ; _ 
  }
}

Gradientai

#gradientas {
  . horizontalus ( @startColor : #555, @endColor: #333) { 
    fono spalva : @endColor ; _ 
    fonas - pakartokite : pakartokite - x ;
    fonas - vaizdas : - khtml - gradientas ( linijinis , kairėje viršuje , dešinėje viršuje , nuo ( @startColor ), iki ( @endColor )); // Konqueror   
    fonas - vaizdas : - moz - linijinis - gradientas ( kairėje , @startColor , @endColor ); // FF 3.6+    
    fonas - vaizdas : - ms - linijinis - gradientas ( kairėje , @startColor , @endColor ); // IE10    
    background - image : - webkit - gradientas ( linijinis , kairysis viršuje , dešinėje viršuje , spalva - sustabdymas ( 0 % , @startColor ), spalva - sustabdymas ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradient ( kairėje , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    fonas - vaizdas : - o - linijinis - gradientas ( kairėje , @startColor , @endColor ); // Opera 11.10    
    fonas - vaizdas : linijinis - gradientas ( kairėje , @startColor , @endColor ); // Le standartas   
  }
  . vertikali ( @startColor : #555, @endColor: #333) { 
    fono spalva : @endColor ; _ 
    fonas - pakartokite : pakartokite - x ;
    fonas - vaizdas : - khtml - gradientas ( linijinis , kairėje viršuje , kairėje apačioje , nuo ( @startColor ), iki ( @endColor )); // Konqueror   
    fonas - vaizdas : - moz - linijinis - gradientas ( @startColor , @endColor ); // FF 3.6+   
    fonas - vaizdas : - ms - linijinis - gradientas ( @startColor , @endColor ); // IE10   
    background - image : - webkit - gradientas ( linijinis , kairėje viršuje , kairėje apačioje , spalva - sustabdymas ( 0 % , @startColor ), spalva - sustabdymas ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    background - image : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - image : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    fonas - vaizdas : linijinis - gradientas ( @startColor , @endColor ); // Standartas  
  }
  . kryptinė ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertikalios – trijų spalvų ( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Operacijos ir tinklelio sistema

Įsivaizduokite ir atlikite šiek tiek matematikos, kad sukurtumėte lanksčius ir galingus mišinius, tokius kaip toliau pateiktas.

// Tinklelis
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Tinklelio sistema
. konteineris {
  plotis : @siteWidth ; 
  paraštė : 0 automatinis ;  
  . clearfix ();
}
. stulpeliai ( @columnSpan : 1 ) {  
  plotis : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. poslinkis ( @columnOffset : 1 ) {  
  paraštė - kairė : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}