Eachdraidh

Anns na làithean tràtha de Twitter, chleachd innleadairean cha mhòr leabharlann sam bith air an robh iad eòlach gus coinneachadh ri riatanasan aghaidh. Thòisich Bootstrap mar fhreagairt do na dùbhlain a bha air thoiseach agus luathaich leasachadh gu sgiobalta tron ​​​​chiad Hackweek aig Twitter.

Le cuideachadh agus fios air ais bho iomadh innleadair aig Twitter, tha Bootstrap air fàs gu mòr gus a bhith a’ toirt a-steach chan e a-mhàin stoidhlichean bunaiteach, ach pàtrain dealbhaidh aghaidh aghaidh nas eireachdail agus nas seasmhaiche.

Leugh tuilleadh air dev.twitter.com ›

Taic brabhsair

Tha Bootstrap air a dhearbhadh agus a’ faighinn taic ann am prìomh bhrobhsairean ùr-nodha leithid Chrome, Safari, Internet Explorer, agus Firefox.

• Safari as ùire
• Google chrome as ùire
• Firefox 4+
• Internet Explorer 7+
• Opera 11

Dè tha air a ghabhail a-steach

Bidh Bootstrap a’ tighinn le CSS cruinn, teamplaidean gun ullachadh agus eisimpleir.

• A h-uile faidhle tùsail .less
• CSS air a chur ri chèile gu h-iomlan agus air a lughdachadh
• Sgrìobhainnean stiùireadh stoidhle iomlan
• Teamplaid duilleag eisimpleir (barrachd ri thighinn a dh’ aithghearr)

Grid bunaiteach

Is e an siostam clèithe bunaiteach a tha air a thoirt seachad mar phàirt de Bootstrap cliath 16-colbh de leud 940px. Is e blas a th’ ann den t-siostam clèithe 960 mòr-chòrdte, ach às aonais an iomall / pleadhag a bharrachd air na taobhan clì is deas.

Eisimpleir grid comharrachadh

Mar a chithear an seo, faodar cruth bunaiteach a chruthachadh le dà “cholbh,” gach fear a’ spangachadh grunn de na 16 colbhan bunaiteach a mhìnich sinn mar phàirt den t-siostam clèithe againn. Faic na h-eisimpleirean gu h-ìosal airson barrachd atharrachaidhean.

<div class = "sreath" > 
  <div class = "span6 colbhan" > 
    ...
  </div>
  <div class = "10 colbhan" > 
    ...
  </div>
</div>

Cruth stèidhichte

An cruth bunaiteach agus sìmplidh 940px-leathann, sa mheadhan airson dìreach làrach-lìn no duilleag sam bith air a thoirt seachad le aon fhaidhle <div.container>.

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

Cruth fluid

Structar duilleag sùbailte sùbailte eile le leudan as ìsle agus as àirde agus bàr-taoibh chlì. Fìor mhath airson aplacaidean agus sgrìobhainnean.

<corp>
  <div class = "container-fluid" > 
    <div class = "bar-taoibh" > 
      ...
    </div>
    <div class = "susbaint" > 
      ...
    </div>
  </div>
</corp>

Cinn & leth-bhreac

Rangachd clò-sgrìobhaidh àbhaisteach airson do dhuilleagan-lìn a structaradh.

Tha a’ ghriod clò-sgrìobhaidh gu lèir stèidhichte air dà Nas lugha caochladair anns an fhaidhle preboot.less againn: @basefontagus @baseline. Is e a’ chiad fhear am meud cruth-clò bunaiteach a thathar a’ cleachdadh air feadh agus is e an dàrna fear an àirde bun-loidhne.

Bidh sinn a’ cleachdadh na caochladairean sin, agus cuid de matamataigs, gus na h-iomaill, pleadhagan, agus àirdean loidhne de gach seòrsa againn agus barrachd a chruthachadh.

h1. Ceann-uidhe 1

h2. Ceann-uidhe 2

h3. Ceann-uidhe 3

h4. Ceann-uidhe 4

h5. Ceann-uidhe 5

h6. Ceann 6

Eisimpleir paragraf

Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Ceann- eisimpleir Tha fo-cheannard air…

Measg. eileamaidean

A’ cleachdadh cuideam, seòlaidhean, & giorrachaidhean

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

Nuair a chleachdadh

Bu chòir tagaichean cuideam ( <strong>agus <em>) a chleachdadh gus cuideam no cuideam a bharrachd de fhacal no abairt a nochdadh an coimeas ris an leth-bhreac mun cuairt air. Cleachd airson <strong>cuideam agus cuideam cuideam.<em>

Cuideam ann am paragraf

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

Nota: Tha e fhathast ceart gu leòr a bhith a’ cleachdadh <b>agus <i>tagaichean ann an HTML5 agus chan fheum iad a bhith air an stoidhleachadh trom agus clò eadailteach, fa leth (ged ma tha eileamaid nas semantach ann, cleachd e). <b>thathar an dùil faclan no abairtean a shoilleireachadh gun a bhith a’ toirt cuideam a bharrachd, fhad ‘s <i>a tha e gu ìre mhòr airson guth, teirmean teicnigeach, msaa.

Seòlaidhean

Tha an <address>eileamaid air a chleachdadh airson fiosrachadh conaltraidh airson an sinnsear as fhaisge, no am buidheann obrach gu lèir. Seo mar a tha e coltach:

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

Nota: Feumaidh gach loidhne ann an loidhne <address>crìochnachadh le briseadh loidhne ( <br />) no a bhith air a phasgadh ann an tag ìre bloc (me, <p>) gus an susbaint a structaradh gu ceart.

Giorrachaidhean

Airson giorrachaidhean agus geàrr-chunntasan, cleachd an <abbr>taga ( <acronym>chan eil e air a mholadh ann an HTML5 ). Cuir am foirm làmh-ghoirid taobh a-staigh an taga agus suidhich tiotal airson an ainm iomlan.

Blockquotes

<blockquote> <p> <small>

Mar a nì thu luaidh

Gus blockquote a ghabhail a-steach, cuir <blockquote>timcheall <p>agus <small>tagaichean. Cleachd an <small>eileamaid gus an tobar agad ainmeachadh agus gheibh thu em dash —roimhe.

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

Dr Julius Hibbert

Gun òrdugh<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem aig massa
• Facilisis ann am pretium nisl aliquet
• Gun a bhith a 'dol a-mach à bith
  • Phasellus iaculis saor an asgaidh
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat aig
• Faucibus porta lacus fringilla no
• Aenean sit amet erat nunc
• Luchdaich a-nuas porttitor lorem

Gun stoidhle<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem aig massa
• Facilisis ann am pretium nisl aliquet
• Gun a bhith a 'dol a-mach à bith
  • Phasellus iaculis saor an asgaidh
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat aig
• Faucibus porta lacus fringilla no
• Aenean sit amet erat nunc
• Luchdaich a-nuas porttitor lorem

Dh'òrdaich<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem aig massa
4. Facilisis ann am pretium nisl aliquet
5. Gun a bhith a 'dol a-mach à bith
6. Faucibus porta lacus fringilla no
7. Aenean sit amet erat nunc
8. Luchdaich a-nuas porttitor lorem

Tuairisgeuldl

Liostaichean tuairisgeul

Tha liosta tuairisgeul foirfe airson teirmean a mhìneachadh.

Eusmod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida agus eget metus.

Port-adhair Malesuada

Etiam porta sem malesuada magna mollis euismod.

Togail bùird

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

Tha clàran math - airson tòrr rudan. Feumaidh bùird sgoinneil, ge-tà, beagan de ghaol comharrachaidh gus a bhith feumail, scalable, agus furasta a leughadh (aig ìre còd). Seo beagan mholaidhean airson cuideachadh.

Paisg na cinn-cinn colbh agad an-còmhnaidh gus am bi <thead>rangachd <thead>>> <tr>.<th>

Coltach ri cinn nan colbhan, bu chòir susbaint bodhaig a’ bhùird agad gu lèir a phasgadh a-steach gus am bi an <tbody>rangachd agad <tbody>>> <tr>.<td>

Eisimpleir: Stoidhlichean bùird bunaiteach

Bidh na bùird uile air an stialladh gu fèin-ghluasadach le dìreach na crìochan riatanach gus dèanamh cinnteach gum bi e furasta a leughadh agus structar a chumail suas. Chan eil feum air clasaichean no buadhan a bharrachd a chur ris.

#	A’ chiad ainm	An t-ainm mu dheireadh	Cànain
1	cuid	Aon	Sasannach
2	Eòs	Sia paca	Sasannach
3	Stu	Fiaclan	Còd

<clàr>
  ...
</clàr>

Eisimpleir: Zebra-striped

Faigh beagan tlachd leis na bùird agad le bhith a’ cur stiallan zebra ris - dìreach cuir ris a’ .zebra-stripedchlas.

#	A’ chiad ainm	An t-ainm mu dheireadh	Cànain
1	cuid	Aon	Sasannach
2	Eòs	Sia paca	Sasannach
3	Stu	Fiaclan	Còd

Nota: Tha Zebra-striping na àrdachadh adhartach nach eil ri fhaighinn airson brobhsairean nas sine mar IE8 agus gu h-ìosal.

<table class = "stiallach seabra" > 
...
</clàr>

Eisimpleir: Zebra-striped w/ TableSorter.js

A’ gabhail na h-eisimpleir a bh’ ann roimhe, leasaichidh sinn cho feumail sa tha na bùird againn le bhith a’ toirt seachad comas seòrsachaidh tro jQuery agus am plugan Tablesorter . Cliog air bann-cinn colbh sam bith gus an seòrsa atharrachadh.

#	A’ chiad ainm	An t-ainm mu dheireadh	Cànain
1	Tha do	Aon	Sasannach
2	Eòs	Sia paca	Sasannach
3	Stu	Fiaclan	Còd

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( gnìomh () { 
    $ ( "clàr#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "stiallach seabra" > 
  ...
</clàr>

Stoidhlichean bunaiteach

Tha stoidhlichean bunaiteach aig gach foirm gus an taisbeanadh ann an dòigh a ghabhas leughadh agus a ghabhas scalladh. Tha stoidhlichean air an toirt seachad airson cuir a-steach teacsa, liostaichean taghte, raointean teacsa, putanan rèidio agus bogsaichean sgrùdaidh, agus putanan.

Eisimpleir cruth-sgeul

Cuir a-steach X-Large

Tagh

1 2 3 4 5

Tagh

1 2 3 4 5

Teachd-a-steach nach gabh atharrachadh

Cuid de luach an seo

Cuir a-steach ciorramach

Cuir a-steach X-Large

Criomag bheag de theacsa cuideachaidh

Eisimpleir cruth-sgeul

Teacs ro-làimh

@

Bogsa seic ro-làimh

Bogsa-dearbhaidh ceangailte

Cuir a-steach faidhle

Eisimpleir cruth-sgeul

Liosta de na roghainnean

• Is e roghainn a h-aon seo agus sin - bi cinnteach gun cuir thu a-steach carson a tha e math
• Faodar roghainn a dhà a sgrùdadh cuideachd agus a thoirt a-steach do thoraidhean foirm
• Faodar roghainn a trì - tha, shaoil ​​​​thu - cuideachd a bhith air a sgrùdadh agus air a thoirt a-steach do thoraidhean foirm
• Chan urrainnear roghainn a ceithir a sgrùdadh leis gu bheil e ciorramach.

Nota: Bidh bileagan a’ cuairteachadh a h-uile roghainn airson raointean cliog tòrr nas motha agus foirm a ghabhas cleachdadh.

Raon cinn-latha

gu Tha na h-amannan uile air an sealltainn mar Pacific Standard Time (GMT -08:00).

Raon-teacsa

Bloc teacsa cuideachaidh gus cunntas a thoirt air an raon gu h-àrd ma tha feum air.

Liosta de na roghainnean

• Is e roghainn a h-aon seo agus sin - bi cinnteach gun cuir thu a-steach carson a tha e math
• Faodar roghainn a dhà a sgrùdadh cuideachd agus a thoirt a-steach do thoraidhean foirm

Sàbhail Atharrachaidhean  Sguir dheth

Foirmean cruaidh

Cuir .form-stackedri HTML an fhoirm agad agus bidh bileagan agad air mullach nan raointean aca seach air an taobh chlì. Bidh seo ag obair glè mhath ma tha na foirmean agad goirid no ma tha dà cholbh cuir a-steach agad airson foirmean nas truime.

Eisimpleir cruth-sgeul

Cuir a-steach X-Large

Tagh

1 2 3 4 5

Eisimpleir cruth-sgeul

Cuir a-steach X-Large

Criomag bheag de theacsa cuideachaidh

Liosta de na roghainnean

• Is e roghainn a h-aon seo agus sin - bi cinnteach gun cuir thu a-steach carson a tha e math
• Faodar roghainn a dhà a sgrùdadh cuideachd agus a thoirt a-steach do thoraidhean foirm

Nota: Bidh bileagan a’ cuairteachadh a h-uile roghainn airson raointean cliog tòrr nas motha agus foirm a ghabhas cleachdadh.

Sàbhail Atharrachaidhean  Sguir dheth

Putanan

Mar ghnàthachas, thathas a’ cleachdadh putanan airson gnìomhan fhad ‘s a thathas a’ cleachdadh cheanglaichean airson nithean. Mar eisimpleir, dh’ fhaodadh “Luchdaich sìos” a bhith na phutan agus dh’ fhaodadh “gnìomh o chionn ghoirid” a bhith na cheangal.

Bidh na putanan uile gu bunaiteach ann an stoidhle liath aotrom, ach faodar grunn chlasaichean gnìomh a chuir an sàs airson diofar stoidhlichean dath. Am measg nan clasaichean sin tha clas gorm .primary, clas aotrom-gorm .info, clas uaine .success, agus clas dearg .danger. A bharrachd air an sin, tha e furasta na stoidhlichean agad fhèin a roiligeadh.

Eisimpleir putanan

Faodar stoidhlichean putan a chuir an sàs ann an rud sam bith leis an .btntagradh. Mar as trice bidh thu airson an cur an sàs ann an eileamaidean <a>, <button>, agus tagh a-mhàin. <input>Seo mar a tha e coltach:

Meudan eile

A bheil thu ag iarraidh putanan nas motha no nas lugha? Thoir air!

Stàite ciorramach

Airson putanan nach eil gnìomhach no a tha ciorramach leis an aplacaid airson adhbhar air choireigin, cleachd an stàit ciorramach. Tha sin .disabledairson ceanglaichean agus :disabledairson <button>eileamaidean.

Ceanglaichean

Putanan

Dè th 'ann

Tha am bàr-mullaich againn na bhàr stèidhichte anns a bheil suaicheantas no ainm làrach-lìn, prìomh sheòladh, agus foirm sgrùdaidh.

Customizable

Tha a h-uile eileamaid a-staigh, agus am bàr-mullaich gu lèir cuideachd, roghainneil. Faodaidh tu roghnachadh suaicheantas / ainm, seòladh, sgrùdadh agus seòladh àrd-sgoile a ghabhail a-steach - no measgachadh sam bith de sin.

Dropdowns air an toirt a-steach

Mar phàirt den phrìomh sheòladh, tha sinn air comas a thoirt dhut dropdowns a chur ris do nav. Thoir sùil air an nav àrd-sgoile gu h-àrd (co-thaobhadh deas) gus faicinn mar a tha e air a dhèanamh.

Tabaichean agus pills

Cruthaich seòladh àrd-sgoile sìmplidh le faidhle <ul>. Dèan iomlaid eadar tabaichean no pills le bhith a’ cur a’ chlas iomchaidh ris.

Fìor mhath airson fo-roinnean de shusbaint leithid na duilleagan roghainnean cunntais againn agus loidhnichean-tìm luchd-cleachdaidh airson gluasad eadar duilleagan de shusbaint coltach ris. Ri fhaighinn ann an stoidhlichean tabbed no pill.

• Dhachaigh
• Pròifil
• Teachdaireachdan
• Suidhichidhean
• Cuir fios

<ul class = "tabs" > 
  <li class = "active" ><a href="#"> Dachaigh </a> < /li >  
  <li><a href = "#"> Pròifil </a> </li> 
  <li><a href="#"> Teachdaireachdan </a> < /li > 
  <li><a href="#"> Roghainnean </a> < /li > 
  <li><a href = "#"> Cuir fios </a></li> 
</ul>

• Dhachaigh
• Pròifil
• Teachdaireachdan
• Suidhichidhean
• Cuir fios

<ul class = "pills" > 
  <li class = "active" ><a href="#"> Dachaigh </a> < /li >  
  <li><a href = "#"> Pròifil </a> </li> 
  <li><a href="#"> Teachdaireachdan </a> < /li > 
  <li><a href="#"> Roghainnean </a> < /li > 
  <li><a href = "#"> Cuir fios </a></li> 
</ul>

Duilleagadh

Duilleagan ultra simplidh agus le glè bheag de stoidhle air a bhrosnachadh le Rdio. Tha am bloc mòr duilich a chall, furasta a scalladh, agus a’ toirt seachad raointean cliog mòr.

<div class = "duilleag" > 
  <ul>
    <li class = "air a chur à comas" > <a href = "#"> ← Roimhe </a></li>  
    <li class = "gnìomhach" ><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 = "ath" > <a href = "#"> An ath → </a></li>  
  </ul>
</div>

Rabhaidhean bunaiteach

div.alert-message

Teachdaireachdan aon-loidhne airson a bhith a’ soilleireachadh fàilligeadh, fàilligeadh a dh’ fhaodadh a bhith ann, no soirbheachas gnìomh. Gu sònraichte feumail airson foirmean.

Cuir casg air teachdaireachdan

div.alert-message.block-message

Airson teachdaireachdan a dh’ fheumas beagan mìneachaidh, tha rabhaidhean stoidhle paragraf againn. Tha iad sin foirfe airson teachdaireachdan mearachd nas fhaide a sgaoileadh, rabhadh a thoirt do neach-cleachdaidh mu ghnìomhachd a tha ri thighinn, no dìreach airson fiosrachadh a thaisbeanadh airson barrachd cuideam air an duilleag.

Modailean

Tha modalan - còmhradh no bogsaichean-solais - air leth math airson gnìomhan co-theacsail ann an suidheachaidhean far a bheil e cudromach gun tèid an cùl-fhiosrachadh a chumail suas.

Molaidhean innealan

Tha Twipsies air leth feumail airson a bhith a’ toirt taic do neach-cleachdaidh troimh-chèile agus gan comharrachadh san t-slighe cheart.

Popovers

Cleachd popovers gus fiosrachadh fo-theacsa a thoirt do dhuilleag gun a bhith a’ toirt buaidh air cruth.

Chaidh Bootstrap a thogail le Preboot , pasgan stòr fosgailte de mheasgachaidhean agus caochladairean airson a chleachdadh an co-bhonn ri Less , ro-phròiseas CSS airson leasachadh lìn nas luaithe agus nas fhasa.

Thoir sùil air mar a chleachd sinn Preboot ann am Bootstrap agus mar as urrainn dhut feum a dhèanamh dheth ma roghnaicheas tu Nas lugha a ruith air an ath phròiseact agad.

Mar a chleachdas tu e

Cleachd an roghainn seo gus làn fheum a dhèanamh de chaochladairean Bootstrap's Less, measgachadh, agus neadachadh ann an CSS tro javascript sa bhrobhsair agad.

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

Gun a bhith a 'faireachdainn am fuasgladh .js? Feuch an aplacaid Less Mac no cleachd Node.js gus a chur ri chèile nuair a chleachdas tu do chòd.

Dè tha air a ghabhail a-steach

Seo cuid de na rudan as fheàrr a tha air an toirt a-steach do Twitter Bootstrap mar phàirt de Bootstrap. Rach a-null gu làrach-lìn Bootstrap no duilleag pròiseact Github airson luchdachadh sìos agus barrachd ionnsachadh.

Caochlaidhean

Tha caochlaidhean ann an Nas lugha foirfe airson do cheann-cinn CSS a chumail suas agus ùrachadh an-asgaidh. Nuair a tha thu airson luach dath no luach a chleachdar gu tric atharrachadh, ùraich e ann an aon àite agus tha thu suidhichte.

// Ceanglaichean
@linkColor : #8b59c2;         
@linkColorHover : dorchaich (     @linkColor , 10 ); 
 
// Greis
@dubh : #000;             
@grayDark : aotrom (           @black , 25 %); 
@liath : aotrom (               @black , 50 %); 
@grayLight : aotrom (          @black , 70 %); 
@grayLighter : aotrom (        @black , 90 %); 
@geal : #fff;             
 
// Dathan accent
@gorm : #08b5fb;              
@uaine : #46a546;             
@dearg : #9d261d;               
@buidhe : #ffc40d;            
@orange : #f89406;            
@pinc : #c3325f;              
@purpaidh : #7a43b6;            
 
// Grid bun-loidhne
@basefont : 13px ;          
@bun- loidhne : 18px ;          

A' toirt beachd

/* ... */Tha nas lugha cuideachd a’ toirt seachad stoidhle beachdachaidh eile a bharrachd air co- chòrdadh àbhaisteach CSS .

// Seo beachd
/* Seo beachd cuideachd */

A 'measgachadh an wazoo

Tha measgachaidhean gu bunaiteach a’ toirt a-steach no pàirtean airson CSS, a ’toirt cothrom dhut bloc de chòd a chur còmhla ann an aon. Tha iad sgoinneil airson togalaichean ro-shuidhichte reiceadair leithid box-shadow, caiseadan tar-bhrabhsair, cruachan cruth-clò, agus barrachd. Gu h-ìosal tha sampall de na measgachaidhean a tha air an gabhail a-steach le Bootstrap.

Stacan cruth-clò

#cruth {
  . làmh- ghoirid ( @cuideam : àbhaisteach , @size : 14px , @lineHeight : 20px ) {     
    cruth - clò : @size ; 
    cruth- clò - cuideam : @weight ; 
    loidhne - àirde : @lineHeight ; 
  }
  . sans - serif ( @cuideam : àbhaisteach , @size : 14px , @lineHeight : 20px ) {     
    font - teaghlach : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    cruth - clò : @size ; 
    cruth- clò - cuideam : @weight ; 
    loidhne - àirde : @lineHeight ; 
  }
  . serif ( @cuideam : àbhaisteach , @size : 14px , @lineHeight : 20px ) {     
    font - teaghlach : "Georgia" , Times New Roman , Times , sans - serif ;     
    cruth - clò : @size ; 
    cruth- clò - cuideam : @weight ; 
    loidhne - àirde : @lineHeight ; 
  }
  . monospace ( @ cuideam : àbhaisteach , @ meud : 12px , @lineHeight : 20px ) {     
    font - teaghlach : "Monaco" , Courier Ùr , monospace ;   
    cruth - clò : @size ; 
    cruth- clò - cuideam : @weight ; 
    loidhne - àirde : @lineHeight ; 
  }
}

Caiseadan

#gradient {
  . còmhnard ( @startColor : # 555, @endColor: #333) { 
    cùl - dath : @endColor ; 
    cùl - aithris : ath - aithris - x ;
    cùl - ìomhaigh : - khtml - caisead ( sreathach , mullach clì , mullach deas , bho ( @startColor ), gu ( @endColor )); // Conqueror   
    cùl - dealbh : - moz - sreathach - caisead ( clì , @startColor , @endColor ); // FF 3.6+    
    cùl - dealbh : - ms - sreathach - caisead ( clì , @startColor , @endColor ); // Ie10    
    cùl -ìomhaigh - ìomhaigh : - webkit - caisead ( sreathach , mullach clì , mullach deas , dath - stad ( 0 % , @startColor ), dath - stad ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    cùl - dealbh : - webkit - sreathach - caisead ( clì , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    cùl - ìomhaigh : - o - sreathach - caisead ( clì , @startColor , @endColor ); // Opera 11.10    
    cùl - ìomhaigh : sreathach - caisead ( clì , @startColor , @endColor ); // Le inbhe   
  }
  . dìreach ( @startColor : # 555, @endColor: #333) { 
    cùl - dath : @endColor ; 
    cùl - aithris : ath - aithris - x ;
    cùl - ìomhaigh : - khtml - caisead ( sreathach , mullach clì , bonn clì , bho ( @startColor ), gu ( @endColor )); // Conqueror   
    cùl - dealbh : - moz - sreathach - caisead ( @startColor , @endColor ); // FF 3.6+   
    cùl - ìomhaigh : - ms - sreathach - caisead ( @startColor , @endColor ); // Ie10   
    cùl - ìomhaigh : - webkit - caisead ( sreathach , mullach clì , bonn clì , dath - stad ( 0 % , @startColor ), dath - stad ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    cùl - ìomhaigh : - webkit - sreathach - caisead ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    cùl - ìomhaigh : - o - sreathach - caisead ( @startColor , @endColor ); // Opera 11.10   
    cùl - ìomhaigh : sreathach - caisead ( @startColor , @endColor ); // An inbhe  
  }
  . stiùiridh ( @startColor : # 555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . dìreach - trì - dathan ( @startColor : # 00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Obrachaidhean agus siostam clèithe

Faigh tlachd agus dèan beagan matamataigs gus measgachadh sùbailte is cumhachdach a ghineadh mar am fear gu h-ìosal.

// Clèithe
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Siostam clèithe
. soitheach {
  leud : @siteWidth ; 
  iomall : 0 càr ;  
  . soilleir ();
}
. colbhan ( @columnSpan : 1 ) {  
  leud : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. cuir dheth ( @columnOffset : 1 ) {  
  oir - clì : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}