Historio

En la pli fruaj tagoj de Twitter, inĝenieroj uzis preskaŭ ajnan bibliotekon, kun kiu ili konis por plenumi antaŭajn postulojn. Bootstrap komenciĝis kiel respondo al la defioj kiuj prezentis kaj evoluo rapide akcelis dum la unua Hackweek de Twitter.

Kun la helpo kaj sugestoj de multaj inĝenieroj ĉe Twitter, Bootstrap signife kreskis por ampleksi ne nur bazajn stilojn, sed pli elegantajn kaj daŭrajn antaŭajn desegnajn ŝablonojn.

Legu pli ĉe dev.twitter.com ›

Subteno de retumilo

Bootstrap estas provita kaj subtenata en ĉefaj modernaj retumiloj kiel Chrome, Safari, Internet Explorer kaj Firefox.

• Plej nova Safaro
• Plej nova Google Chrome
• Fajrovulpo 4+
• Interreta Esploristo 7+
• Opero 11

Kio estas inkluzivita

Bootstrap venas kompleta kun kompilitaj CSS, nekompilitaj kaj ekzemploŝablonoj.

• Ĉiuj originalaj .malpli dosieroj
• Plene kompilita kaj minigita CSS
• Kompleta stilgviddokumentado
• Ekzempla paĝa ŝablono (pli venos baldaŭ)

Defaŭlta krado

La defaŭlta kradsistemo provizita kiel parto de Bootstrap estas 940px larĝa 16-kolumna krado. Ĝi estas gusto de la populara 960 kradsistemo, sed sen la aldona marĝeno/remburaĵo ĉe la maldekstraj kaj dekstraj flankoj.

Ekzempla krada markado

Kiel montrite ĉi tie, baza aranĝo povas esti kreita kun du "kolumnoj", ĉiu ampleksanta kelkajn el la 16 fundamentaj kolumnoj, kiujn ni difinis kiel parto de nia kradsistemo. Vidu la ekzemplojn malsupre por pli da varioj.

<div klaso = "vico" > 
  <div class = "span6 kolumnoj" > 
    ...
  </div>
  <div class = "span10 kolumnoj" > 
    ...
  </div>
</div>

Fiksa aranĝo

La defaŭlta kaj simpla 940px-larĝa, centrita aranĝo por preskaŭ ajna retejo aŭ paĝo provizita de ununura <div.container>.

<korpo>
  <div class = "ujo" > 
    ...
  </div>
</korpo>

Fluida aranĝo

Alternativa, fleksebla fluida paĝa strukturo kun min- kaj max-larĝoj kaj maldekstra flanka kolumno. Bonega por programoj kaj dokumentoj.

<korpo>
  <div class = "ujo-fluido" > 
    <div class = "flankmenuo" > 
      ...
    </div>
    <div class = "enhavo" > 
      ...
    </div>
  </div>
</korpo>

Titolo & kopio

Norma tipografia hierarkio por strukturi viajn retpaĝojn.

La tuta tipografia krado baziĝas sur du Malpli variabloj en nia preboot.less dosiero: @basefontkaj @baseline. La unua estas la baza tiparo-grandeco uzata ĉie kaj la dua estas la bazlinia alteco.

Ni uzas tiujn variablojn, kaj iom da matematiko, por krei la randojn, kompletiĝojn kaj linio-altojn de ĉiuj niaj tipoj kaj pli.

h1. Titolo 1

h2. Titolo 2

h3. Titolo 3

h4. Titolo 4

h5. Titolo 5

h6. Titolo 6

Ekzempla alineo

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.

Ekzempla titolo Havas subtitolon...

Misc. elementoj

Uzante emfazon, adresojn kaj mallongigojn

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

Kiam uzi

Emfazaj etikedoj ( <strong>kaj <em>) estu uzataj por indiki plian gravecon aŭ emfazon de vorto aŭ frazo rilate al ĝia ĉirkaŭa kopio. Uzu <strong>por graveco kaj <em>por streĉo .

Emfazo en alineo

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

Noto: Estas ankoraŭ bone uzi <b>kaj <i>etikedojn en HTML5 kaj ili ne devas esti stilitaj respektive grasa kaj kursiva (kvankam se estas pli semantika elemento, uzu ĝin). <b>celas reliefigi vortojn aŭ frazojn sen transdoni aldonan gravecon, dum <i>estas plejparte por voĉo, teknikaj terminoj ktp.

Adresoj

La <address>elemento estas uzata por kontaktinformoj por sia plej proksima prapatro, aŭ la tuta laboro. Jen kiel ĝi aspektas:

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

Noto: Ĉiu linio en <address>devas finiĝi per linio-rompo ( <br />) aŭ esti envolvita en bloknivela etikedo (ekz. <p>) por taŭge strukturi la enhavon.

Mallongigoj

Por mallongigoj kaj akronimoj, uzu la <abbr>etikedon ( <acronym>estas malrekomendita en HTML5 ). Metu la stenografion en la etikedo kaj starigu titolon por la kompleta nomo.

Blokcitaĵoj

<blockquote> <p> <small>

Kiel citi

Por inkluzivi blokcitaĵon, envolvu kaj <blockquote>etikedu . Uzu la elementon por citi vian fonton kaj vi ricevos em streketon antaŭ ĝi.<p><small><small>&mdash;

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

D-ro Julius Hibbert

Neordigita<ul>

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

Senstila<ul.unstyled>

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

Ordonita<ol>

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

Priskribodl

Priskribolistoj

Priskriba listo estas perfekta por difini terminojn.

Euismod

Vestibulum id ligula porta felis euismod sempre 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.

Konstruante tablojn

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

Tabloj estas bonegaj—por multaj aferoj. Grandaj tabeloj, tamen, bezonas iom da markado-amo por esti utilaj, skaleblaj kaj legeblaj (ĉe la kodnivelo). Jen kelkaj konsiletoj por helpi.

Ĉiam envolvu viajn kolumnajn kapojn en <thead>tia, ke hierarkio estas <thead>> <tr>> <th>.

Simile al la kolumnaj kapoj, la tuta korpenhavo de via tabelo estu envolvita en <tbody>tiel via hierarkio <tbody>> <tr>> <td>.

Ekzemplo: Defaŭltaj tabelstiloj

Ĉiuj tabeloj estos aŭtomate stilitaj kun nur la esencaj randoj por certigi legeblecon kaj konservi strukturon. Ne necesas aldoni kromajn klasojn aŭ atributojn.

#	Antaŭnomo	Familia nomo	Lingvo
1	Iuj	Unu	la angla
2	Joe	Sespako	la angla
3	Stu	Dent	Kodo

<tablo>
  ...
</tablo>

Ekzemplo: Zebro-striita

Fariĝu iom per viaj tabloj aldonante zebro-striadon—nur aldonu la .zebra-stripedklason.

#	Antaŭnomo	Familia nomo	Lingvo
1	Iuj	Unu	la angla
2	Joe	Sespako	la angla
3	Stu	Dent	Kodo

Noto: Zebra-striado estas progresema plibonigo ne havebla por pli malnovaj retumiloj kiel IE8 kaj sube.

<table class = "zebro-striita" > 
...
</tablo>

Ekzemplo: Zebro-striita kun TableSorter.js

Prenante la antaŭan ekzemplon, ni plibonigas la utilecon de niaj tabeloj provizante ordigan funkcion per jQuery kaj la aldonaĵo Tablesorter . Alklaku la kaplinion de iu ajn kolumno por ŝanĝi la ordigon.

#	Antaŭnomo	Familia nomo	Lingvo
1	Vian	Unu	la angla
2	Joe	Sespako	la angla
3	Stu	Dent	Kodo

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<skripto > 
  $ ( funkcio () { 
    $ ( "tabelo#sortTabeloEkzemplo" ). tabelordigilo ({ sortListo : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebro-striita" > 
  ...
</tablo>

Defaŭltaj stiloj

Ĉiuj formoj ricevas defaŭltajn stilojn por prezenti ilin en legebla kaj skalebla maniero. Stiloj estas provizitaj por tekstaj enigaĵoj, elektaj listoj, tekstaj areoj, radiobutonoj kaj markobutonoj kaj butonoj.

Ekzempla formo legendo

X-Granda Enigo

Elektu

1 2 3 4 5

Elektu

1 2 3 4 5

Neredaktebla Enigo

Iom da Valoro Ĉi tie

Malŝaltita Enigo

X-Granda Enigo

Malgranda fragmento de helpteksto

Ekzempla formo legendo

Antaŭmetita Teksto

@

Antaŭmetita Markobutono

Aldonita Markobutono

Dosiera Enigo

Ekzempla formo legendo

Listo de Opcioj

• Unua opcio estas ĉi tio kaj tio—nepre inkluzivu kial ĝi estas bonega
• Opcio du ankaŭ povas esti kontrolita kaj inkluzivita en formrezultoj
• Opcio tri povas - jes, vi divenis - ankaŭ esti kontrolita kaj inkluzivita en formrezultoj
• Opcio kvar ne povas esti kontrolita ĉar ĝi estas malŝaltita.

Noto: Etikedoj ĉirkaŭas ĉiujn eblojn por multe pli grandaj klakaj areoj kaj pli uzebla formo.

Datintervalo

al Ĉiuj tempoj estas montritaj kiel Pacifika Norma Tempo (GMT -08:00).

Tekstaro

Bloko de helpteksto por priskribi la supran kampon se necese.

Listo de Opcioj

• Unua opcio estas ĉi tio kaj tio—nepre inkluzivu kial ĝi estas bonega
• Opcio du ladskatolo estas io alia kaj elektante ĝin malelektos opciojn 1

  Nuligi

Stakitaj formoj

Aldonu .form-stackedal la HTML de via formularo kaj vi havos etikedojn supre de iliaj kampoj anstataŭ maldekstre. Ĉi tio bonege funkcias se viaj formoj estas mallongaj aŭ vi havas du kolumnojn da enigaĵoj por pli pezaj formoj.

Ekzempla formo legendo

X-Granda Enigo

Elektu

1 2 3 4 5

Ekzempla formo legendo

X-Granda Enigo

Malgranda fragmento de helpteksto

Listo de Opcioj

• Unua opcio estas ĉi tio kaj tio—nepre inkluzivu kial ĝi estas bonega
• Opcio du ankaŭ povas esti kontrolita kaj inkluzivita en formrezultoj

Noto: Etikedoj ĉirkaŭas ĉiujn eblojn por multe pli grandaj klakaj areoj kaj pli uzebla formo.

Konservu Ŝanĝojn  Nuligi

Butonoj

Kiel konvencio, butonoj estas uzataj por agoj dum ligiloj estas uzataj por objektoj. Ekzemple, "Elŝutu" povus esti butono kaj "lasta agado" povus esti ligilo.

Ĉiuj butonoj defaŭlte al helgriza stilo, sed kelkaj funkciaj klasoj povas esti aplikataj por malsamaj kolorstiloj. Ĉi tiuj klasoj inkluzivas bluan .primaryklason, helbluan .infoklason, verdan .successklason kaj ruĝan .dangerklason. Plie, ruli viajn proprajn stilojn estas facile facila.

Ekzemplaj butonoj

Butonstiloj povas esti aplikitaj al io ajn kun la .btnaplikata. Kutime vi volas apliki ĉi tiujn nur al <a>, <button>, kaj elektaj <input>elementoj. Jen kiel ĝi aspektas:

Alternaj grandecoj

Ĉu vi volas pli grandajn aŭ pli malgrandajn butonojn? Havu ĝin!

Malfunkciigita ŝtato

Por butonoj, kiuj ne estas aktivaj aŭ estas malŝaltitaj de la programo ial aŭ alia, uzu la malfunkciigitan staton. Tio estas .disabledpor ligiloj kaj :disabledpor <button>elementoj.

Ligiloj

Butonoj

Kio estas tio

Nia supra trinkejo estas fiksa trinkejo, kiu enhavas la emblemon aŭ nomon de retejo, ĉefan navigadon kaj serĉformon.

Agordigebla

Ĉiuj elementoj ene, kaj ankaŭ la tuta supra stango, estas laŭvolaj. Vi povas elekti inkluzivi emblemon/nomon, navigacion, serĉon kaj sekundaran navigacion—aŭ ajnan kombinaĵon de tio.

Dropdowns inkluzivita

Kiel parto de la ĉefa navigado, ni inkluzivis la kapablon por vi aldoni falmenuojn al via navigacio. Rigardu la sekundaran navigacion supre (dekstre vicigita) por vidi kiel ĝi estas farita.

Tabs kaj piloloj

Kreu simplan sekundaran navigadon per <ul>. Interŝanĝu inter langetoj aŭ piloloj aldonante la taŭgan klason.

Bonega por subsekcioj de enhavo kiel niaj kontaj agordaj paĝoj kaj uzanttempaj linioj por ŝanĝi inter paĝoj de simila enhavo. Havebla en klapeta aŭ pilolo stiloj.

• Hejmo
• Profilo
• Mesaĝoj
• Agordoj
• Kontaktu
• Dropdown
  • Malĉefa ligilo
  • Io alia ĉi tie
  • Alia ligilo

<ul class = "langetoj" > 
  <li class = "active" ><a href = "#" > Hejmo </a></li>  
  <li><a href = "#" > Profilo </a></li> 
  <li><a href = "#" > Mesaĝoj </a></li> 
  <li><a href = "#" > Agordoj </a></li> 
  <li><a href = "#" > Kontakto </a></li> 
</ul>

• Hejmo
• Profilo
• Mesaĝoj
• Agordoj
• Kontaktu

<ul class = "piloloj" > 
  <li class = "active" ><a href = "#" > Hejmo </a></li>  
  <li><a href = "#" > Profilo </a></li> 
  <li><a href = "#" > Mesaĝoj </a></li> 
  <li><a href = "#" > Agordoj </a></li> 
  <li><a href = "#" > Kontakto </a></li> 
</ul>

Paĝigo

Ultra simplisma kaj minimume stilita paĝigo inspirita de Rdio. La granda bloko estas malfacile maltrafi, facile skalebla kaj provizas grandajn klakajn areojn.

<div class = "paĝigo" > 
  <ul>
    <li class = "antaŭa malŝaltita" ><a href = "#" > ← Antaŭa </a></li>  
    <li class = "aktiva" ><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 = "sekva" ><a href = "#" > Sekva → </a></li>  
  </ul>
</div>

Bazaj atentigoj

div.alert-message

Unu-liniaj mesaĝoj por reliefigi la fiaskon, eblan malsukceson aŭ sukceson de ago. Aparte utila por formoj.

Bloki mesaĝojn

div.alert-message.block-message

Por mesaĝoj, kiuj postulas iom da klarigo, ni havas alineajn stilajn atentigojn. Ĉi tiuj estas perfektaj por bobeli pli longajn erarmesaĝojn, averti uzanton pri pritraktata ago aŭ simple prezenti informojn por pli emfazo sur la paĝo.

Modaloj

Modaloj—dialogoj aŭ lumketoj—estas bonegaj por kontekstaj agoj en situacioj kie gravas, ke la fonkunteksto estu konservita.

Ilaj Konsiletoj

Twipsies estas tre utilaj por helpi konfuzitan uzanton kaj direkti ilin en la ĝustan direkton.

Popovers

Uzu popovers por provizi subtekstan informon al paĝo sen tuŝi aranĝon.

Bootstrap estis konstruita kun Preboot , malfermfonta pako de miksaĵoj kaj variabloj uzeblaj kune kun Less , CSS-antaŭprocesoro por pli rapida kaj pli facila reto-disvolviĝo.

Rigardu kiel ni uzis Preboot en Bootstrap kaj kiel vi povas uzi ĝin se vi elektas ruli Malpli en via venonta projekto.

Kiel uzi ĝin

Uzu ĉi tiun opcion por plene uzi la Malpli variablojn, miksaĵojn kaj nestumon de Bootstrap en CSS per Javaskripto en via retumilo.

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

Ĉu vi ne sentas la solvon .js? Provu la Less Mac-apon aŭ uzu Node.js por kompili kiam vi disvastigas vian kodon.

Kio estas inkluzivita

Jen kelkaj el la kulminaĵoj de tio, kio estas inkluzivita en Twitter Bootstrap kiel parto de Bootstrap. Iru al la retejo de Bootstrap aŭ al la paĝo de la projekto Github por elŝuti kaj lerni pli.

Variabloj

Variabloj en Less estas perfektaj por konservi kaj ĝisdatigi vian CSS-kapdoloron senpage. Kiam vi volas ŝanĝi kolorvaloron aŭ ofte uzatan valoron, ĝisdatigu ĝin en unu loko kaj vi fartas.

// Ligiloj
@linkColor : #8b59c2;         
@linkColorHover :     mallumigi ( @linkColor , 10 ); 
 
// Grizoj
@nigra : #000;             
@grayDark :           malpezigi ( @nigra , 25 %); 
@griza :               malpezigi ( @nigra , 50 %); 
@grayLight :          malpezigi ( @nigra , 70 %); 
@grayLighter :        malpezigi ( @nigra , 90 %); 
@blanka : #fff;             
 
// Akcentaj Koloroj
@blua : #08b5fb;              
@verda : #46a546;             
@ruĝa : # 9d261d ;               
@flava : #ffc40d;            
@orange : #f89406;            
@rozkolora : #c3325f;              
@purpuro : #7a43b6;            
 
// Bazlinia krado
@bazfont : 13px ;          
@bazlinio : 18px ;          

Komentante

Malpli ankaŭ disponigas alian stilon de komentado krom la normala /* ... */sintakso de CSS.

// Ĉi tio estas komento
/* Ĉi tio ankaŭ estas komento */

Miksas la wazoon

Miksinoj estas esence inkluditaj aŭ partaj por CSS, permesante vin kombini blokon de kodo en unu. Ili estas bonegaj por vendistaj prefiksitaj propraĵoj kiel box-shadow, trans-retumilaraj gradientoj, tiparstakoj kaj pli. Malsupre estas specimeno de la miksaĵoj, kiuj estas inkluzivitaj kun Bootstrap.

Tiparaj stakoj

#tiparo {
  . stenografio ( @pezo : normala , @grandeco : 14px , @lineHeight : 20px ) {     
    tiparo - grandeco : @grandeco ; 
    tiparo - pezo : @pezo ; 
    line - alteco : @lineHeight ; 
  }
  . sans - serif ( @pezo : normala , @grandeco : 14px , @lineHeight : 20px ) {     
    tiparo - familio : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    tiparo - grandeco : @grandeco ; 
    tiparo - pezo : @pezo ; 
    line - alteco : @lineHeight ; 
  }
  . serifo ( @pezo : normala , @grandeco : 14px , @lineHeight : 20px ) {     
    tiparo - familio : "Kartvelio" , Times New Roman , Times , sans - serif ;     
    tiparo - grandeco : @grandeco ; 
    tiparo - pezo : @pezo ; 
    line - alteco : @lineHeight ; 
  }
  . monospaco ( @pezo : normala , @grandeco : 12px , @lineHeight : 20px ) {     
    tiparo - familio : "Monako" , Courier New , monospaco ;   
    tiparo - grandeco : @grandeco ; 
    tiparo - pezo : @pezo ; 
    line - alteco : @lineHeight ; 
  }
}

Gradientoj

#gradiento {
  . horizontala ( @startColor : #555, @endColor: #333) { 
    fono - koloro : @endColor ; 
    fono - ripeti : ripeti - x ;
    fono - bildo : - khtml - gradiento ( lineara , maldekstra supro , dekstra supro , de ( @startColor ), ĝis ( @endColor )); // Konkeranto   
    fono - bildo : - moz - lineara - gradiento ( maldekstre , @startColor , @endColor ); // FF 3.6+    
    fono - bildo : - ms - lineara - gradiento ( maldekstre , @startColor , @endColor ); // IE10    
    fono - bildo : - webkit - gradiento ( linia , maldekstra supro , dekstra supro , koloro - halto ( 0 %, @startColor ), koloro - halto ( 100 %, @endColor )); // Safaro 4+, Chrome 2+    
    fono - bildo : - webkit - lineara - gradiento ( maldekstre , @startColor , @endColor ); // Safaro 5.1+, Chrome 10+    
    fono - bildo : - o - lineara - gradiento ( maldekstre , @startColor , @endColor ); // Opero 11.10    
    fono - bildo : lineara - gradiento ( maldekstre , @startColor , @endColor ); // Le standard   
  }
  . vertikala ( @startColor : #555, @endColor: #333) { 
    fono - koloro : @endColor ; 
    fono - ripeti : ripeti - x ;
    fono - bildo : - khtml - gradiento ( lineara , maldekstra supro , maldekstra malsupro , de ( @startColor ), ĝis ( @endColor )); // Konkeranto   
    fono - bildo : - moz - lineara - gradiento ( @startColor , @endColor ); // FF 3.6+   
    fono - bildo : - ms - lineara - gradiento ( @startColor , @endColor ); // IE10   
    fono - bildo : - webkit - gradiento ( linia , maldekstra supro , maldekstra malsupro , koloro - halto ( 0 %, @startColor ), koloro - halto ( 100 %, @endColor )); // Safaro 4+, Chrome 2+    
    fono - bildo : - webkit - lineara - gradiento ( @startColor , @endColor ); // Safaro 5.1+, Chrome 10+   
    fono - bildo : - o - lineara - gradiento ( @startColor , @endColor ); // Opero 11.10   
    fono - bildo : lineara - gradiento ( @startColor , @endColor ); // La normo  
  }
  . direkta ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertikala - tri - koloroj ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Operacioj kaj kradsistemo

Imagu kaj faru iom da matematiko por generi flekseblajn kaj potencajn miksaĵojn kiel la sube.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Krada Sistemo
. ujo {
  larĝo : @siteWidth ; 
  marĝeno : 0 aŭto ;  
  . clearfix ();
}
. kolumnoj ( @columnSpan : 1 ) {  
  larĝo : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. ofseto ( @kolumnOffset : 1 ) {  
  marĝeno - maldekstra : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}