Nhoroondo

Mumazuva ekutanga eTwitter, mainjiniya akashandisa chero raibhurari yavaiziva kuti isangane nezvinodiwa kumberi. Bootstrap yakatanga semhinduro kumatambudziko akaunza uye kusimudzira kwakakurumidza kukurumidza panguva yekutanga yeTwitter Hackweek.

Nerubatsiro uye nemhinduro yevazhinji mainjiniya paTwitter, Bootstrap yakakura zvakanyanya kusanganisa kwete chete masitaera ekutanga, asi yakanyanya kunaka uye yakasimba yekumberi-yekupedzisira dhizaini mapatani.

Verenga zvimwe pa dev.twitter.com ›

Browser rutsigiro

Bootstrap inoedzwa uye inotsigirwa mumabhurawuza makuru emazuva ano seChrome, Safari, Internet Explorer, uye Firefox.

• Latest Safari
• Yazvino Google Chrome
• Firefox 4+
• Internet Explorer 7+

Chii chinosanganisirwa

Bootstrap inouya yakazara neyakaunganidzwa CSS, isina kuunganidzwa, uye muenzaniso matemplate.

• Mafaira ese ekutanga .less
• Yakazara uye yakagadziriswa CSS
• Zadzisa styleguide zvinyorwa
• Muenzaniso peji template (zvimwe zvichauya munguva pfupi)

Default grid

Iyo yakasarudzika grid system yakapihwa sechikamu cheBootstrap ndeye 940px yakafara 16-column grid. Iko kuravira kweiyo yakakurumbira 960 grid system, asi isina yekuwedzera margin / padding kuruboshwe nekurudyi mativi.

Muenzaniso grid markup

Sezvinoratidzwa pano, hurongwa hwekutanga hunogona kugadzirwa ne "makoroni" maviri, imwe neimwe inotora nhamba yezvikamu gumi nematanhatu zvekutanga zvatakatsanangura sechikamu chegridi yedu. Ona mienzaniso iri pasi apa kuti uwane mamwe misiyano.

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

Fixed layout

Iyo yakakosha 940px yakafara, yakatarisana nemudziyo dhizaini kune chero saiti kana peji.

<muviri>
  <div kirasi = "mudziyo" > 
    ...
  </ div>
</ body>

Fluid marongerwo

A flexible fluid kana liquid peji chimiro chine min- uye max-widths uye kuruboshwe-kuruboshwe. Yakanakira maapplication.

<muviri>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </ div>
    <div kirasi = "zviri mukati" > 
      ...
    </ div>
  </ div>
</ body>

Misoro uye kopi

Yakajairika typographic hierarchy yekugadzira mapeji ako ewebhu.

h1. Musoro 1

h2. Musoro 2

h3. Musoro 3

h4. Musoro wechi4

h5. Musoro 5

h6. Musoro 6

Muenzaniso ndima

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

Musoro wemuenzaniso Une kamusoro-diki...

Misc. zvinhu

Kushandisa kusimbisa, kero, uye zvipfupiso

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

Nguva yekushandisa

Mategi ekusimbisa ( <strong>uye <em>) anofanira kushandiswa kuratidza kukosha kwakawedzerwa kana kusimbisa kweshoko kana chirevo maererano nekopi yakaripoteredza. Shandisa <strong>kukosha uye <em>kusimbisa kusimbisa .

Kusimbisa mundima

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.

Ongorora: Zvichiri zvakanaka kushandisa <b>uye <i>ma tag muHTML5, asi ivo havachauyi nemasikirwo emukati zvakare. <b>inoitirwa kuratidza mazwi kana mitsara pasina kuwedzera kukosha, asi <i>kazhinji ndeyeizwi, tekinoroji mazwi, nezvimwe.

Kero

Icho <address>chinhu chinoshandiswa kune ruzivo rwekusangana kune tateguru waro wepedyo, kana boka rese rebasa. Heino maitiro azvinotaridzika:

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

Cherechedzo: Mutsetse wega wega mumutsara <address>unofanirwa kupera nemutsara-kutyora ( <br />) kana kuputirwa mu block-level tag (eg, <p>) kuronga zvakanaka zvirimo.

Madimburiko

Pamapfupiso nemaacronyms, shandisa iyo <abbr>tag ( <acronym>yakadzikiswa muHTML5 ). Isa iyo shorthand fomu mukati me tag uye isa zita rezita rakazara.

Blockquotes

<blockquote> <p> <small>

Nzira yekutaura sei

Kusanganisira blockquote, peta <blockquote>kumativi <p>uye <small>ma tag. Shandisa <small>chinhu kutaura kwaunobva uye iwe uchawana em dash —pamberi payo.

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

Dr. Julius Hibbert

Zvisina kurairwa<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis mu 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

Unstyled<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis mu 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

Ordered<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis mu pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Tsanangudzodl

Tsanangudzo mazita

Rondedzero yerondedzero yakakwana pakutsanangura mazwi.

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.

Kuvaka matafura

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

Matafura akanaka-kune zvinhu zvakawanda. Matafura makuru, zvisinei, anoda chidimbu cherudo rwemarkup kuti rubatsire, scalable, uye kuverenga (padanho rekodhi). Heano mazano mashoma ekubatsira.

Gara uchiputira makoramu misoro yako mune <thead>yakadaro iyo hierarchy iri <thead>> <tr>> <th>.

Zvakafanana nemusoro wembiru, zvese zvemuviri wetafura yako zvinofanirwa kuputirwa mukuti hutongi hwako <tbody>huve <tbody>> <tr>> <td>.

Muenzaniso: Default table styles

Matafura ese anozoitwa otomatiki aine miganhu yakakosha chete kuve nechokwadi chekuverenga uye kuchengetedza chimiro. Hapana chikonzero chekuwedzera mamwe makirasi kana hunhu.

#	Zita rokutanga	Zita rokupedzisa	Mutauro
1	Vamwe	Poshi	Chirungu
2	Joe	Sixpack	Chirungu
3	Stu	Dent	Code

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

Muenzaniso: Mbizi ine mitsetse

Wana shoo shoma nematafura ako nekuwedzera mbizi-striping-ingowedzera .zebra-stripedkirasi.

#	Zita rokutanga	Zita rokupedzisa	Mutauro
1	Vamwe	Poshi	Chirungu
2	Joe	Sixpack	Chirungu
3	Stu	Dent	Code

Cherechedzo: Zebra-striping inoenderera mberi isingawanikwe kumabhurawuza echikuru seIE8 uye pazasi.

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

Muenzaniso: Zebra-striped w/ TableSorter.js

Tichitora muenzaniso wekare, tinovandudza kukosha kwematafura edu nekupa mashandiro ekugadzirisa kuburikidza nejQuery neTablesorter plugin . Dzvanya musoro wechero chikamu kuti uchinje rudzi.

#	Zita rokutanga	Zita rokupedzisa	Mutauro
1	Your	Poshi	Chirungu
2	Joe	Sixpack	Chirungu
3	Stu	Dent	Code

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<script > 
  $ ( basa () { 
    $ ( "tafura#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<tafura yekirasi = "yakajairwa-tafura zebra-mitsetse" > 
  ...
</ table>

Default styles

Mafomu ese anopihwa zvitaera zvekusarudzika kuti azviratidze nenzira inoverengeka uye inorema. Zvitaera zvinopihwa zvekupinza zvinyorwa, sarudza zvinyorwa, zvinyorwa, mabhatani eredhiyo uye mabhokisi ekutarisa, uye mabhatani.

Muenzaniso fomu legend

X-Yakakura Input

Sarudza

1 2 3 4 5

Sarudza

1 2 3 4 5

Uneditable Input

Zvimwe Kukosha Pano

Disabled Input

X-Yakakura Input

Chidimbu chemashoko erubatsiro

Muenzaniso fomu legend

Prepended Text

@

Prepended Checkbox

Yakawedzerwa Checkbox

File Input

Muenzaniso fomu legend

List of Options

• Sarudzo yekutanga ndeichi neicho-iva nechokwadi chekusanganisira kuti sei zvakanaka
• Sarudzo yechipiri inogonawo kutariswa uye kuverengerwa mumibairo yefomu
• Sarudzo yechitatu inogona-hongu, waifungidzira-inotariswawo uye inosanganisirwa mumibairo yefomu
• Sarudzo yechina haigone kutariswa sezvo yakavharwa.

Cherechedza: Mabhii anotenderedza sarudzo dzese dzenzvimbo dzakakura dzekudzvanya uye fomu rinoshandiswa.

Date Range

ku Nguva dzese dzinoratidzwa sePacific Standard Time (GMT -08:00).

Textarea

Runyoro rwechivharo cherubatsiro kutsanangura ndima iri pamusoro kana zvichidikanwa.

List of Options

• Sarudzo yekutanga ndeichi neicho-iva nechokwadi chekusanganisira kuti sei zvakanaka
• Sarudzo yechipiri inogonawo kutariswa uye kuverengerwa mumibairo yefomu

Chengetedza Kuchinja  Kanzura

Akaturikidzana mafomu

Wedzera .form-stackedkune fomu yako HTML uye iwe unenge uine mavara pamusoro peminda yavo pane kuruboshwe kwavo. Izvi zvinoshanda zvakanaka kana mafomu ako ari mapfupi kana uine makoramu maviri ezvekupinza mafomu anorema.

Muenzaniso fomu legend

X-Yakakura Input

Sarudza

1 2 3 4 5

Muenzaniso fomu legend

X-Yakakura Input

Chidimbu chemashoko erubatsiro

List of Options

• Sarudzo yekutanga ndeichi neicho-iva nechokwadi chekusanganisira kuti sei zvakanaka
• Sarudzo yechipiri inogonawo kutariswa uye kuverengerwa mumibairo yefomu

Cherechedza: Mabhii anotenderedza sarudzo dzese dzenzvimbo dzakakura dzekudzvanya uye fomu rinoshandiswa.

Chengetedza Kuchinja  Kanzura

Mabhatani

Semusangano, mabhatani anoshandiswa kuita zviito nepo zvinongedzo zvichishandiswa kuzvinhu. Semuyenzaniso, "Kudhaunirodha" rinogona kunge riri bhatani uye "zvichangobva kuitika" rinogona kunge riri chinongedzo.

Ese mabhatani anogara kune yakareruka grey maitiro, asi yebhuruu .primarykirasi inowanikwa. Uyezve, kutenderedza masitaera ako kuri nyore peasy.

Mabhatani emuenzaniso

Mabhatani masitayera anogona kuiswa kune chero chinhu chine .btnyakaiswa. Kazhinji iwe unozoda kushandisa izvi kune chete <a>, <button>, uye sarudza <input>zvinhu. Heino maitiro azvinotaridzika:

Alternate sizes

Unoda mabhatani makuru kana madiki? Iva nazvo!

Disabled state

Kune mabhatani asiri kushanda kana akadzimwa neapp nechikonzero chimwe kana chimwe, shandisa yakaremara nyika. Ndiko .disabledkune zvinongedzo uye :disabledzvezvinhu <button>.

Links

Mabhatani

Chii

Yedu yepamusoro bhaa yakamiswa inogara logo yewebhusaiti kana zita, yekutanga navigation, uye fomu yekutsvaga.

Customizable

Zvese zvinhu mukati, uye iyo topbar yese zvakare, ndeye sarudzo. Iwe unogona kusarudza kuisa logo/zita, nav, kutsvaga, uye yechipiri nav-kana chero musanganiswa weizvozvo.

Dropdowns inosanganisirwa

Sechikamu chekufambisa kukuru, takabatanidza kugona kwako kuwedzera zvinodonhedza kune yako nav. Tarisa uone yechipiri nav pamusoro (yakatarisana kurudyi) kuti uone kuti zvinoitwa sei.

Tabs nemapiritsi

Gadzira yakapusa yechipiri navigation ne <ul>. Chinjana pakati pematabhu kana mapiritsi nekuwedzera kirasi yakakodzera.

Yakanakira zvikamu zvidiki zvemukati senge mapeji eakaundi yedu yekuseta uye nguva dzevashandisi dzekushandura pakati pemapeji ezvakafanana. Inowanikwa mune tabbed kana mapiritsi maitiro.

• Kumba
• Profile
• Mharidzo
• Settings
• Contact

<ul class = "tabs" > 
  <li class = "active" ><a href = "#"> Kumba </a></li >  
  <li><a href = "#"> Profile </a> </li> 
  <li><a href = "#" > Mharidzo </a></li> 
  <li><a href = "#" > Zvirongwa </a></li> 
  <li><a href = "#"> Contact </a> </li> 
</ul>

• Kumba
• Profile
• Mharidzo
• Settings
• Contact

<ul class = "mapiritsi" > 
  <li class = "active" ><a href = "#"> Kumba </a></li >  
  <li><a href = "#"> Profile </a> </li> 
  <li><a href = "#" > Mharidzo </a></li> 
  <li><a href = "#" > Zvirongwa </a></li> 
  <li><a href = "#"> Contact </a> </li> 
</ul>

Pagination

Ultra yakapfava uye yakashongedzerwa pagination yakafemerwa neRdio. Iyo yakakura block inonetsa kupotsa, nyore scalable, uye inopa hombe yekudzvanya nzvimbo.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Yakapfuura </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 = "inotevera" ><a href = "#" > Inotevera → </a></li>  
  </ul>
</ div>

Basic alerts

One-line meseji yekujekesa kutadza, kutadza kukwanisika, kana kubudirira kwechiito. Kunyanya kubatsira kune mafomu.

Vhara mameseji

Kune meseji inoda tsananguro yakati wandei, tine ziviso yemaitiro endima. Aya akanakira kubhuroka mameseji ezvikanganiso akareba, kunyevera mushandisi nezvechiito chakamirira, kana kungopa ruzivo rwekusimbisa zvakanyanya pane peji.

Modals

Modals-dialogs kana lightboxes-akanaka kune zviito zvemukati mumamiriro ezvinhu apo zvakakosha kuti mamiriro ekumashure achengetwe.

Tool Mazano

Twipsies inonyanya kubatsira kubatsira mushandisi akavhiringidzika uye kuvanongedzera munzira kwayo.

Popover

Shandisa mapopovers kupa subtextual ruzivo kune peji pasina kukanganisa marongero.

Bootstrap yakavakwa ne Preboot , yakavhurika-sosi paki yemamikisi uye zvinosiyana-siyana kuti zvishandiswe pamwe neZvishoma , CSS preprocessor yekukurumidza uye nyore webhu kuvandudza.

Tarisa uone mashandisiro atakaita Preboot muBootstrap uye kuti ungaishandisa sei kana ukasarudza kumhanya Zvishoma pane yako inotevera purojekiti.

Kuishandisa sei

Shandisa sarudzo iyi kushandisa zvizere zveBootstrap's Zvishoma zvinosiyana, musanganiswa, uye nesting muCSS kuburikidza nejavascript mubrowser yako.

<link rel = "stylesheet/shoma" href = "shoma/bootstrap.less" media = "zvose" />    
<script src = "js/less-1.0.41.min.js" > </script> 

Hausi kunzwa mhinduro ye.js? Edza iyo Less Mac app kana shandisa Node.js kuunganidza paunotumira kodhi yako.

Chii chinosanganisirwa

Heano mamwe emhando yepamusoro yezvinosanganisirwa mu Twitter Bootstrap sechikamu cheBootstrap. Tungamira kune iyo Bootstrap webhusaiti kana Github purojekiti peji kuti utore uye udzidze zvimwe.

Mavara akasiyana

Variables muZvishoma dzakakwana kuchengetedza nekugadzirisa CSS yako musoro wemahara. Paunenge uchida kushandura kukosha kweruvara kana kukosha kunowanzo shandiswa, gadziridza munzvimbo imwechete uye unogadzika.

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

Kutsinhira

Zvishoma zvinopawo imwe nzira yekupindura mukuwedzera kune CSS's yakajairika /* ... */syntax.

// Ichi ndicho chirevo
/* Ichi zvakare chirevo */

Inosanganisa iyo wazoo

Mixins anonyanya kusanganisira kana zvidimbu zveCSS, zvichikutendera kuti ubatanidze bhuroka rekodhi kuita rimwe. Iwo akakurisa kune mutengesi prefixed zvivakwa senge box-shadow, muchinjika-browser gradients, font stacks, nezvimwe. Pazasi pane muenzaniso wemasanganiswa anosanganisirwa neBootstrap.

Mafonti akaturikidzana

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

Gradients

#gradient {
  . yakachinjika ( @startColor : #555, @endColor: #333) { 
    background - color : @endColor ; 
    kumashure - dzokorora : dzokorora - x ;
    background - image : - khtml - gradient ( linear , left top , right top , from ( @startColor ), kusvika ( @endColor )); // Konqueror   
    kumashure - mufananidzo : - moz - mutsara - gradient ( kuruboshwe , @startColor , @endColor ); // FF 3.6+    
    kumashure - mufananidzo : - ms - mutsara - gradient ( kuruboshwe , @startColor , @endColor ); // IE10    
    background - image : - webkit - gradient ( linear , left top , right top , color - stop ( 0 %, @startColor ), ruvara - mira ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    kumashure - mufananidzo : - webkit - linear - gradient ( kuruboshwe , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    kumashure - mufananidzo : - o - mutsara - gradient ( kuruboshwe , @startColor , @endColor ); // Opera 11.10    
    - ms - sefa : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    sefa : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    kumashure - mufananidzo : mutsara - gradient ( kuruboshwe , @startColor , @endColor ); // Le standard   
  }
  . yakatwasuka ( @startColor : #555, @endColor: #333) { 
    background - color : @endColor ; 
    kumashure - dzokorora : dzokorora - x ;
    kumashure - mufananidzo : - khtml - gradient ( linear , kuruboshwe kumusoro , kuruboshwe pasi , kubva ( @startColor ), kusvika ( @endColor )); // Konqueror   
    background - mufananidzo : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    background - mufananidzo : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    kumashure - mufananidzo : - webkit - gradient ( linear , kuruboshwe kumusoro , kuruboshwe pasi , ruvara - kumira ( 0 %, @startColor ), ruvara - kumira ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    kumashure - mufananidzo : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    kumashure - mufananidzo : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - sefa : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    sefa : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    kumashure - mufananidzo : mutsara - gradient ( @startColor , @endColor ); // Chiyero  
  }
  . directional ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . yakatwasuka - matatu - mavara ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Kushanda uye grid system

Wana fancy uye ita masvomhu kuti ugadzire inoshanduka uye ine simba musanganiswa senge iri pazasi.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Grid System
. mudziyo {
  upamhi : @siteWidth ; 
  kumucheto : 0 auto ;  
  . clearfix ();
}
. mbiru ( @columnSpan : 1 ) {  
  kuratidza : inline ; 
  float : left ;
  hupamhi : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  kumucheto - kuruboshwe : @gridGutterWidth ; 
  & : mwana wekutanga {
    kumucheto - kuruboshwe : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  kumucheto - kuruboshwe : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ) zvakakosha ;          
}