Hītori

I nga ra o mua o Twitter, i whakamahia e nga miihini tata nga whare pukapuka e mohio ana ratou ki te whakatutuki i nga whakaritenga o mua. I timata a Bootstrap hei whakautu mo nga wero i puta me te whanaketanga i tere tere i roto i te Hackweek tuatahi a Twitter.

Na te awhina me nga urupare a te maha o nga miihini i Twitter, kua tino tipu a Bootstrap ki te whakauru i nga momo taketake anake, engari he mea huatau me te roa o nga tauira hoahoa o mua.

Pānuitia atu i runga dev.twitter.com ›

Tautoko Pūtirotiro

Ka whakamatauria a Bootstrap ka tautokohia i roto i nga kaitirotiro hou hou penei i a Chrome, Safari, Internet Explorer, me Firefox.

• Safari Hou
• Google Chrome hou
• Firefox 4+
• Internet Explorer 7+

He aha kei roto

Ka tae mai a Bootstrap me te CSS kua whakahiato, kaore i whakahiato, me nga tauira tauira.

• Ko nga konae .less taketake katoa
• CSS tino whakahiato me te whakaiti
• Whakaotia nga tuhinga aratohu ahua
• Tauira tauira wharangi (he maha ake ka haere mai)

Mātiti taunoa

Ko te punaha matiti taunoa kua whakaratohia hei waahanga o Bootstrap he matiti 940px te whanui 16-tīwae. He reka o te punaha matiti 960 rongonui, engari karekau he tawhwhw/padding i te taha maui me te taha matau.

Tauira tohu matiti

Ka rite ki te whakaatu i konei, ka taea te hanga i tetahi tahora taketake me nga "tīwae" e rua, ka horahia e ia he maha o nga pou turanga 16 i tautuhia e matou hei waahanga o to maatau punaha tukutuku. Tirohia nga tauira i raro nei mo etahi atu rereketanga.

<div class="row"> class = "rarangi" >
  <div class = "span6 tīwae" > 
    ...
  </div>
  <div class = "span10 tīwae" > 
    ...
  </div>
</div>

Te whakatakotoranga pumau

He 940px taketake te whanui, te whakatakotoranga ipu kei waenganui mo tetahi waahi, wharangi ranei.

<tinana>
  <div class = "putea" > 
    ...
  </div>
</tinana>

Te whakatakotoranga wai

He hanganga wharangi wē, wē rānei me te iti me te teitei-whanui me te paetaha maui. He pai mo nga taupānga.

<tinana>
  <div class = "ipu-wai" > 
    <div class = "paetaha" > 
      ...
    </div>
    <div class = "ihirangi" > 
      ...
    </div>
  </div>
</tinana>

Nga upoko me te kape

He aroraa patopato paerewa mo te hanga i o wharangi paetukutuku.

h1. Pane 1

h2. Pane 2

h3. Pane 3

h4. Pane 4

h5. Pane 5

h6. Pane 6

Kowae tauira

Ko te ahua o te ahua o te ahua o te ahua o te whakapaipai. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ko te ingoa o nga mea katoa ka taea e koe.

Tauira pane He pane iti…

Misc. huānga

Ma te whakakaha, nga wahitau, me nga whakapoto

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

Ahea te whakamahi

Me whakamahi nga tohu tohu ( <strong>me <em>) hei tohu i te hiranga atu, i te whakanui ranei o tetahi kupu, rerenga korero ranei e pa ana ki te kape a tawhio noa. Whakamahia <strong>mo te hiranga me te whakanui <em>i te ahotea .

Te aroraa i roto i te hoê paratarafa

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

Tuhipoka: He pai tonu te whakamahi <b>me <i>nga tohu i roto i te HTML5, engari karekau e tae mai me nga momo ahua. <b>Ko te tikanga ki te whakanui i nga kupu, kinga kianga ranei me te kore e whakaatu i te hiranga atu, engari <i>ko te nuinga mo te reo, kupu hangarau, aha atu.

Wāhitau

Ka <address>whakamahia te huānga mo nga korero whakapā mo tona tupuna tata, mo te katoa o te mahi. Anei te ahua:

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

Tuhipoka: Ko ia rarangi i roto i te <address>me mutu ki te wehenga raina ( <br />) me takai ranei ki te tohu taumata-paraka (hei tauira, <p>) kia tika ai te hanga i nga ihirangi.

Whakapoto

Mo nga whakapoto me nga acronyms, whakamahia te <abbr>tohu ( <acronym>kua whakakorehia i te HTML5 ). Tuhia te puka poto ki roto i te tohu ka tautuhi i te taitara mo te ingoa katoa.

Poraka korero

<blockquote> <p> <small>

Me pehea te whakahua

Hei whakauru i te kupu poraka, takai <blockquote>me <p>nga <small>tohu. Whakamahia te <small>huānga ki te whakahua i to punanga ka whiwhi koe i te riipene em —i mua.

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Takuta Julius Hibbert

Kore ota<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Tauoti molestie lorem me 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 noho amet erat nunc
• Eget porttitor lorem

Kore-ahua<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Tauoti molestie lorem me 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 noho amet erat nunc
• Eget porttitor lorem

Kua whakahaua<ol>

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

Whakaahuatangadl

Nga rarangi whakaahuatanga

Ko te rarangi whakaahuatanga he tino pai mo te tautuhi kupu.

Euismod

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

Donec id elit non mi porta gravida and eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Te hanga tepu

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

He rawe nga tepu—mo nga mea maha. Ko nga ripanga nui, engari, me iti te aroha tohu ki te whai hua, te tauine, me te panui (i te taumata waehere). Anei etahi tohutohu hei awhina.

I nga wa katoa, takai i nga pane o te poupou ki roto i te <thead>ahua ko te naakapa he <thead>> <tr>> <th>.

He rite ki nga pane o te poupou, me takai nga ihirangi tinana katoa o to ripanga ki roto i te <tbody>a na reira ko to hierarchy <tbody>> <tr>> <td>.

Tauira: Ngā kāhua ripanga taunoa

Ka whakaingoatia nga ripanga katoa me nga taitapa nui anake hei whakarite i te panui me te pupuri i te hanganga. Kaore he take ki te taapiri i etahi atu karaehe, huanga ranei.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Reo
1	Ko etahi	Kotahi	Ingarihi
2	Joe	Poka ono	Ingarihi
3	Stu	Dent	Waehere

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

Tauira: Hetere-tere

Kia pai ki o ripanga ma te taapiri i te zebra-striping—tapiri noa te .zebra-stripedkaraehe.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Reo
1	Ko etahi	Kotahi	Ingarihi
2	Joe	Poka ono	Ingarihi
3	Stu	Dent	Waehere

Tuhipoka: Ko te Zebra-striping he whakapainga ahu whakamua kaore i te waatea mo nga kaitirotiro tawhito penei i te IE8 me raro.

<table class = "tepu noa zebra-striped" > 
...
</table>

Tauira: Zebra-striped w/ TableSorter.js

Ma te tango i te tauira o mua, ka whakapai ake i te whaihua o a maatau ripanga ma te whakarato i nga mahi tohatoha ma te jQuery me te monomai Ripanga . Patohia te pane o te tīwae hei huri i te kōmaka.

#	Ingoa Tuatahi	Ingoa Whakamutunga	Reo
1	To	Kotahi	Ingarihi
2	Joe	Poka ono	Ingarihi
3	Stu	Dent	Waehere

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<hōtuhi > 
  $ ( mahi () { 
    $ ( "tepu#sortTableExample" ). kaiwhakarite ripanga ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "tepu noa zebra-striped" > 
  ...
</table>

Ngā kāhua taunoa

Ko nga puka katoa ka tukuna he momo taunoa hei whakaatu ma te panui me te tauine. Ka whakaratohia nga ahua mo nga whakaurunga kuputuhi, nga rarangi tohu, nga waahanga kuputuhi, nga patene reo irirangi me nga pouakataki, me nga paatene.

He tauira pakiwaitara puka

X-Tauru Nui

Tīpakohia

1 2 3 4 5

Tīpakohia

1 2 3 4 5

Tāuru kore e taea te whakatika

Ētahi Uara Here

Kua Monohia te Whakauru

X-Tauru Nui

He iti o te kupu awhina

He tauira pakiwaitara puka

Kuputuhi kua tohua

@

Pouakataki kua tohua

Pouakataki kua apitihia

Tāuru Kōnae

He tauira pakiwaitara puka

Rarangi o nga Kōwhiringa

• Ko te whiringa tuatahi ko tenei me tera—me whakauru he aha i pai ai
• Ko te kōwhiringa tuarua ka taea te tirotiro me te whakauru ki nga hua puka
• Ko te whiringa tuatoru ka taea—ae, i whakaaro koe—ka tirohia ano ka whakauruhia ki nga hua puka
• Ko te kōwhiringa tuawhā e kore e taea te taki i te mea kua monokia.

Tuhipoka: Ka karapotia e nga tapanga nga whiringa katoa mo nga waahi paato nui ake me te ahua pai ake.

Awhe Ra

ki Ko nga wa katoa ka whakaatuhia hei Waa Paerewa Moananui-a-Kiwa (GMT -08:00).

Textarea

Poraka o te kupu awhina hei whakaahua i te mara i runga ake mena e tika ana.

Rarangi o nga Kōwhiringa

• Ko te whiringa tuatahi ko tenei me tera—me whakauru he aha i pai ai
• Ko te kōwhiringa tuarua ka taea te tirotiro me te whakauru ki nga hua puka

Tiaki Huringa  Whakakore

Puka tāpae

Tāpirihia .form-stackedki te HTML o tō puka ka whai tapanga koe ki runga ake o ā rātou āpure, kaua ki te taha mauī. Ka pai tenei ki te poto o puka, e rua ranei nga pou whakauru mo nga puka taumaha ake.

He tauira pakiwaitara puka

X-Tauru Nui

Tīpakohia

1 2 3 4 5

He tauira pakiwaitara puka

X-Tauru Nui

He iti o te kupu awhina

Rarangi o nga Kōwhiringa

• Ko te whiringa tuatahi ko tenei me tera—me whakauru he aha i pai ai
• Ko te kōwhiringa tuarua ka taea te tirotiro me te whakauru ki nga hua puka

Tuhipoka: Ka karapotia e nga tapanga nga whiringa katoa mo nga waahi paato nui ake me te ahua pai ake.

Tiaki Huringa  Whakakore

Patene

Hei tikanga, ka whakamahia nga paatene mo nga mahi ka whakamahia nga hononga mo nga taonga. Hei tauira, "Tikiake" he paatene me te "mahi hou" he hononga.

Katoa nga paatene taunoa ki te ahua hina hina, engari he .primarykaraehe kahurangi kei te waatea. I tua atu, ko te huri i o ake ahua he ngawari te peasy.

Patene tauira

Ka taea te whakamahi i nga momo paatene ki tetahi mea me te .btntono. Ko te tikanga ka hiahia koe ki te hoatu i enei ki te <a>, <button>, me te kowhiri i <input>nga huānga. Anei te ahua:

Rahi rereke

Kei te pirangi koe ki nga paatene nui, iti ake ranei? Kia whai!

Te ahua haua

Mo nga patene karekau i te kaha, kua monoa ranei e te taupānga mo tetahi take, whakamahia te ahua haua. Mo nga .disabledhononga me :disablednga <button>huānga.

Hononga

Patene

He aha tena

Ko ta matou pae runga he pae pumau e mau ana i te waitohu paetukutuku, te ingoa ranei, te whakatere tuatahi, me te puka rapu.

Ka taea te whakarite

Ko nga huānga katoa o roto, me te pae runga katoa, he mea whiriwhiri. Ka taea e koe te kowhiri ki te whakauru i te moko/ingoa, nav, rapu, me te nav tuarua—he huinga ranei o tera.

Kua whakauruhia nga whakaheke

Hei waahanga o te whakaterenga matua, kua whakauruhia e matou te kaha ki a koe ki te taapiri i nga takahanga ki to nav. Tirohia te nav tuarua kei runga ake nei (whakatikaa matau) kia kite pehea te mahi.

Ripa me nga pire

Waihangahia te whakatere tuarua ngawari me te <ul>. Hurihia i waenga i nga ripa me nga pire ma te taapiri i te karaehe e tika ana.

He pai mo nga waahanga-iti o te ihirangi penei i a maatau wharangi tautuhinga kaute me nga raarangi kaiwhakamahi mo te takahuri i waenga i nga wharangi rite nga ihirangi. E waatea ana i roto i nga momo ripa, pire ranei.

• Kainga
• Kōtaha
• Nga Karere
• Tautuhinga
• Whakapā

<ul class = "ripa" > 
  <li class = "active" ><a href = "#" > Home </a> </li>  
  <li><a href = "#" > Kōtaha </a> </li> 
  <li><a href = "#" > Nga Karere </a> </li> 
  <li><a href = "#" > Tautuhinga </a> </li> 
  <li><a href = "#" > Whakapā </a> </li> 
</ul>

• Kainga
• Kōtaha
• Nga Karere
• Tautuhinga
• Whakapā

<ul class = "pire" > 
  <li class = "active" ><a href = "#" > Home </a> </li>  
  <li><a href = "#" > Kōtaha </a> </li> 
  <li><a href = "#" > Nga Karere </a> </li> 
  <li><a href = "#" > Tautuhinga </a> </li> 
  <li><a href = "#" > Whakapā </a> </li> 
</ul>

whakawhārangi

Ko te whakaingoatanga tino ngawari me te ahua iti na Rdio. Ko te poraka nui he uaua ki te ngaro, he ngawari te tauine, me te whakarato i nga waahi paato nui.

<div class = "whakawhārangi" > 
  <ul>
    <li class = "kua monoa i mua" ><a href = "#" > ← Tuhinga o mua </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 → </a></li>  
  </ul>
</div>

Matohi taketake

Ko nga karere raina-kotahi hei whakaatu i te rahua, te rahua, te angitu ranei o tetahi mahi. He pai rawa mo nga puka.

Paraka nga karere

Mo nga karere e hiahia ana ki te whakamaarama, kei a matou nga matohi momo whiti. He tino pai enei mo te pupuhi ake i nga karere hapa roa, te whakatupato i te kaiwhakamahi mo te mahi e tatari ana, me te whakaatu korero noa mo te aro nui ki te wharangi.

Modal

Ko nga tauira—nga korero, pouaka rama ranei—he pai mo nga mahi horopaki i nga waahi he mea nui kia mau tonu te horopaki papamuri.

Tohutohu Utauta

He tino whai hua nga Twipsies mo te awhina i te kaiwhakamahi pohehe me te tohu i a raatau ki te huarahi tika.

Popovers

Whakamahia nga pouvers hei whakarato i nga korero kupuroto ki tetahi wharangi me te kore e pa ki te tahora.

I hangaia a Bootstrap me te Preboot , he kohinga tuwhera-puna o nga ranunga me nga taurangi hei whakamahi tahi me te Iti , he kaiwhakatikatika CSS mo te whanaketanga paetukutuku tere me te ngawari.

Tirohia te pehea i whakamahia ai e matou a Preboot i Bootstrap me pehea e taea ai e koe te whakamahi mena ka whiriwhiri koe ki te whakahaere Iti i runga i to kaupapa e whai ake nei.

Me pehea te whakamahi

Whakamahia tenei whiringa ki te whakamahi katoa i nga taurangi Iti a Bootstrap, whakauru, me te kohanga i roto i te CSS ma te javascript i to tirotiro.

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

Kaore koe e rongo i te otinga .js? Whakamātauria te taupānga Iti Mac ka whakamahi ranei i te Node.js ki te whakahiato ina tukuna e koe to waehere.

He aha kei roto

Anei etahi o nga mea nui o nga mea kei roto i Twitter Bootstrap hei waahanga o Bootstrap. Haere ki te paetukutuku Bootstrap, ki te whaarangi kaupapa Github ranei ki te tango me te ako atu.

Taurangi tae

Ko nga taurangi i te Iti he tino pai mo te pupuri me te whakahou i to mahunga CSS kore utu. Ina hiahia koe ki te huri i tetahi uara tae, i tetahi uara e whakamahia ana, whakahōuhia ki te waahi kotahi ka oti koe.

// Hononga
@linkColor : #8b59c2;         
@linkColorHover :     pouri ( @linkColor , 10 ); 
 
// Kerei
@pango : #000;             
@grayDark :           mama ( @pango , 25 %); 
@hina :               mama ( @pango , 50 %); 
@grayLight :          mama ( @pango , 70 %); 
@grayLighter :        mama ( @pango , 90 %); 
@white : #fff;             
 
// Nga Tae Nako
@puru : #08b5fb;              
@matomato : #46a546;             
@whero : #9d261d;               
@kōwhai : #ffc40d ;            
@karaka : #f89406;            
@mawhero : #c3325f;              
@papura : #7a43b6;            
 
// Raina turanga
@baseline : 20px ;          

Te korero

Ka whakaratohia ano e Iti tetahi atu momo korero hei taapiri atu ki te /* ... */wetereo noa a CSS.

// He korero tenei
/* He korero ano tenei */

Whakaranuhia te wazoo

Ko nga Mixins kei roto, he waahanga ranei mo te CSS, ka taea e koe te whakakotahi i tetahi poraka waehere ki te kotahi. He rawe mo nga taonga kua tohua ki mua i te kaihoko penei box-shadowi te , te rōnaki whakawhiti-tirotiro, te taapu momotuhi, me etahi atu. Kei raro nei he tauira o nga ranunga kua whakauruhia ki a Bootstrap.

Tāpae momotuhi

#momotuhi {
  . poto ( @taimaha : noa , @rahi : 14px , @lineHeight : 20px )      {
    momotuhi - rahi : @rahi  ;
    momotuhi - taumaha : @taimaha  ;
    raina - teitei : @lineHeight ; 
  }
  . sans - serif ( @taimaha : noa , @rahi : 14px , @lineHeight : 20px )      {
    momotuhi - whanau : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    momotuhi - rahi : @rahi ; 
    momotuhi - taumaha : @weight ; 
    raina - teitei : @lineHeight ; 
  }
  . serif ( @taimaha : noa , @rahi : 14px , @lineHeight : 20px )      {
    momotuhi - whanau : "Georgia" , Times New Roman , Times , sans - serif ;     
    momotuhi - rahi : @rahi ; 
    momotuhi - taumaha : @weight ; 
    raina - teitei : @lineHeight ; 
  }
  . mokowātahi ( @taimaha : noa , @rahi : 12px , @lineHeight : 20px )      {
    momotuhi - whanau : "Monaco" , Courier New , monospace ;   
    momotuhi - rahi : @rahi ; 
    momotuhi - taumaha : @weight ; 
    raina - teitei : @lineHeight ; 
  }
}

Rōnaki

#rōnaki {
  . whakapae ( @startColor : #555, @endColor: #333) { 
    papamuri - tae : @endColor  ;
    papamuri - tukurua : tukurua - x ;
    papamuri - atahanga : - khtml - rōnaki ( rārangi , mauī runga , runga matau , mai i ( @startColor ), ki ( @endColor )); // Kaitukino   
    papamuri - atahanga : - moz - raina - rōnaki ( maui , @startColor , @endColor );    // FF 3.6+
    papamuri - atahanga : - ms - raina - rōnaki ( maui , @startColor , @endColor ); // IE10    
    papamuri - atahanga : - webkit - rōnaki ( rārangi , maui ki runga , runga matau , tae - mutu ( 0 %, @startColor ), tae - mutu ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    papamuri - atahanga : - kete tukutuku - raina - rōnaki ( maui , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    papamuri - atahanga : - o - raina - rōnaki ( maui , @startColor , @endColor ); // Opera 11.10    
    - ms - tātari : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    tātari : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    papamuri - atahanga : raina - rōnaki ( maui , @startColor , @endColor ); // Le paerewa   
  }
  . poutū ( @startColor : #555, @endColor: #333) { 
    papamuri - tae : @endColor ; 
    papamuri - tukurua : tukurua - x ;
    papamuri - atahanga : - khtml - rōnaki ( rārangi , mauī runga , maui raro , mai i ( @startColor ), ki ( @endColor )); // Kaitukino   
    papamuri - atahanga : - moz - raina - rōnaki ( @startColor , @endColor ); // FF 3.6+   
    papamuri - atahanga : - ms - raina - rōnaki ( @startColor , @endColor ); // IE10   
    papamuri - atahanga : - webkit - rōnaki ( rārangi , maui ki runga , maui ki raro , tae - mutu ( 0 %, @startColor ), tae - mutu ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    papamuri - atahanga : - kete tukutuku - raina - rōnaki ( @startColor , @endColor );   // Safari 5.1+, Chrome 10+
    papamuri - atahanga : - o - raina - rōnaki ( @startColor , @endColor ); // Opera 11.10   
    - ms - tātari : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    tātari : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7
    papamuri - atahanga : raina - rōnaki ( @startColor , @endColor ); // Te paerewa  
  }
  . aronga ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . poutū - toru - tae ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Nga mahi me te punaha matiti

Kia pai ki te mahi i etahi mahi pangarau hei whakaputa i nga whakaranu ngawari me te kaha penei i raro nei.

// Mātiti
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Pūnaha Mātiti
. ipu {
  whanui : @siteWidth ; 
  tawhē : 0 auto ;  
  . whakatika marama ();
}
. tīwae ( @columnSpan : 1 )   {
  whakaatu : rōraina ; 
  mānu : maui ;
  whanui : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  tawhē - mauī : @gridGutterWidth ; 
  &: tuatahi - tamaiti {
    taha maui : 0 ; _ 
  }
}
. Whangai ( @columnOffset : 1 )   {
  tawhē - maui : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! nui ;          
}