Gridi ea kamehla

Sistimi ea grid ea kamehla e fanoeng e le karolo ea Bootstrap ke gridi e bophara ba 16-column ea 940px. Ke tatso ea sistimi e tsebahalang ea grid ea 960, empa ntle le marang-rang / padding ka lehlakoreng le letšehali le le letona.

Mohlala oa marang-rang

Joalokaha ho bontšitsoe mona, moralo oa motheo o ka etsoa ka "likholomo" tse peli, e 'ngoe le e' ngoe e nka palo ea litšiea tse 16 tseo re li hlalositseng e le karolo ea tsamaiso ea rona ea marang-rang. Sheba mehlala e ka tlase bakeng sa mefuta e meng e fapaneng.

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

Sebopeho se tsitsitseng

Sebaka sa mantlha sa 940px ka bophara, se bohareng bakeng sa sebaka kapa leqephe lefe kapa lefe.

<'mele>
  <div class = "setshelo" > 
    ...
  </ div>
</ mmele>

Sebopeho sa mokelikeli

Mokelikeli o feto-fetohang kapa sebopeho sa leqephe la metsi le nang le min- le max-widths le lehlakore le letšehali. E ntle bakeng sa lisebelisoa.

<'mele>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </ div>
    <div class = "dikahare" > 
      ...
    </ div>
  </ div>
</ mmele>

Lihlooho le kopi

Lethathamo le tloaelehileng la typographic bakeng sa ho hlophisa maqephe a hau a tepo.

h1. Sehlooho sa 1

h2. Sehlooho sa 2

h3. Sehlooho sa 3

h4. Sehlooho sa 4

h5. Sehlooho sa 5

h6. Sehlooho sa 6

Serapa sa mohlala

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.

Sehloho sa mohlala Se na le sehloohoana...

U ka boela ua eketsa lihloohoana tse nang le <strong>le<em>

Tse ling likarolo

Ho sebelisoa khatiso, liaterese le khutsufatso

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

Nako ea ho sebelisoa

Li-tag tsa khatiso ( <strong>le <em>) li lokela ho sebelisoa ho eketsa phapang pakeng tsa lentsoe kapa poleloana le kopi ea lona e potolohileng. Sebelisa <strong>bakeng sa tlhokomelo e hlakileng ea khale le <em>bakeng sa tlhokomelo e thellang le litlotla.

Ho hatisoa serapeng

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

Liaterese

The addresselement e sebelisoa bakeng sa - u e hakantse!— liaterese. Mona ke kamoo e shebahalang kateng:

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

Tlhokomeliso: Mola o mong le o mong o addresstlameha ho qetella ka ho khaoha ( <br />) ho hlophisa litaba hantle kamoo li baloang bophelong ba sebele ntle le ho sebelisoa ha mekhoa efe kapa efe.

Likgutsufatso

Bakeng sa khutsufatso le li-acronyms, sebelisa abbrtag ( acronyme tlositsoe ho HTML5 ). Beha foromo e khuts'oane ka har'a tag ebe u beha sehlooho sa lebitso le felletseng.

Mantsoe a thibelang

<blockquote> <p> <cite>

Etsa bonnete ba hore o phuthela le li blockquote- tag tsa hau. Ha u qotsa mohloli, sebelisa element. CSS e tla itlhahisa ka bo eona lebitso ka em dash (—).paragraphcitecite

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

Ngaka Julius Hibbert

Ha ea laeloa<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Metsoalle ea Ka
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Johanne Jakobo
• Paul Pierce
• Kevin Garnett

Unstyled<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Metsoalle ea Ka
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Johanne Jakobo
• Paul Pierce
• Kevin Garnett

E laetsoe<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Metsoalle ea Ka
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. Johanne Jakobo
7. Paul Pierce
8. Kevin Garnett

Tlhalosodl

Manane a tlhaloso

Lethathamo la litlhaloso le nepahetse bakeng sa ho hlalosa mantsoe.

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.

Ho aha litafole

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

Litafole li ntle - bakeng sa lintho tse ngata. Litafole tse kholo, leha ho le joalo, li hloka lerato la "markup" hore le be molemo, le fokotsehe, 'me le balehe (boemong ba khoutu). Litlhahiso tse 'maloa tse ka u thusang ke tsena.

Ka linako tsohle phuthela lihlooho tsa kholomo ea hau ka tsela theadeo bolaoli bo leng teng thead> tr> th.

Joalo ka lihlooho tsa kholomo, litaba tsohle tsa 'mele oa tafole ea hau li lokela ho koaheloa ka hore sehlopha sa tbodyhau sa maemo ke tbody> tr> td.

Mohlala: Mekhoa ea litafole ea kamehla

Litafole tsohle li tla etsoa ka mokhoa oa boiketsetso ka meeli ea bohlokoa feela ho netefatsa hore li balehe le ho boloka sebopeho. Ha ho hlokahale ho eketsa litlelase kapa litšobotsi tse ling.

#	Lebitso la pele	Fane	Puo
1	Ba bang	E 'ngoe	Senyesemane
2	Joe	Sixpack	Senyesemane
3	Stu	Sebono	Khoutu

<table class="common-table"> sehlopha = "tafole e tloaelehileng" >
  ...
</tafole>

Mohlala: Qoaha e metsero

Fumana monate ka litafole tsa hau ka ho eketsa liqoaha-tsenya .zebra-stripedsehlopha.

#	Lebitso la pele	Fane	Puo
1	Ba bang	E 'ngoe	Senyesemane
2	Joe	Sixpack	Senyesemane
3	Stu	Sebono	Khoutu

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

Mohlala: Zebra-striped w/ TableSorter.js

Ho nka mohlala o fetileng, re ntlafatsa molemo oa litafole tsa rona ka ho fana ka ts'ebetso ea ho hlophisa ka jQuery le plugin ea Tablesorter . Tobetsa sehlooho sa kholomo efe kapa efe ho fetola mofuta.

#	Lebitso la pele	Fane	Puo
1	Hao	E 'ngoe	Senyesemane
2	Joe	Sixpack	Senyesemane
3	Stu	Sebono	Khoutu

<mofuta oa mongolo = "text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
< mofuta oa mongolo = "mongolo / javascript" > 
  $ ( tokomane ). loketse ( mosebetsi () { 
    $ ( "tafole#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
< sehlopha sa tafole = "tse tloaelehileng-tafole liqoaha tse mebala-bala" > 
  ...
</tafole>

Mekhoa ea kamehla

Liforomo tsohle li fuoa mekhoa e sa lekanyetsoang ho li hlahisa ka mokhoa o balehang le o qhekellang. Litaele li fanoe bakeng sa ho kenya mongolo, ho khetha manane, libaka tsa mongolo, likonopo tsa seea-le-moea le li-checkbox, le likonopo.

Tšōmo ea sebopeho sa mohlala

Kenyeletso ea X-E kholo

Khetha

1 2 3 4 5

Khetha

1 2 3 4 5

Kenyo e sa Fetoheng

Boleng bo itseng Mona

Kenyelletso e Tiisitsoeng

Kenyeletso ea X-E kholo

Sekhechana se senyane sa mongolo oa thuso

Tšōmo ea sebopeho sa mohlala

Mongolo o Reriloeng Pele

@

Lebokose la ho Hlahloba le Hlophisitsoeng

Lebokose la ho hlahloba le kentsoeng

Kenyo ea Faele

Tšōmo ea sebopeho sa mohlala

Lethathamo la Likhetho

• Khetho ea pele ke ena le eane-etsa bonnete ba hore o kenyelletsa hore na hobaneng e le ntle
• Khetho ea bobeli e ka hlahlojoa le ho kenyelletsoa liphethong tsa foromo
• Khetho ea boraro e ka—e, u e hakanyelitse—hape e ka hlahlojoa le ho kenyelletsoa liphethong tsa foromo
• Khetho ea bone e ke ke ea hlahlojoa kaha e koetsoe.

Tlhokomeliso: Li-labels li pota-potile likhetho tsohle bakeng sa libaka tse kholoanyane tsa ho tobetsa le foromo e sebetsang haholoanyane.

Letsatsi Range

ho Linako tsohle li hlahisoa e le Nako e Tloaelehileng ea Pacific (GMT -08:00).

Textarea

Sengoloa sa thuso se hlalosang karolo e kaholimo ha ho hlokahala.

Lethathamo la Likhetho

• Khetho ea pele ke ena le eane-etsa bonnete ba hore o kenyelletsa hore na hobaneng e le ntle
• Khetho ea bobeli e ka hlahlojoa le ho kenyelletsoa liphethong tsa foromo

Boloka Liphetoho Hlakola

Liforomo tse pakiloeng

Eketsa .form-stackedho HTML ea foromo ea hau 'me u tla ba le lileibole ka holim'a masimo a tsona ho fapana le ho le letšehali. Sena se sebetsa hantle haeba liforomo tsa hau li le khuts'oane kapa u na le mela e 'meli ea litlatsetso bakeng sa liforomo tse boima.

Tšōmo ea sebopeho sa mohlala

Kenyeletso ea X-E kholo

Khetha

1 2 3 4 5

Tšōmo ea sebopeho sa mohlala

Lethathamo la Likhetho

• Khetho ea pele ke ena le eane-etsa bonnete ba hore o kenyelletsa hore na hobaneng e le ntle
• Khetho ea bobeli e ka hlahlojoa le ho kenyelletsoa liphethong tsa foromo

Tlhokomeliso: Li-labels li pota-potile likhetho tsohle bakeng sa libaka tse kholoanyane tsa ho tobetsa le foromo e sebetsang haholoanyane.

Boloka Liphetoho Hlakola

Likonopo

Joalo ka kopano, likonopo li sebelisetsoa liketso ha lihokelo li sebelisetsoa lintho. Mohlala, "Khoasolla" e ka ba konopo mme "ts'ebetso ea morao-rao" e ka ba sehokelo.

Likonopo tsohle li ikamahanya le mokhoa o moputsoa o bobebe, empa mofuta o moputsoa .primaryoa fumaneha. Ho feta moo, ho roala setaele sa hau ho bonolo.

Likonopo tsa mohlala

Mefuta ea likonopo e ka sebelisoa ho eng kapa eng e .btnsebelisitsoeng. Ka tloaelo u tla batla ho sebelisa tsena feela ho a, button, le ho khetha inputlikarolo. Mona ke kamoo e shebahalang kateng:

Mefuta e fapaneng

U batla likonopo tse kholoanyane kapa tse nyane? E be le eona!

Boemo ba bokooa

Bakeng sa likonopo tse sa sebetseng kapa tse koetsoeng ke sesebelisoa ka mabaka a mang, sebelisa boemo ba batho ba holofetseng. Ke tsa .disabledlihokelo le :disabledtsa buttonlikarolo.

Lihokelo

Likonopo

Ke eng

Topbar ea rona ke bar e tsitsitseng e bolokang logo kapa lebitso la sebaka sa Marang-rang, navigation ea mantlha, le foromo ea ho batla.

Customizable

Likarolo tsohle tse ka hare, le topbar kaofela, ke boikhethelo. U ka khetha ho kenyelletsa logo/lebitso, nav, search, le nav ea bobeli-kapa motsoako ofe kapa ofe oa seo.

Li-dropdown li kenyelelitsoe

Joalo ka karolo ea mantlha ea ho sesa, re kenyelelitse bokhoni ba hore u kenye litheolelo ho nav ea hau. Sheba nav ea bobeli ka holimo (e eme ka ho le letona) ho bona hore na e etsoa joang.

Li-tab le lipilisi

Etsa mokhoa o bonolo oa ho tsamaea oa bobeli ka ul. Fetola pakeng tsa li-tab kapa lipilisi ka ho eketsa sehlopha se nepahetseng.

E nepahetse bakeng sa likaroloana tsa litaba joalo ka maqephe a litlhophiso tsa ak'haonte le linako tsa basebelisi bakeng sa ho fetola maqephe a litaba tse tšoanang. E fumaneha ka mefuta ea li-tabbed kapa lipilisi.

• Lehae
• Profile
• Melaetsa
• Litlhophiso
• Ikopanye

<ul class="tabs"> sehlopha = "tabs" >
  <li class = "active" ><a href = ""> Lehae </a></li >  
  <li><a href = ""> Boemo </a> </li> 
  <li><a href = ""> Melaetsa </a> </li> 
  <li><a href = ""> Litlhophiso </a> </li> 
  <li><a href = ""> Ikopanye </a> </li> 
</ul>

• Lehae
• Profile
• Melaetsa
• Litlhophiso
• Ikopanye

<ul class="pills"> sehlopha = "lipilisi" >
  <li class = "active" ><a href = ""> Lehae </a></li >  
  <li><a href = ""> Boemo </a> </li> 
  <li><a href = ""> Melaetsa </a> </li> 
  <li><a href = ""> Litlhophiso </a> </li> 
  <li><a href = ""> Ikopanye </a> </li> 
</ul>

Pagination

Mokhoa o bonolo le o sa reng letho oa pagination o khothalelitsoeng ke Rdio. Sebaka se seholo se thata ho fosa, se ka senyeha habonolo, 'me se fana ka libaka tse kholo tsa ho tobetsa.

<div class="pagination"> sehlopha = "pagination" >
  <ul>
    <li class = "prev disabled" ><a href = "" > ← E fetileng </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 = ""> E latelang & rarr ; </a></li>  
  </ul>
</ div>

Litemoso tsa mantlha

Melaetsa ea mola o le mong bakeng sa ho totobatsa ho hloleha, ho hloleha ho ka bang teng, kapa katleho ea ketso. E bohlokoa haholo bakeng sa liforomo.

Thibela melaetsa

Bakeng sa melaetsa e hlokang tlhaloso e nyenyane, re na le litlhokomeliso tsa mokhoa oa lirapa. Tsena li nepahetse bakeng sa ho fana ka melaetsa e telele ea liphoso, ho lemosa mosebelisi ka ketso e sa lebelloang, kapa ho hlahisa tlhahisoleseling bakeng sa khatiso e eketsehileng leqepheng.

Mekhoa e metle

Li-modals-dialogs kapa lightboxes-li ntle bakeng sa liketso tsa maemo maemong ao ho leng bohlokoa hore maemo a ka morao a bolokehe.

Bafutsana

Sebelisa li-popovers ho fana ka lintlha tse tlase ho leqephe ntle le ho fetola sebopeho.

Bootstrap e hahiloe ka Preboot , pakete e bulehileng ea li-mixins le mefuta e fapaneng e lokelang ho sebelisoa hammoho le Less , CSS preprocessor bakeng sa tsoelo-pele ea websaete e potlakileng le e bonolo.

Sheba hore na re sebelisitse Preboot joang ho Bootstrap le hore na u ka e sebelisa joang ha u ka khetha ho sebetsa ka tlase ho projeke ea hau e latelang.

Mokhoa oa ho e sebelisa

Sebelisa khetho ena ho sebelisa ka botlalo mefuta-futa ea Bootstrap's Less Less, metsoako, le nesting ho CSS ka javascript ho sebatli sa hau.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/ less" type = "text/css" href = "less/bootstrap.less" media = "tsohle" />    
< mofuta oa mongolo = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Ha u utloe tharollo ea .js? Leka sesebelisoa sa Less Mac kapa sebelisa Node.js ho bokella ha o tsamaisa khoutu ea hau.

Se kenyellelitsoeng

Mona ke tse ling tsa lintlha-khōlō tsa se kenyellelitsoeng ho Twitter Bootstrap e le karolo ea Bootstrap. E fetela ho webosaete ea Bootstrap kapa leqephe la projeke ea Github ho jarolla le ho ithuta haholoanyane.

Mefuta e fapaneng ea mebala

Liphetoho ho tse Nyenyane li nepahetse bakeng sa ho boloka le ho nchafatsa hlooho ea hau ea CSS mahala. Ha u batla ho fetola boleng ba 'mala kapa boleng bo sebelisoang khafetsa, e nchafatse sebakeng se le seng 'me u sete.

// Lihokelo
@linkColor : #8b59c2;         
@linkColorHover :     fifala ( @linkColor , 10 ); 
// Meputsoana
@batsho : #000;             
@grayDark :           khantša ( @black , 25 %); 
@gray :               khantša ( @black , 50 %); 
@grayLight :          khantša ( @black , 70 %); 
@grayLighter :        khantša ( @black , 90 %); 
@tšoeu : #fff ;             
// Mebala ya Puo
@putsoa : #08b5fb;              
@tala : #46a546;             
@khubelu : #9d261d;               
@mosehla : #ffc40d;            
@orange : #f89406;            
@pinki : #c3325f;              
@pherese : #7a43b6;            
// Motheo
@baseline : 20px ;          

Ho fana ka maikutlo

Less e boetse e fana ka mokhoa o mong oa ho fana ka maikutlo ho phaella ho /* ... */syntax e tloaelehileng ea CSS.

// Ena ke tlhaloso
/* Hona hape ke maikutlo */

E kopanya "wazoo".

Li-mixins ha e le hantle li kenyelletsa kapa likaroloana tsa CSS, li u lumella ho kopanya boloko ba khoutu ho e le 'ngoe. Li ntle bakeng sa thepa e kentsoeng pele ea barekisi joalo ka box-shadow, li-gradients tsa sebatli, mekotla ea litlhaku, le tse ling. Ka tlase ke mohlala oa li-mixins tse kenyellelitsoeng le Bootstrap.

Melato ea litlhaku

#mongolo {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
boholo ba     mongolo : @size ; 
    fonte - boima : @weight ; 
    mola - bophahamo : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - lelapa : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
boholo ba     mongolo : @size ; 
    fonte - boima : @weight ; 
    mola - bophahamo : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
boholo ba     mongolo : @size ; 
    fonte - boima : @weight ; 
    mola - bophahamo : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
boholo ba     mongolo : @size ; 
    fonte - boima : @weight ; 
    mola - bophahamo : @lineHeight ; 
  }
}

Gradients

#gradient {
  . rapama ( @startColor : #555, @endColor: #333) { 
    bokamorao - mmala : @endColor ; 
    bokamorao - pheta-pheta : pheta - x ;
    bokamorao - setšoantšo : - khtml - gradient ( linear , left top , right top , ho tloha ( @startColor ), ho ea ( @endColor )); // Mokgosi   
    bokamorao - setšoantšo : - moz - linear - gradient ( le letšehali , @startColor , @endColor ); // FF 3.6+    
    bokamorao - setšoantšo : - ms - linear - gradient ( ka ho le letšehali , @startColor , @endColor ); // IE10    
    bokamorao - setšoantšo : - webkit - gradient ( linear , holimo ka ho le letšehali, holimo ka ho le letona , 'mala - emisa ( 0 %, @startColor ), mmala - emisa ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    bokamorao - setšoantšo : - webkit - linear - gradient ( le letšehali , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    bokamorao - setšoantšo : - o - linear - gradient ( le letšehali , @startColor , @endColor ); // Opera 11.10    
    - ms - sefa : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    sefe : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    bokamorao - setšoantšo : linear - gradient ( left , @startColor , @endColor ); // Le standard   
  }
  . e thethehileng ( @startColor : #555, @endColor: #333) { 
    bokamorao - mmala : @endColor ; 
    bokamorao - pheta-pheta : pheta - x ;
    bokamorao - setšoantšo : - khtml - gradient ( linear , left top , left bottom , ho tloha ( @startColor ), ho ea ( @endColor )); // Mokgosi   
    bokamorao - setšoantšo : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    bokamorao - setšoantšo : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    bokamorao - setšoantšo : - webkit - gradient ( linear , holimo ka ho le letšehali , tlase ka ho le letšehali , mmala - emisa ( 0 %, @startColor ), mmala - emisa ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    bokamorao - setšoantšo : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    bokamorao - setšoantšo : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - sefa : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    sefe : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    bokamorao - setšoantšo : linear - gradient ( @startColor , @endColor ); // Boemo  
  }
  . tataiso ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . e emeng - e meraro - mebala ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Ts'ebetso le sistimi ea grid

E-ba majabajaba 'me u etse lipalo ho hlahisa metsoako e tenyetsehang le e matla joalo ka e ka tlase.

// Bokgale
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Sistimi ea Grid
. setshelo {
  bophara : @siteWidth ; 
  moeli : 0 auto ;  
  . clearfix ();
}
. likholomo ( @columnSpan : 1 ) {  
  pontšo : inline ; 
  phaphamala : le letšehali ;
  bophara : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margin - ka ho le letšehali : @gridGutterWidth ; 
  &: ngoana oa pele {
    moeli - ka ho le letšehali : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - ka ho le letšehali : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! bohlokoa ;          
}