Greille réamhshocraithe

Is é an córas greille réamhshocraithe a sholáthraítear mar chuid de Bootstrap ná greille 16-colún 940px ar leithead. Is blas den chóras greille 960 a bhfuil an-tóir air, ach gan an corrlach/stuáil bhreise ar an taobh clé agus ar dheis.

Sampla marcáil greille

Mar a léirítear anseo, is féidir leagan amach bunúsach a chruthú le dhá “cholún,” gach ceann acu a chuimsíonn roinnt de na 16 cholún bhunúsacha a shainmhínigh muid mar chuid dár gcóras greille. Féach ar na samplaí thíos le haghaidh tuilleadh éagsúlachtaí.

<div rang="row"> aicme = "rá" >
  <div class = "span6 colúin" > 
    ...
  </div>
  <div class = "span10 colúin" > 
    ...
  </div>
</div>

Leagan amach seasta

Leagan amach bunúsach coimeádán 940px ar leithead, dírithe ar shuíomh nó ar aon leathanach.

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

Leagan amach sreabhach

Struchtúr solúbtha leathanach leachtach nó sreabhán le leithead íosta agus uasta agus barra taoibh clé. Go hiontach le haghaidh apps.

<comhlacht>
  <div class = "container-fluid" > 
    <div class = "taobhbharra" > 
      ...
    </div>
    <div rang = "content" > 
      ...
    </div>
  </div>
</corp>

Ceannteidil agus cóip

Ordlathas clóghrafach caighdeánach chun do leathanaigh ghréasáin a struchtúrú.

h1. Ceannteideal 1

h2. Ceannteideal 2

h3. Ceannteideal 3

h4. Ceannteideal 4

h5. Ceannteideal 5

h6. Ceannteideal 6

Alt samplach

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

Ceannteideal samplach Tá fo-cheannteideal ag...

Is féidir leat freisin fo-cheannteidil a chur leis an <strong>agus<em>

Misc. eilimintí

Úsáid béime, seoltaí, & giorrúcháin

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

Cathain a úsáid

Ba chóir clibeanna béime ( <strong>agus <em>) a úsáid chun idirdhealú físiúil a chur leis idir focal nó frása agus an chóip mórthimpeall air. Bain úsáid as <strong>le haghaidh aire simplí d'aois agus <em>le haghaidh aird agus teidil slick .

Béim i mír

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, pharetra augue.

Seoltaí

Úsáidtear an addresseilimint le haghaidh seoltaí - rinne tú buille faoi thuairim é! Seo mar a bhreathnaíonn sé:

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

Nóta: Ní addressmór deireadh a chur le gach líne le briseadh líne ( <br />) chun an t-ábhar a struchtúrú i gceart mar a léitear sa saol fíor é gan aon stíleanna a chur i bhfeidhm.

Giorrúcháin

Le haghaidh giorrúcháin agus acrainmneacha, bain úsáid as an abbrchlib ( acronymtá sé i léig i HTML5 ). Cuir an fhoirm ghearrscríbhneoireachta laistigh den chlib agus socraigh teideal don ainm iomlán.

Blockquotes

<blockquote> <p> <cite>

Bí cinnte a wrap do blockquotethart paragraphagus citeclibeanna. Agus foinse á lua agat, bain úsáid as an citeeilimint. Déanfaidh an CSS réamhrá go huathoibríoch ar ainm le em dash (—).

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

An Dr Julius Hibbert

Neamhordúil<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Mo Chomhpháirtithe Foirne
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Fear Nua
• Eoin Jacob
• Pól Pierce
• Kevin Garnett

Gan stíl<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Mo Chomhpháirtithe Foirne
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Fear Nua
• Eoin Jacob
• Pól Pierce
• Kevin Garnett

D'ordaigh<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Mo Chomhpháirtithe Foirne
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Fear Nua
6. Eoin Jacob
7. Pól Pierce
8. Kevin Garnett

Cur síosdl

Liostaí cur síos

Tá liosta tuairisce foirfe chun téarmaí a shainiú.

Euismod

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

Donec id elit non mi porta gravida agus eget metus.

Porta Malesuada

Etiam porta sem malesuada magna mollis euismod.

Tógáil táblaí

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

Tá táblaí iontach - le haghaidh a lán rudaí. Tá beagán grá marcála ag teastáil ó tháblaí móra, áfach, le bheith úsáideach, inscálaithe agus inléite (ag leibhéal an chóid). Seo roinnt leideanna chun cabhrú leat.

Clúdaigh ceanntásca do cholúin i gcónaí i dtreo theadis go bhfuil thead>> tr> th.

Cosúil le ceanntásca na gcolún, ba cheart ábhar coirp uile do bhoird a fhilleadh i dtreoir go bhfuil tbodydo ordlathas tbody>> tr.td

Sampla: Stíleanna tábla réamhshocraithe

Stíleofar na táblaí go léir go huathoibríoch agus gan ach na teorainneacha riachtanacha acu chun inléiteacht agus struchtúr a chothabháil. Ní gá ranganna nó tréithe breise a chur leis.

#	Ainm	Sloinne	Teanga
1	Roinnt	Aon	Béarla
2	Seosamh	Sé pacáiste	Béarla
3	Stu	Fiacl	Cód

<table class="common-table"> aicme = "common-table" >
  ...
</table>

Sampla: Séabra-stiallach

Faigh beagán mhaisiúil le do tháblaí trí stiallacha séabra a chur leis - níl le déanamh ach an .zebra-stripedrang a chur leis.

#	Ainm	Sloinne	Teanga
1	Roinnt	Aon	Béarla
2	Seosamh	Sé pacáiste	Béarla
3	Stu	Fiacl	Cód

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

Sampla: Séabra-stiallaithe w/ TableSorter.js

Ag glacadh leis an sampla roimhe seo, feabhsaítear úsáideacht ár dtáblaí trí fheidhmiúlacht sórtála a sholáthar trí jQuery agus an breiseán Tablesorter . Cliceáil ceanntásc aon cholúin chun an sórt a athrú.

#	Ainm	Sloinne	Teanga
1	Do	Aon	Béarla
2	Seosamh	Sé pacáiste	Béarla
3	Stu	Fiacl	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" > 
  $ ( doiciméad ). réidh ( feidhm () { 
    $ ( "tábla#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

Stíleanna réamhshocraithe

Tugtar stíleanna réamhshocraithe do gach foirm chun iad a chur i láthair ar bhealach inléite agus inscálaithe. Cuirtear stíleanna ar fáil le haghaidh ionchuir téacs, liostaí roghnaithe, réimsí téacs, cnaipí raidió agus ticbhoscaí, agus cnaipí.

Finscéal foirm shamplach

X-Ionchur Mór

Roghnaigh

1 2 3 4 5

Roghnaigh

1 2 3 4 5

Ionchur do-ghlactha

Roinnt Luach Anseo

Ionchur faoi Mhíchumas

X-Ionchur Mór

Blúire beag de théacs cabhrach

Finscéal foirm shamplach

Téacs Réamhshocraithe

@

Ticbhosca Prepended

Ticbhosca Ceangailte

Ionchur Comhad

Finscéal foirm shamplach

Liosta Roghanna

• Rogha a haon é seo agus sin - bí cinnte a chur san áireamh cén fáth go bhfuil sé iontach
• Is féidir rogha a dó a sheiceáil freisin agus a áireamh i dtorthaí na bhfoirmeacha
• Is féidir rogha a trí—tá, rinne tú buille faoi thuairim é—a sheiceáil freisin agus a áireamh i dtorthaí na bhfoirmeacha
• Ní féidir rogha a ceathair a sheiceáil toisc go bhfuil sé díchumasaithe.

Nóta: Tá lipéid timpeall ar na roghanna go léir le haghaidh limistéir cliceáil i bhfad níos mó agus foirm níos inúsáidte.

Raon Dáta

chun Taispeántar na hamanna go léir mar Am Caighdeánach an Aigéin Chiúin (GMT -08:00).

Réimse téacs

Bloc de théacs cabhrach chun cur síos a dhéanamh ar an réimse thuas más gá.

Liosta Roghanna

• Rogha a haon é seo agus sin - bí cinnte a chur san áireamh cén fáth go bhfuil sé iontach
• Is féidir rogha a dó a sheiceáil freisin agus a áireamh i dtorthaí na bhfoirmeacha

Sabháil na hathruithe Cealaigh

Foirmeacha cruachta

Cuir .form-stackedle HTML d'fhoirme agus beidh lipéid agat ar bharr a réimsí seachas ar thaobh na láimhe clé. Oibríonn sé seo go hiontach má tá do chuid foirmeacha gearr nó má tá dhá cholún ionchuir agat le haghaidh foirmeacha níos troime.

Finscéal foirm shamplach

X-Ionchur Mór

Roghnaigh

1 2 3 4 5

Finscéal foirm shamplach

Liosta Roghanna

• Rogha a haon é seo agus sin - bí cinnte a chur san áireamh cén fáth go bhfuil sé iontach
• Is féidir rogha a dó a sheiceáil freisin agus a áireamh i dtorthaí na bhfoirmeacha

Nóta: Tá lipéid timpeall ar na roghanna go léir le haghaidh limistéir cliceáil i bhfad níos mó agus foirm níos inúsáidte.

Sabháil na hathruithe Cealaigh

Cnaipí

Mar ghnás, úsáidtear cnaipí le haghaidh gníomhartha agus úsáidtear naisc le haghaidh réad. Mar shampla, d'fhéadfadh "Íoslódáil" a bheith ina chnaipe agus d'fhéadfadh "gníomhaíocht le déanaí" a bheith ina nasc.

Stíl liath éadrom réamhshocraithe na cnaipí go léir, ach tá .primaryrang gorm ar fáil. Ina theannta sin, tá sé éasca do stíleanna féin a rolladh.

Cnaipí samplaí

Is féidir stíleanna cnaipe a chur i bhfeidhm ar aon rud leis an .btnbhfeidhm. Go hiondúil beidh tú ag iarraidh iad seo a chur i bhfeidhm ar eilimintí a, button, agus roghnaithe . inputSeo mar a bhreathnaíonn sé:

Méideanna malartacha

An bhfuil fonn ort cnaipí níos mó nó níos lú? Bíodh ag é!

Stát faoi mhíchumas

Le haghaidh cnaipí nach bhfuil gníomhach nó atá díchumasaithe ag an aip ar chúis amháin nó ar chúis eile, bain úsáid as an stát díchumasaithe. Sin le .disabledhaghaidh naisc agus :disabledle haghaidh buttoneilimintí.

Naisc

Cnaipí

Cad é sin

Is barra seasta é ár mbarra barr ar a bhfuil lógó nó ainm an tsuímh Ghréasáin, bunseoladh agus foirm chuardaigh.

Incheaptha

Tá gach eilimint laistigh, agus an barra bairr ar fad chomh maith, roghnach. Is féidir leat rogha a dhéanamh lógó/ainm, nascleanúint, cuardach, agus nascleanúint tánaisteach a chur san áireamh – nó aon teaglaim de sin.

Dropdowns san áireamh

Mar chuid den phríomh nascleanúint, chuireamar san áireamh an cumas duit anuas a chur le do nascleanúint. Amharc ar an seoladh tánaisteach thuas (ailínithe ar dheis) chun a fheiceáil conas a dhéantar é.

Cluaisíní agus pills

Cruthaigh nascleanúint thánaisteach shimplí le ul. Babhtáil idir cluaisíní nó piollaí tríd an rang cuí a chur leis.

Sármhaith le haghaidh fo-ailt d’inneachar ar nós ár leathanaigh socruithe cuntais agus amlínte úsáideora chun scoránú idir leathanaigh d’inneachar comhchosúil. Ar fáil i stíleanna tabbed nó pill.

• Baile
• Próifíl
• Teachtaireachtaí
• Socruithe
• Teagmháil

<ul class="cluaisíní"> aicme = "cluaisíní" >
  <li class = "active" > <a href=""> Baile </a> </li >  
  <li><a href="">Próifíl </a> < / li > 
  <li><a href="">Teachtaireachtaí </a> < / li > 
  <li><a href=""> Socruithe </a> < / li> 
  <li><a href=""> Déan teagmháil </a> < /li> 
</ul>

• Baile
• Próifíl
• Teachtaireachtaí
• Socruithe
• Teagmháil

<ul rang="pills"> aicme = "pills" >
  <li class = "active" > <a href=""> Baile </a> </li >  
  <li><a href="">Próifíl </a> < / li > 
  <li><a href="">Teachtaireachtaí </a> < / li > 
  <li><a href=""> Socruithe </a> < / li> 
  <li><a href=""> Déan teagmháil </a> < /li> 
</ul>

Leathanaigh

Leathanach uimhriúcháin ultra-simplí agus íostach spreagtha ag Rdio. Is deacair an bloc mór a chailleann, inscálaithe go héasca, agus soláthraíonn sé limistéir mhóra cliceáil.

<div class = "leathanach" > 
  <ul>
    <li class = "" roimhe seo díchumasaithe" > <a href=""> & larr ; Roimhe Seo </a></li>  
    <li class = "active" > <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 = "ar aghaidh" < a href = " " > Ar Aghaidh → </a></li>  
  </ul>
</div>

Foláirimh bhunúsacha

Teachtaireachtaí aon líne chun béim a chur ar theip, ar theip nó ar rathúlacht gníomhaíochta. Go háirithe úsáideach le haghaidh foirmeacha.

Cuir bac ar theachtaireachtaí

Le haghaidh teachtaireachtaí a dteastaíonn beagán mínithe uathu, tá foláirimh maidir le stíl ailt againn. Tá siad seo foirfe chun teachtaireachtaí earráide níos faide a mhéadú, rabhadh a thabhairt d'úsáideoir faoi ghníomh atá ar feitheamh, nó díreach chun faisnéis a chur i láthair chun níos mó béime a chur ar an leathanach.

Modhanna

Tá modhanna – dialóga nó boscaí solais – iontach maith le haghaidh gníomhaíochtaí comhthéacsúla i gcásanna ina bhfuil sé tábhachtach go gcoinneofaí comhthéacs an chúlra.

Popovers

Úsáid popovers chun faisnéis fhothéacsúil a sholáthar do leathanach gan leagan amach a chur i bhfeidhm.

Tógadh Bootstrap le Preboot , pacáiste foinse oscailte de mheascáin agus athróga le húsáid i gcomhar le Less , réamhphróiseálaí CSS le haghaidh forbairt gréasáin níos tapúla agus níos éasca.

Seiceáil conas a d’úsáideamar Preboot in Bootstrap agus conas is féidir leat é a úsáid má roghnaíonn tú Níos lú a reáchtáil ar do chéad tionscadal eile.

Conas é a úsáid

Bain úsáid as an rogha seo chun lánúsáid a bhaint as athróga, meascáin agus neadú Bootstrap i CSS trí javascript i do bhrabhsálaí.

<link rel = "stílbhileog/less" type = "text/css" href = "less/bootstrap.less" media = "uile" />     
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Gan mothú ar an réiteach .js? Bain triail as an aip Less Mac nó bain úsáid as Node.js chun tiomsú nuair a imlonnóidh tú do chód.

Cad atá san áireamh

Seo cuid de bhuaicphointí a bhfuil san áireamh i Twitter Bootstrap mar chuid de Bootstrap. Téigh chuig suíomh Gréasáin Bootstrap nó leathanach tionscadail Github chun tuilleadh a íoslódáil agus a fhoghlaim.

Athróga datha

Tá Athróga i Lúide foirfe chun do thinneas cinn CSS a chothabháil agus a nuashonrú saor in aisce. Nuair is mian leat luach datha nó luach a úsáidtear go minic a athrú, nuashonraigh é in aon láthair amháin agus tá tú socraithe.

// Naisc
@linkColor : #8b59c2;         
@linkColorHover :     dorchaigh ( @linkColor , 10 ); 
 
// Liaths
@dubh : #000;             
@grayDark : éadromaigh (           @dubh , 25 %); 
@liath : éadromaigh (               @dubh , 50 %); 
@grayLight : éadromaigh (          @dubh , 70 %); 
@grayLighter : éadromaigh (        @dubh , 90 %); 
@bán : #fff ;             
 
// Dathanna Accent
@gorm : #08b5fb;              
@glas : #46a546;             
@dearg : #9d261d;               
@buí : #ffc40d ;            
@oráiste : #f89406 ;            
@bándearg : #c3325f ;              
@corcra : #7a43b6;            
 
// Bunlíne
@ bunlíne : 20px ;          

Ag trácht

Soláthraíonn Lúide stíl eile tráchtaireachta chomh maith le gnáth- /* ... */chomhréir CSS.

// Seo trácht
/* Seo trácht freisin */

Meascann suas an wazoo

Áirítear meascáin go bunúsach nó go páirteach le haghaidh CSS, rud a ligeann duit bloc cód a chomhcheangal i gceann amháin. Tá siad iontach le haghaidh airíonna réamh-mheasta ag díoltóirí mar box-shadow, grádáin trasbhrabhsálaí, stoic chló, agus go leor eile. Seo thíos sampla de na meascáin atá san áireamh le Bootstrap.

Cruacha cló

#cló {
  . gearrscríbhinn ( @meáchan : gnáth , @size : 14px , @lineHeight : 20px ) {     
    clómhéid : @size ; _ _ 
    cló - mheáchan : @ meáchan ; 
airde     líne : @lineHeight ; _ 
  }
  . sans - serif ( @meáchan : gnáth , @size : 14px , @lineHeight : 20px ) {     
    cló - teaghlach : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    clómhéid : @size ; _ _ 
    cló - mheáchan : @ meáchan ; 
airde     líne : @lineHeight ; _ 
  }
  . serif ( @meáchan : gnáth , @size : 14px , @lineHeight : 20px ) {     
    font - teaghlach : " Georgia " , Times New Roman , Times , sans - serif ;     
    clómhéid : @size ; _ _ 
    cló - mheáchan : @ meáchan ; 
airde     líne : @lineHeight ; _ 
  }
  . monaspás ( @ meáchan : gnáth , @size : 12px , @lineHeight : 20px ) {     
    cló - teaghlach : " Monacó " , Courier New , monaspás ;   
    clómhéid : @size ; _ _ 
    cló - mheáchan : @ meáchan ; 
airde     líne : @lineHeight ; _ 
  }
}

Grádáin

# grádán {
  . cothrománach ( @startColor : #555, @endColor: #333) { 
dath an     chúlra : @endColor ; 
athrá     cúlra : athrá - x ; _
    cúlra - íomhá : - khtml - grádán ( líneach , barr clé , barr ar dheis , ó ( @startColor ), go ( @endColor )); // Konqueror   
    cúlra - íomhá : - moz - líneach - grádán ( ar chlé , @startColor , @endColor ); // FF 3.6+    
    cúlra - íomhá : - ms - líneach - grádán ( ar chlé , @startColor , @endColor ); // IE10    
    cúlra - íomhá : - trealamh gréasáin - grádán ( líneach , barr clé , barr ar dheis , dath - stad ( 0 % , @startColor ), dath - stad ( 100 % , @endColor ) ); // Safari 4+, Chrome 2+    
    cúlra - íomhá : - trealamh gréasáin - líneach - grádán ( ar chlé , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    cúlra - íomhá : - o - líneach - grádán ( ar chlé , @startColor , @endColor ); // Ceoldráma 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    scagaire : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    cúlra - íomhá : líneach - grádán ( ar chlé , @startColor , @endColor ); // Le caighdeánach   
  }
  . ingearach ( @startColor : #555, @endColor: #333) { 
dath an     chúlra : @endColor ; 
athrá     cúlra : athrá - x ; _
    cúlra - íomhá : - khtml - grádán ( líneach , barr clé , bun clé , ó ( @startColor ), go ( @endColor )); // Konqueror   
    cúlra - íomhá : - moz - líneach - grádán ( @startColor , @endColor ); // FF 3.6+   
    cúlra - íomhá : - ms - líneach - grádán ( @startColor , @endColor ); // IE10   
    cúlra - íomhá : - webkit - grádán ( líneach , barr clé , bun clé , dath - stad ( 0 % , @startColor ), dath - stad ( 100 % , @ endColor ) ); // Safari 4+, Chrome 2+    
    cúlra - íomhá : - trealamh gréasáin - líneach - grádán ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    cúlra - íomhá : - o - líneach - grádán ( @startColor , @endColor ); // Ceoldráma 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    scagaire : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    cúlra - íomhá : líneach - grádán ( @startColor , @endColor ); // An caighdeán  
  }
  . treorach ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . ingearach - trí - dathanna ( @startColor : # 00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Oibríochtaí agus córas greille

Faigh mhaisiúil agus déan roinnt matamaitice chun meascáin solúbtha agus cumhachtacha a ghiniúint mar an ceann thíos.

// Greille
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Córas Eangaí
. coimeádán {
  leithead : @siteWidth ; 
  corrlach : 0 uathoibríoch ;  
  . soiléirfix ();
}
. colúin ( @columnSpan : 1 ) {  
  taispeáint : inlíne ; 
  snámhán : chlé ;
  leithead : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  imeall - chlé : @gridGutterWidth ; 
  &: an chéad - leanbh {
    corrlach - chlé : 0 ; 
  }
}
. fritháireamh ( @columnOffset : 1 ) {  
  imeall - clé : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! tábhachtach ;          
}