Hanes

Yn nyddiau cynharach Twitter, defnyddiodd peirianwyr bron unrhyw lyfrgell yr oeddent yn gyfarwydd â hi i fodloni gofynion pen blaen. Dechreuodd Bootstrap fel ateb i'r heriau a gyflwynwyd a chyflymodd datblygiad yn gyflym yn ystod Wythnos Hac gyntaf Twitter.

Gyda chymorth ac adborth llawer o beirianwyr yn Twitter, mae Bootstrap wedi tyfu'n sylweddol i gwmpasu nid yn unig arddulliau sylfaenol, ond patrymau dylunio pen blaen mwy cain a gwydn.

Darllenwch fwy ar dev.twitter.com ›

Cefnogaeth porwr

Mae Bootstrap yn cael ei brofi a'i gefnogi mewn porwyr modern mawr fel Chrome, Safari, Internet Explorer, a Firefox.

• Safari diweddaraf
• Google Chrome diweddaraf
• Firefox 4+
• Internet Explorer 7+
• Opera 11

Beth sydd wedi'i gynnwys

Daw Bootstrap ynghyd â CSS wedi'i lunio, heb ei lunio, a thempledi enghreifftiol.

• Pob ffeil .less gwreiddiol
• CSS wedi'i llunio a'i miniogi'n llawn
• Cwblhau dogfennaeth canllaw arddull
• Templed tudalen enghreifftiol (mwy i ddod yn fuan)

Grid diofyn

Y system grid rhagosodedig a ddarperir fel rhan o Bootstrap yw grid 16-colofn 940px o led. Mae'n flas o'r system grid 960 boblogaidd, ond heb yr ymyl / padin ychwanegol ar yr ochr chwith a dde.

Enghraifft o farcio grid

Fel y dangosir yma, gellir creu cynllun sylfaenol gyda dwy "golofn," pob un yn rhychwantu nifer o'r 16 colofn sylfaenol a ddiffiniwyd gennym fel rhan o'n system grid. Gweler yr enghreifftiau isod am ragor o amrywiadau.

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

Gosodiad sefydlog

Y gosodiad diofyn a syml 940px-eang, wedi'i ganoli ar gyfer bron unrhyw wefan neu dudalen a ddarperir gan un ffeil <div.container>.

<corff>
  <div class = "cynhwysydd" > 
    ...
  </div>
</corff>

Gosodiad hylif

Strwythur tudalen hylif hyblyg amgen gyda lled isaf ac uchaf a bar ochr chwith. Gwych ar gyfer apps a dogfennau.

<corff>
  <div class = "container-fluid" > 
    <div class = "bar ochr" > 
      ...
    </div>
    <div class = "cynnwys" > 
      ...
    </div>
  </div>
</corff>

Penawdau a chopi

Hierarchaeth deipograffig safonol ar gyfer strwythuro'ch tudalennau gwe.

Mae'r grid teipograffeg cyfan yn seiliedig ar ddau newidyn Llai yn ein ffeil preboot.less: @basefonta @baseline. Y cyntaf yw maint y ffont sylfaen a ddefnyddir drwyddi draw a'r ail yw uchder y llinell sylfaen.

Rydyn ni'n defnyddio'r newidynnau hynny, a rhywfaint o fathemateg, i greu'r ymylon, padinau, ac uchder llinell o'n holl fath a mwy.

h1. Pennawd 1

h2. Pennawd 2

h3. Pennawd 3

h4. Pennawd 4

h5. Pennawd 5

h6. Pennawd 6

Paragraff enghreifftiol

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 ultricies vehicula ut id elit.

Mae gan bennawd enghreifftiol is-bennawd…

Amryw. elfennau

Defnyddio pwyslais, cyfeiriadau, a byrfoddau

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

Pryd i ddefnyddio

Dylid defnyddio tagiau pwyslais ( <strong>a ) i ddangos pwysigrwydd neu bwyslais ychwanegol gair neu ymadrodd o'i gymharu â'r copi o'i amgylch. <em>Defnyddiwch <strong>ar gyfer pwysigrwydd ac <em>ar gyfer pwyslais straen .

Pwyslais mewn paragraff

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

Nodyn: Mae'n dal yn iawn i ddefnyddio <b>a <i>thagiau yn HTML5 ac nid oes rhaid iddynt gael eu steilio mewn print trwm ac italig, yn y drefn honno (er os oes elfen fwy semantig, defnyddiwch hi). <b>i fod i amlygu geiriau neu ymadroddion heb gyfleu pwysigrwydd ychwanegol, tra ei fod <i>yn bennaf ar gyfer llais, termau technegol, ac ati.

Cyfeiriadau

Defnyddir yr <address>elfen ar gyfer gwybodaeth gyswllt ar gyfer ei hynafiad agosaf, neu'r corff cyfan o waith. Dyma sut mae'n edrych:

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

Nodyn: Rhaid i bob llinell mewn llinell <address>ddod i ben gyda toriad llinell ( <br />) neu gael ei lapio mewn tag lefel bloc (ee, <p>) i strwythuro'r cynnwys yn gywir.

Byrfoddau

Ar gyfer byrfoddau ac acronymau, defnyddiwch y <abbr>tag ( <acronym>wedi'i anghymeradwyo yn HTML5 ). Rhowch y ffurflen llaw-fer o fewn y tag a gosodwch deitl ar gyfer yr enw cyflawn.

Blockquotes

<blockquote> <p> <small>

Sut i ddyfynnu

I gynnwys blockquote, cofleidiol a <blockquote>thagiau . Defnyddiwch yr elfen i ddyfynnu eich ffynhonnell a byddwch yn cael 'em dash' o'i flaen.<p><small><small>&mdash;

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

Julius Hibbert, Dr

Heb drefn<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Cyfanrif molestie lorem yn massa
• Facilitis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttititor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Unstyled<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Cyfanrif molestie lorem yn massa
• Facilitis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttititor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Archebwyd<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Cyfanrif molestie lorem yn massa
4. Facilitis 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

Disgrifiaddl

Rhestri disgrifiadau

Mae rhestr ddisgrifiad yn berffaith ar gyfer diffinio termau.

Euismod

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

Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus.

Porthladd Malesuada

Etiam porta sem malesuada magna mollis euismod.

Adeiladu byrddau

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

Mae byrddau yn wych - am lawer o bethau. Fodd bynnag, mae angen ychydig o gariad marcio ar dablau gwych i fod yn ddefnyddiol, yn raddadwy ac yn ddarllenadwy (ar lefel y cod). Dyma ychydig o awgrymiadau i helpu.

Lapiwch benawdau eich colofnau bob amser <thead>fel bod hierarchaeth yn <thead>>> <tr>.<th>

Yn debyg i benawdau'r colofnau, dylai holl gynnwys corff eich tabl gael ei lapio mewn a <tbody>fel mai eich hierarchaeth yw <tbody>>> .<tr><td>

Enghraifft: Arddulliau tabl rhagosodedig

Bydd pob bwrdd yn cael ei steilio'n awtomatig gyda dim ond y borderi hanfodol i sicrhau darllenadwyedd a chynnal strwythur. Nid oes angen ychwanegu dosbarthiadau neu briodoleddau ychwanegol.

#	Enw cyntaf	Enw olaf	Iaith
1	Rhai	Un	Saesneg
2	Joe	Sixpack	Saesneg
3	Stu	Dent	Côd

<bwrdd>
  ...
</table>

Enghraifft: Sebra-streipiau

Mynnwch ychydig o ffansi gyda'ch byrddau trwy ychwanegu stribedi sebra - ychwanegwch y .zebra-stripeddosbarth.

#	Enw cyntaf	Enw olaf	Iaith
1	Rhai	Un	Saesneg
2	Joe	Sixpack	Saesneg
3	Stu	Dent	Côd

Nodyn: Mae stripio sebra yn welliant cynyddol nad yw ar gael ar gyfer porwyr hŷn fel IE8 ac is.

< table class = "sebra-streip" > 
...
</table>

Enghraifft: Sebra-streipiau w/ TableSorter.js

Gan gymryd yr enghraifft flaenorol, rydym yn gwella defnyddioldeb ein tablau trwy ddarparu ymarferoldeb didoli trwy jQuery ac ategyn Tablesorter . Cliciwch ar bennyn unrhyw golofn i newid y math.

#	Enw cyntaf	Enw olaf	Iaith
1	Eich	Un	Saesneg
2	Joe	Sixpack	Saesneg
3	Stu	Dent	Côd

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( swyddogaeth ( ) { 
    $ ( " table#sortTableExample " ). tablesorter ( { sortList : [[ 1 , 0 ]] });  
  });
</script>
< table class = "sebra-streip" > 
  ...
</table>

Arddulliau rhagosodedig

Rhoddir arddulliau rhagosodedig i bob ffurflen i'w cyflwyno mewn ffordd ddarllenadwy a graddadwy. Darperir arddulliau ar gyfer mewnbynnau testun, rhestrau dethol, meysydd testun, botymau radio a blychau ticio, a botymau.

Chwedl ffurf enghreifftiol

Mewnbwn X-Mawr

Dewiswch

1 2 3 4 5

Dewiswch

1 2 3 4 5

Mewnbwn anaddas

Rhywfaint o Werth Yma

Mewnbwn i'r Anabl

Mewnbwn X-Mawr

Darn bach o destun cymorth

Chwedl ffurf enghreifftiol

Testun Prepended

@

Blwch ticio wedi'i baratoi

Blwch ticio wedi'i atodi

Mewnbwn Ffeil

Chwedl ffurf enghreifftiol

Rhestr o Opsiynau

• Opsiwn un yw hwn a'r llall - gwnewch yn siŵr eich bod yn cynnwys pam ei fod yn wych
• Gellir gwirio opsiwn dau hefyd a'i gynnwys yng nghanlyniadau'r ffurflen
• Gellir gwirio opsiwn tri - ie, fe wnaethoch chi ddyfalu - hefyd gael ei wirio a'i gynnwys yng nghanlyniadau'r ffurflen
• Ni ellir gwirio opsiwn pedwar gan ei fod wedi'i analluogi.

Nodyn: Mae labeli'n amgylchynu'r holl opsiynau ar gyfer ardaloedd clicio llawer mwy a ffurf fwy defnyddiadwy.

Amrediad Dyddiad

i Dangosir pob amser fel Amser Safonol y Môr Tawel (GMT -08:00).

Ardal destun

Bloc o destun cymorth i ddisgrifio'r maes uchod os oes angen.

Rhestr o Opsiynau

• Opsiwn un yw hwn a'r llall - gwnewch yn siŵr eich bod yn cynnwys pam ei fod yn wych
• Gellir gwirio opsiwn dau hefyd a'i gynnwys yng nghanlyniadau'r ffurflen

Cadw Newidiadau  Canslo

Ffurflenni wedi'u pentyrru

Ychwanegwch .form-stackedat HTML eich ffurflen a bydd gennych labeli ar ben eu meysydd yn hytrach nag ar y chwith. Mae hyn yn gweithio'n wych os yw'ch ffurflenni'n fyr neu os oes gennych chi ddwy golofn o fewnbynnau ar gyfer ffurflenni trymach.

Chwedl ffurf enghreifftiol

Mewnbwn X-Mawr

Dewiswch

1 2 3 4 5

Chwedl ffurf enghreifftiol

Mewnbwn X-Mawr

Darn bach o destun cymorth

Rhestr o Opsiynau

• Opsiwn un yw hwn a'r llall - gwnewch yn siŵr eich bod yn cynnwys pam ei fod yn wych
• Gellir gwirio opsiwn dau hefyd a'i gynnwys yng nghanlyniadau'r ffurflen

Nodyn: Mae labeli'n amgylchynu'r holl opsiynau ar gyfer ardaloedd clicio llawer mwy a ffurf fwy defnyddiadwy.

Cadw Newidiadau  Canslo

Botymau

Fel confensiwn, defnyddir botymau ar gyfer gweithredoedd tra defnyddir dolenni ar gyfer gwrthrychau. Er enghraifft, gallai "Lawrlwytho" fod yn fotwm a gallai "gweithgaredd diweddar" fod yn ddolen.

Mae pob botwm yn rhagosodedig i arddull llwyd golau, ond gellir cymhwyso nifer o ddosbarthiadau swyddogaethol ar gyfer gwahanol arddulliau lliw. Mae'r dosbarthiadau hyn yn cynnwys dosbarth glas .primary, dosbarth glas golau .info, dosbarth gwyrdd .success, a dosbarth coch .danger. Hefyd, mae rholio eich arddulliau eich hun yn hawdd iawn.

Botymau enghreifftiol

Gellir cymhwyso arddulliau botwm i unrhyw beth gyda'r .btncymhwyso. Yn nodweddiadol byddwch am gymhwyso'r rhain i elfennau <a>, <button>, a dethol yn unig. <input>Dyma sut mae'n edrych:

Meintiau eraill

Awydd botymau mwy neu lai? Mwynhewch!

Cyflwr anabl

Ar gyfer botymau nad ydynt yn weithredol neu sy'n anabl gan yr ap am ryw reswm neu'i gilydd, defnyddiwch y cyflwr anabl. Mae hynny ar .disabledgyfer dolenni ac :disabledar gyfer <button>elfennau.

Cysylltiadau

Botymau

Beth ydyw

Mae ein bar uchaf yn far sefydlog sy'n cynnwys logo neu enw gwefan, llywio cynradd, a ffurflen chwilio.

Customizable

Mae'r holl elfennau oddi mewn, a'r bar uchaf cyfan hefyd, yn ddewisol. Gallwch ddewis cynnwys logo/enw, llywio, chwiliad, a llywio eilaidd – neu unrhyw gyfuniad o hynny.

Cwympiadau wedi'u cynnwys

Fel rhan o'r prif lywio, rydym wedi cynnwys y gallu i chi ychwanegu cwymplenni i'ch llywio. Edrychwch ar y llywio eilaidd uchod (wedi'i alinio i'r dde) i weld sut mae'n cael ei wneud.

Tabiau a tabledi

Creu llywio eilaidd syml gyda <ul>. Newidiwch rhwng tabiau neu dabledi trwy ychwanegu'r dosbarth priodol.

Gwych ar gyfer is-adrannau cynnwys fel ein tudalennau gosodiadau cyfrif a llinellau amser defnyddwyr ar gyfer toglo rhwng tudalennau o gynnwys tebyg. Ar gael mewn arddulliau tabledi neu bilsen.

• Cartref
• Proffil
• Negeseuon
• Gosodiadau
• Cysylltwch

<ul class = "tabiau" > 
  < li class = " active " <a href = " # " > Cartref </a></li>  
  <li><a href="#"> Proffil </a> < / li> 
  <li><a href="#"> Negeseuon </a> < / li> 
  <li><a href="#"> Gosodiadau </a> < / li> 
  <li><a href="#"> Cysylltu </a> < / li> 
</ul>

• Cartref
• Proffil
• Negeseuon
• Gosodiadau
• Cysylltwch

<ul class = "pils" > 
  < li class = " active " <a href = " # " > Cartref </a></li>  
  <li><a href="#"> Proffil </a> < / li> 
  <li><a href="#"> Negeseuon </a> < / li> 
  <li><a href="#"> Gosodiadau </a> < / li> 
  <li><a href="#"> Cysylltu </a> < / li> 
</ul>

Tudaleniad

Tudaleniad hynod or-syml a lleiaf posibl wedi'i ysbrydoli gan Rdio. Mae'r bloc mawr yn anodd ei golli, yn hawdd ei raddio, ac mae'n darparu ardaloedd clicio mawr.

<div class = "tudalen" > 
  <ul>
    < li class = "#" > <a href="#"> & larr ; Blaenorol </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 = "nesaf" <a href = "#" > Nesaf & rarr ; </a></li>  
  </ul>
</div>

Rhybuddion sylfaenol

div.alert-message

Negeseuon un llinell ar gyfer tynnu sylw at fethiant, methiant posibl, neu lwyddiant gweithred. Yn arbennig o ddefnyddiol ar gyfer ffurflenni.

Rhwystro negeseuon

div.alert-message.block-message

Ar gyfer negeseuon sydd angen ychydig o esboniad, mae gennym rybuddion arddull paragraff. Mae'r rhain yn berffaith ar gyfer byrlymu negeseuon gwall hirach, rhybuddio defnyddiwr am weithred arfaethedig, neu ddim ond cyflwyno gwybodaeth i gael mwy o bwyslais ar y dudalen.

moddau

Mae moddau - deialogau neu flychau golau - yn wych ar gyfer gweithredoedd cyd-destunol mewn sefyllfaoedd lle mae'n bwysig cynnal y cyd-destun cefndirol.

Awgrymiadau Offeryn

Mae Twipsies yn hynod ddefnyddiol ar gyfer cynorthwyo defnyddiwr dryslyd a'u pwyntio i'r cyfeiriad cywir.

Popovers

Defnyddiwch popovers i ddarparu gwybodaeth is-destunol i dudalen heb effeithio ar y cynllun.

Adeiladwyd Bootstrap gyda Preboot , pecyn ffynhonnell agored o gymysgeddau a newidynnau i'w defnyddio ar y cyd â Less , rhagbrosesydd CSS ar gyfer datblygiad gwe cyflymach a haws.

Darganfyddwch sut y gwnaethom ddefnyddio Preboot yn Bootstrap a sut y gallwch ei ddefnyddio pe baech yn dewis rhedeg Llai ar eich prosiect nesaf.

Sut i'w ddefnyddio

Defnyddiwch yr opsiwn hwn i wneud defnydd llawn o newidynnau Llai Bootstrap, cymysgeddau, a nythu yn CSS trwy javascript yn eich porwr.

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

Not feeling the .js solution? Try the Less Mac app or use Node.js to compile when you deploy your code.

What’s included

Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.

Variables

Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.

// Links
@linkColor:         #8b59c2;
@linkColorHover:    darken(@linkColor, 10);
 
// Grays
@black:             #000;
@grayDark:          lighten(@black, 25%);
@gray:              lighten(@black, 50%);
@grayLight:         lighten(@black, 70%);
@grayLighter:       lighten(@black, 90%);
@white:             #fff;
 
// Accent Colors
@blue:              #08b5fb;
@green:             #46a546;
@red:               #9d261d;
@yellow:            #ffc40d;
@orange:            #f89406;
@pink:              #c3325f;
@purple:            #7a43b6;
 
// Baseline grid
@basefont:          13px;
@baseline:          18px;

Commenting

Less also provides another style of commenting in addition to CSS’s normal /* ... */ syntax.

// This is a comment
/* This is also a comment */

Mixins up the wazoo

Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.

Font stacks

#font {
  .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-family: "Georgia", Times New Roman, Times, sans-serif;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
    font-family: "Monaco", Courier New, monospace;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
}

Gradients

#gradient {
  .horizontal (@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(left, @startColor, @endColor); // Le standard
  }
  .vertical (@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
    background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(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
    background-image: linear-gradient(@startColor, @endColor); // The standard
  }
  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
    ...
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    ...
  }
}

Operations and grid system

Get fancy and perform some math to generate flexible and powerful mixins like the one below.

// Griditude
@gridColumns:       16;
@gridColumnWidth:   40px;
@gridGutterWidth:   20px;
@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 
// Grid System
.container {
  width: @siteWidth;
  margin: 0 auto;
  .clearfix();
}
.columns(@columnSpan: 1) {
  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
.offset(@columnOffset: 1) {
  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
}