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="row"> clas = "sreath" >
  <div class = "span6 colbhan" > 
    ...
  </div>
  <div class = "10 colbhan" > 
    ...
  </div>
</div>

Cruth stèidhichte

Cruth bunaiteach soitheach 940px de leud, sa mheadhan airson cha mhòr làrach no duilleag sam bith.

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

Cruth fluid

Structar duilleag sùbailte siùbhlach no lionn le leud as lugha agus as àirde agus bàr-taoibh chlì. Fìor mhath airson aplacaidean.

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

Cinn agus dèan lethbhreac

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

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.

Eisimpleir de cheann Tha fo-cheann...

Faodaidh tu cuideachd fo-thiotalan a chur ris leis an <strong>agus<em>

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 eadar-dhealachadh lèirsinneach a chur eadar facal no abairt agus an leth-bhreac mun cuairt air. Cleachd <strong>airson seann aire shìmplidh agus <em>airson aire agus tiotalan slaodach .

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.

Seòlaidhean

Tha an addresseileamaid air a chleachdadh airson - rinn thu tomhas air! - seòlaidhean. 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 addresscrìochnachadh le briseadh loidhne ( <br />) gus structar ceart a dhèanamh air an t-susbaint mar a tha e air a leughadh ann am fìor bheatha gun stoidhlichean sam bith a chuir an sàs.

Giorrachaidhean

Airson giorrachaidhean agus geàrr-chunntasan, cleachd an abbrtaga ( acronymchan 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> <cite>

Dèan cinnteach gun cuir thu blockquotetimcheall ort paragraphagus na citetagaichean agad. Nuair a tha thu ag ainmeachadh stòr, cleachd an citeeileamaid. Cuiridh an CSS ro-ràdh gu fèin-ghluasadach air ainm le em dash (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut la laboure et dolore magna aliqua...

Dr Julius Hibbert

Gun òrdugh<ul>

• Jeremy Bixby
• Raibeart Dezure
• Josh Washington
• Anton Capresi
• Mo charaidean sgioba
  • Seòras Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Fear Nuadh
• Iain Iacob
• Paul Pierce
• Caoimhin Garnett

Gun stoidhle<ul.unstyled>

• Jeremy Bixby
• Raibeart Dezure
• Josh Washington
• Anton Capresi
• Mo charaidean sgioba
  • Seòras Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Fear Nuadh
• Iain Iacob
• Paul Pierce
• Caoimhin Garnett

Dh'òrdaich<ol>

1. Jeremy Bixby
2. Raibeart Dezure
3. Josh Washington
4. Anton Capresi
5. Mo charaidean sgioba
   1. Seòras Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Fear Nuadh
6. Iain Iacob
7. Paul Pierce
8. Caoimhin Garnett

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 airson 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 theadrangachd thead>> tr.th

Coltach ri cinn nan colbhan, bu chòir susbaint bodhaig do bhòrd gu lèir a phasgadh ann an a gus am bi an tbodyrangachd 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 gus 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

<table class="common-table"> clas = "coitcheann" >
  ...
</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

<table class="stiallach zebra-bùird cumanta"> class = "stiallach zebra-bùird cumanta" >
...
</clàr>

Eisimpleir: Zebra-striped w/ TableSorter.js

A’ gabhail na h-eisimpleir a bh’ ann roimhe, bidh sinn a’ leasachadh 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 type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"> </script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "text/javascript" > 
  $ ( sgrìobhainn ). deiseil ( gnìomh () { 
    $ ( "clàr#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "stiallach zebra-bùird cumanta" > 
  ...
</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-mòr

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-mòr

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-mòr

Tagh

1 2 3 4 5

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

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 tha .primaryclas gorm ri fhaighinn. 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. inputSeo 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 buttoneileamaidean.

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"> clas = "cluaisean" >
  <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"> clas = "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="page"> clas = "duilleag" >
  <ul>
    <li class = "" roimhe seo à 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 rud → </a></li>  
  </ul>
</div>

Rabhaidhean bunaiteach

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

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.

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" type = "text/css" href = "less/bootstrap.less" media = "uile" />     
<script type = "text/javascript" src = "js/less-1.0.41.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.

Caochladairean dath

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;            
 
// Bun-loidhne
@bun- loidhne : 20px ;          

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 ( @weight : àbhaisteach , @size : 14px , @lineHeight    : 20px ) {  
    font - teaghlach : "Helvetica Neue" , Helvetica , Arial    , sans - serif ;
    cruth- clò -clò : @size ; 
    cruth- clò -cuideam : @weight ; 
    loidhne - àirde: @lineHeight ; 
  }
  . serif ( @ cuideam : àbhaisteach , @ meud : 14px , @lineHeight :     20px ) { 
    font - teaghlach : "Georgia" , Times New Roman , Times ,      sans - serif ;
    cruth- clò - meudclò : ; 
    cruth- clò - cuideam: @weight ; 
    loidhne - àirde : @lineHeight ;
  }
  . monospace ( @ cuideam : àbhaisteach , @ meud : 12px , @lineHeight :     20px ) { 
    font - teaghlach : "Monaco" , Courier New    , monospace ;
    cruth- clò - meud : clò ;
    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    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7
    cùl - dealbh : sreathach - caisead ( clì , @startColor , @endColor ); // Le inbhe   
  }
  . dìreach ( @startColor : # 555, @endColor: #333) { 
    cùl - dath : @endColor ; 
    cùl - ath -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   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7
    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: 0.5, @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 ;   
 
// Siostam clèithe
. soitheach {
  leud : @siteWidth ; 
  iomall : 0 càr ;  
  . soilleir ();
}
. colbhan ( @columnSpan : 1 )   {
  taisbeanadh : inline ; 
  fleòdradh : left ;
  leud : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  iomall - clì : @gridGutterWidth ; 
  &: a 'chiad - leanabh {
    iomall - clì : 0 ; 
  }
}
. cuir dheth ( @columnOffset : 1 )   {
  oir - clì : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! cudromach ;          
}