Default daim phiaj

Lub default grid system muab raws li ib feem ntawm Bootstrap yog 940px wide 16-kem daim phiaj. Nws yog ib qho tsw ntawm qhov nrov 960 kab sib chaws, tab sis tsis muaj cov npoo ntxiv / padding ntawm sab laug thiab sab xis.

Piv txwv daim phiaj markup

Raws li pom ntawm no, ib qho kev teeb tsa yooj yim tuaj yeem tsim nrog ob "kab", txhua qhov txuas ntxiv ntawm 16 kab hauv paus peb tau txhais ua ib feem ntawm peb cov kab sib chaws. Saib cov piv txwv hauv qab no rau ntau qhov kev hloov pauv.

<div class="row"> class = "row" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

Tsau layout

Ib qho yooj yim 940px dav, nruab nrab lub thawv layout rau ib qho chaw lossis nplooj ntawv.

<lub cev>
  <div class = "container" > 
    ...
  </div>
</body>

Cov dej layout

Cov kua dej hloov tau yooj yim lossis cov nplooj ntawv ua kua nrog min- thiab max-widths thiab sab laug sab laug. Zoo heev rau apps.

<lub cev>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "cov ntsiab lus" > 
      ...
    </div>
  </div>
</body>

Headings thiab luam

Tus qauv typographic hierarchy rau kev teeb tsa koj lub vev xaib.

h 1. Ntsiab lus 1

h 2. Ntsiab lus 2

h 3. Ntsiab lus 3

h 4. Ntsiab lus 4

h 5. Ntsiab lus 5

h 6. Nqe lus piav qhia 6

Piv txwv kab lus

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.

Example heading Muaj sub-heading...

Koj tuaj yeem ntxiv subheadings nrog rau <strong>thiab<em>

Lwm yam. cov ntsiab lus

Siv cov ntsiab lus, chaw nyob, & cov ntawv luv

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

Thaum siv

Cov cim cim ( <strong>thiab <em>) yuav tsum tau siv los ntxiv qhov pom qhov txawv ntawm ib lo lus lossis kab lus thiab nws cov ntawv ib puag ncig. Siv <strong>rau qhov qub qub thiab <em>rau slick xim thiab lub npe.

Ua kom pom tseeb hauv ib nqe lus

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 auggue.

Chaw nyob

Lub addressntsiab yog siv rau-koj twv nws!—chaw nyob. Nov yog qhov nws zoo li no:

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

Nco tseg: Txhua kab hauv ib qho addressyuav tsum xaus nrog kab-tawg ( <br />) kom tsim cov ntsiab lus kom raug raws li nws tau nyeem hauv lub neej tiag tiag yam tsis muaj cov qauv siv.

Cov ntawv luv

Rau cov ntawv luv thiab cov ntawv sau, siv lub abbrcim ( acronymyog deprecated hauv HTML5 ). Muab daim ntawv luv luv rau hauv daim ntawv thiab teem lub npe rau lub npe tag.

Blockquotes

<blockquote> <p> <cite>

Nco ntsoov qhwv koj blockquoteib ncig paragraphthiab citetag. Thaum xam qhov chaw, siv lub citentsiab. CSS yuav cia li ua ntej lub npe nrog em khiav ceev (—).

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

Dr. Julius Hibbert

Unordered<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Kuv Pab Pawg
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• John Jacob
• Paul Pierce
• Kevin Garnett

Tsis zoo li<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Kuv Pab Pawg
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• John Jacob
• Paul Pierce
• Kevin Garnett

Txiav txim<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Kuv Pab Pawg
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. John Jacob
7. Paul Pierce
8. Kevin Garnett

Kev piav qhiadl

Cov npe piav qhia

Daim ntawv teev lus piav qhia zoo meej rau kev txhais cov ntsiab lus.

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.

Tsev rooj

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

Cov rooj yog qhov zoo heev - rau ntau yam. Cov ntxhuav zoo, txawm li cas los xij, xav tau me ntsis ntawm kev hlub kev hlub kom muaj txiaj ntsig, scalable, thiab nyeem tau (ntawm qib code). Nov yog ob peb lub tswv yim los pab.

Ib txwm qhwv koj cov kab ntawv hauv kab hauv ib qho theaduas hierarchy yog thead>> tr.th

Zoo ib yam li cov kab ntawv hauv kab ntawv, tag nrho koj cov lus lub cev cov ntsiab lus yuav tsum tau muab qhwv rau hauv ib qho tbodykom koj hierarchy yog tbody>> tr.td

Piv txwv li: Default table styles

Tag nrho cov rooj yuav raug txiav styled tsuas yog cov ciam teb tseem ceeb los xyuas kom meej nyeem tau thiab tswj cov qauv. Tsis tas yuav ntxiv cov chav kawm ntxiv lossis cov cwj pwm.

#	Lub Npe	Lub Npe	Lus
1	Ib txhia	Ib	Lus Askiv
2	Joe	Sixpack	Lus Askiv
3	Stu	Khob	Code

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

Piv txwv li: Zebra-striped

Tau txais me ntsis zoo nkauj nrog koj cov ntxhuav los ntawm kev ntxiv zebra-striping - tsuas yog ntxiv cov .zebra-stripedchav kawm.

#	Lub Npe	Lub Npe	Lus
1	Ib txhia	Ib	Lus Askiv
2	Joe	Sixpack	Lus Askiv
3	Stu	Khob	Code

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

Piv txwv li: Zebra-striped w/ TableSorter.js

Ua piv txwv yav dhau los, peb txhim kho qhov muaj txiaj ntsig ntawm peb cov ntxhuav los ntawm kev muab kev txheeb xyuas ua haujlwm ntawm jQuery thiab Tablesorter plugin. Nyem txhua kab ntawv header los hloov qhov kev xaiv.

#	Lub Npe	Lub Npe	Lus
1	Koj	Ib	Lus Askiv
2	Joe	Sixpack	Lus Askiv
3	Stu	Khob	Code

<script type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>  
<script type = "text/javascript" > 
  $ ( cov ntaub ntawv ). npaj ( ua haujlwm () { 
    $ ( "table #sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

Cov qauv qub

Txhua daim ntawv tau muab cov qauv qub los nthuav qhia lawv hauv txoj kev nyeem tau thiab scalable. Cov qauv yog muab rau cov ntawv nkag, xaiv cov npe, cov ntawv nyeem, xov tooj cua nyees khawm thiab checkboxes, thiab cov nyees khawm.

Piv txwv daim ntawv dab neeg

X-loj input

Xaiv

1 2 3 4 5

Xaiv

1 2 3 4 5

Uneditable Input

Qee tus nqi ntawm no

Disabled Input

X-loj input

Cov ntawv me me ntawm cov ntawv nyeem

Piv txwv daim ntawv dab neeg

Cov ntawv nyeem ua ntej

@

Prepended Checkbox

Appended Checkbox

Cov ntaub ntawv nkag

Piv txwv daim ntawv dab neeg

Daim ntawv teev cov kev xaiv

• Kev xaiv ib qho yog qhov no thiab qhov ntawd - nco ntsoov suav nrog vim li cas nws zoo heev
• Kev xaiv thib ob kuj tuaj yeem kuaj xyuas thiab suav nrog hauv daim ntawv tau txais
• Kev xaiv peb tuaj yeem-yog, koj twv nws-tseem raug kuaj xyuas thiab suav nrog hauv daim ntawv tau txais
• Kev xaiv plaub tsis tuaj yeem kuaj xyuas vim tias nws yog neeg xiam.

Nco tseg: Cov ntawv sau nyob ib puag ncig txhua qhov kev xaiv rau ntau qhov nyem qhov loj dua thiab daim ntawv siv tau ntau dua.

Hnub Tim

rau Txhua lub sijhawm tau qhia tias Pacific Standard Time (GMT -08:00).

Textarea

Thaiv ntawm kev pab ntawv los piav txog cov teb saum toj no yog tias xav tau.

Daim ntawv teev cov kev xaiv

• Kev xaiv ib qho yog qhov no thiab qhov ntawd - nco ntsoov suav nrog vim li cas nws zoo heev
• Kev xaiv thib ob kuj tuaj yeem kuaj xyuas thiab suav nrog hauv daim ntawv tau txais

Txuag Hloov Tso tseg

Cov ntawv sib dhos

Ntxiv .form-stackedrau koj daim ntawv HTML thiab koj yuav muaj cov ntawv sau rau saum lawv daim teb es tsis txhob mus rau sab laug. Qhov no ua haujlwm zoo yog tias koj cov ntawv luv luv lossis koj muaj ob kab ntawv nkag rau cov ntawv hnyav dua.

Piv txwv daim ntawv dab neeg

X-loj input

Xaiv

1 2 3 4 5

Piv txwv daim ntawv dab neeg

Daim ntawv teev cov kev xaiv

• Kev xaiv ib qho yog qhov no thiab qhov ntawd - nco ntsoov suav nrog vim li cas nws zoo heev
• Kev xaiv thib ob kuj tuaj yeem kuaj xyuas thiab suav nrog hauv daim ntawv tau txais

Nco tseg: Cov ntawv sau nyob ib puag ncig txhua qhov kev xaiv rau ntau qhov nyem qhov loj dua thiab daim ntawv siv tau ntau dua.

Txuag Hloov Tso tseg

Khawm

Raws li lub rooj sib tham, cov nyees khawm yog siv rau kev ua thaum sib txuas siv rau cov khoom. Piv txwv li, "Download" tuaj yeem yog lub pob thiab "kev ua haujlwm tsis ntev los no" tuaj yeem yog qhov txuas.

Tag nrho cov nyees khawm ua rau lub teeb grey style, tab sis .primarychav kawm xiav muaj. Ntxiv rau, dov koj tus kheej style yog yooj yim peasy.

Piv txwv khawm

Khawm style tuaj yeem siv rau txhua yam nrog rau kev .btnthov. Feem ntau koj yuav xav siv cov no rau tsuas yog a, button, thiab xaiv inputcov ntsiab lus. Nov yog qhov nws zoo li no:

Hloov qhov ntau thiab tsawg

Xav tau cov nyees khawm loj lossis me dua? Muaj ntawm nws!

Lub xeev tsis taus

Rau cov nyees khawm uas tsis ua haujlwm lossis tsis ua haujlwm los ntawm lub app rau ib qho laj thawj lossis lwm qhov, siv lub xeev tsis taus. Qhov ntawd yog .disabledrau kev sib txuas thiab :disabledrau buttoncov ntsiab lus.

Txuas

Khawm

Nws yog dab tsi

Peb lub topbar yog ib qho chaw ruaj khov uas muaj lub vev xaib lub logo lossis lub npe, thawj qhov kev taw qhia, thiab daim ntawv tshawb fawb.

Customizable

Tag nrho cov ntsiab lus hauv, thiab tag nrho cov topbar zoo li, yog xaiv tau. Koj tuaj yeem xaiv suav nrog lub logo / lub npe, nav, tshawb nrhiav, thiab lwm qhov nav-los yog ib qho kev sib xyaw ua ke ntawm qhov ntawd.

Dropdowns suav nrog

Raws li ib feem ntawm lub ntsiab navigation, peb tau suav nrog lub peev xwm rau koj los ntxiv cov dropdowns rau koj nav. Tshawb xyuas qhov thib ob nav sab saum toj (txoj cai sib dhos) kom pom tias nws ua tiav li cas.

Tabs thiab tshuaj

Tsim kev yooj yim theem nrab navigation nrog a ul. Sib pauv ntawm tabs lossis tshuaj los ntawm kev ntxiv cov chav kawm tsim nyog.

Zoo rau cov ntu ntu ntawm cov ntsiab lus zoo li peb cov nplooj ntawv teeb tsa tus account thiab cov sijhawm siv sijhawm rau kev sib tw ntawm nplooj ntawv nyiam cov ntsiab lus. Muaj nyob rau hauv tabbed lossis ntsiav tshuaj hom.

• Tsev
• Profile
• Cov lus
• Chaw
• Hu rau

<ul class = "tabs" > 
  <li class = "active" ><a href=""> Tsev </a> </ li >  
  <li><a href=""> Profile </a> < / li> 
  <li><a href=""> Messages </a> < / li> 
  <li><a href = "> Chaw </a> </li> 
  <li><a href=""> Hu rau </a> </li > 
</ul>

• Tsev
• Profile
• Cov lus
• Chaw
• Hu rau

<ul class = "pills" > 
  <li class = "active" ><a href=""> Tsev </a> </ li >  
  <li><a href=""> Profile </a> < / li> 
  <li><a href=""> Messages </a> < / li> 
  <li><a href = "> Chaw </a> </li> 
  <li><a href=""> Hu rau </a> </li > 
</ul>

Pagination

Ultra simplistic thiab minimally styled pagination tshwm sim los ntawm Rdio. Qhov loj thaiv yog ib qho nyuaj rau nco, yooj yim scalable, thiab muab loj nias qhov chaw.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "" > ← Previous </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 = "next" ><a href=""> Next & rarr ; </a></li>  
  </ul>
</div>

Kev ceeb toom yooj yim

Ib kab lus qhia txog qhov ua tsis tiav, ua tsis tiav, lossis ua tiav ntawm qhov ua tiav. Tshwj xeeb yog pab tau rau cov ntawv.

Thaiv cov lus

Rau cov lus uas xav tau me ntsis piav qhia, peb muaj cov lus ceeb toom kab lus. Cov no yog qhov zoo tshaj plaws rau bubbling cov lus yuam kev ntev dua, ceeb toom rau tus neeg siv ntawm qhov tseem tab tom ua, lossis tsuas yog nthuav tawm cov ntaub ntawv rau qhov tseem ceeb ntawm nplooj ntawv.

Cov qauv

Modals-dialogs lossis lightboxes-yog qhov zoo rau kev ua haujlwm hauv cov xwm txheej uas nws tseem ceeb uas cov ntsiab lus keeb kwm yav dhau tau khaws cia.

Popovers

Siv popovers los muab cov ntaub ntawv subtextual rau nplooj ntawv yam tsis muaj kev cuam tshuam layout.

Bootstrap tau tsim nrog Preboot , qhov qhib-qhov pob ntawm mixins thiab hloov pauv los siv ua ke nrog Less , CSS preprocessor rau kev txhim kho lub vev xaib sai thiab yooj yim dua.

Tshawb xyuas seb peb siv Preboot hauv Bootstrap li cas thiab koj tuaj yeem siv nws li cas yog tias koj xaiv khiav tsawg dua ntawm koj qhov project tom ntej.

Yuav siv li cas

Siv qhov kev xaiv no los ua kom tag nrho siv Bootstrap's Less variables, mixins, thiab zes hauv CSS ntawm javascript hauv koj tus browser.

<link rel = "stylesheet/less" type = "text/css" href = "tsawg/bootstrap.less" media = "tag nrho" />     
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Tsis hnov ​​qhov .js daws? Sim tsawg Mac app lossis siv Node.js los sau thaum koj xa koj cov lej.

Dab tsi suav nrog

Nov yog qee qhov tseem ceeb ntawm qhov muaj nyob hauv Twitter Bootstrap ua ib feem ntawm Bootstrap. Lub taub hau mus rau lub vev xaib Bootstrap lossis Github qhov project nplooj ntawv rub tawm thiab kawm ntxiv.

Xim hloov pauv

Qhov sib txawv hauv Less yog qhov zoo meej rau kev tswj hwm thiab hloov kho koj CSS mob taub hau dawb. Thaum koj xav hloov tus nqi xim lossis tus nqi nquag siv, hloov kho nws hauv ib qho chaw thiab koj tau teeb tsa.

// Links
@linkColor : #8b59c2;         
@linkColorHover :     tsaus ntuj ( @linkColor , 10 ); 
 
// Grey
@dub : #000;             
@greyDark :           lighten ( @black , 25 % ); 
@grey :               lighten ( @black , 50 % ); 
@greyLight :          lighten ( @black , 70 % ); 
@greyLighter :        lighten ( @black , 90 % ); 
@white : #ff;             
 
// Xim Xim
@blue : #08b5fb;              
@ntsuab : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@purple : #7a43b6;            
 
// Lub hauv paus
@pib : 20px ;          

Kev tawm tswv yim

Tsawg dua kuj tseem muab lwm hom kev tawm tswv yim ntxiv rau CSS cov lus qhia ib txwm muaj /* ... */.

// Qhov no yog ib qho lus qhia
/* Qhov no kuj yog ib qho kev tawm tswv yim */

Mixing up the wazoo

Mixins yog qhov pib suav nrog lossis ib feem rau CSS, tso cai rau koj los ua ke ib qho thaiv ntawm cov lej rau hauv ib qho. Lawv zoo heev rau cov neeg muag khoom ua ntej cov khoom xws li box-shadow, cross-browser gradients, font stacks, thiab ntau dua. Hauv qab no yog ib qho piv txwv ntawm cov mixins uas suav nrog Bootstrap.

Font pawg

#font {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - loj : @size ; 
    font - luj : @weight ; 
    kab - qhov siab : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - tsev neeg : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    font - loj : @size ; 
    font - luj : @weight ; 
    kab - qhov siab : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - tsev neeg : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - loj : @size ; 
    font - luj : @weight ; 
    kab - qhov siab : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - tsev neeg : "Monaco" , Courier Tshiab , monospace ;   
    font - loj : @size ; 
    font - luj : @weight ; 
    kab - qhov siab : @lineHeight ; 
  }
}

Gradints

#gradient {
  . kab rov tav ( @startColor : #555, @endColor: #333) { 
    tom qab - xim : @endColor ; 
    keeb kwm yav dhau - rov ua dua : rov ua dua - x ;
    background - duab : - khtml - gradient ( linear , sab laug saum toj , sab xis saum , los ntawm ( @startColor ), mus rau ( @endColor )); // Konqueror   
    background - duab : - moz - linear - gradient ( s laug , @startColor , @endColor ); // FWV 3.6+    
    background - duab : - ms - linear - gradient ( sab laug , @startColor , @endColor ); // IB 10    
    keeb kwm yav dhau - duab : - webkit - gradient ( linear , sab laug , sab xis saum toj , xim - nres ( 0 %, @startColor ), xim - nres ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - duab : - webkit - linear - gradient ( s laug , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - duab : - o - linear - gradient ( s laug , @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 
    background - duab : linear - gradient ( sab laug , @startColor , @endColor ); // Le standard   
  }
  . ntsug ( @startColor : #555, @endColor: #333) { 
    tom qab - xim : @endColor ; 
    keeb kwm yav dhau - rov ua dua : rov ua dua - x ;
    keeb kwm yav dhau - duab : - khtml - gradient ( linear , sab laug saum toj , sab laug hauv qab , los ntawm ( @startColor ), mus rau ( @endColor )); // Konqueror   
    background - duab : - moz - linear - gradient ( @startColor , @endColor ); // FWV 3.6+   
    background - duab : - ms - linear - gradient ( @startColor , @endColor ); // IB 10   
    keeb kwm yav dhau - duab : - webkit - gradient ( linear , sab laug saum toj , sab laug hauv qab , xim - nres ( 0 %, @startColor ), xim - nres ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - duab : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - duab : - o - linear - gradient ( @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 
    background - duab : linear - gradient ( @startColor , @endColor ); // Tus qauv  
  }
  . directional ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . ntsug - peb - ​​xim ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Kev ua haujlwm thiab kab sib chaws

Tau txais kev zoo nkauj thiab ua qee qhov kev ua lej los tsim kom muaj kev hloov pauv thiab muaj zog sib xyaw zoo li cov hauv qab no.

// Griditude
@gridKawm : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Grid System
. thawv {
  dav : @siteWidth ; 
  npoo : 0 auto ;.  
  . clearfix ();
}
. columns ( @columnSpan : 1 ) {  
  zaub : inline ; 
  ntab : sab laug ;
  dav : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margin - sab laug : @gridGutterWidth ; 
  &: thawj - tus menyuam {
    sab laug : 0 ; _ 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - laug : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! tseem ceeb ;          
}