Grid ezighi ezi

Sistemụ grid ndabara enyere dị ka akụkụ nke Bootstrap bụ grid kọlụm 16 obosara 940px. Ọ bụ ụtọ nke sistemu grid 960 na-ewu ewu, mana enweghị oke / padding n'akụkụ aka ekpe na aka nri.

Ọmụmaatụ akara akara

Dịka egosiri n'ebe a, enwere ike ịmepụta okirikiri nhọrọ ukwuu na "ogidi abụọ," nke ọ bụla na-agbakọ ọnụ ọgụgụ nke kọlụm 16 ntọala anyị kọwara dịka akụkụ nke usoro grid anyị. Lee ihe atụ n'okpuru maka ndịiche ọzọ.

<div class="row">
  <div klas = "span6 kọlụm" > 
    ...
  </div>
  <div klas = "span10 kọlụm" > 
    ...
  </div>
</div>

Nhazi edoziri

Obere 940px obosara, okirikiri akpa akpa maka naanị saịtị ma ọ bụ ibe ọ bụla.

<ahụ>
  <div klas = "container" > 
    ...
  </div>
</ ahu>

Nhazi mmiri mmiri

Nhazi ibe mmiri na-agbanwe agbanwe ma ọ bụ mmiri mmiri nwere obere- na max-obosara yana akụkụ aka ekpe. Ọ dị mma maka ngwa.

<ahụ>
  <div class = "container-fluid" > 
    <div class = " sidebar" > 
      ...
    </div>
    <div klas = "ọdịnaya" > 
      ...
    </div>
  </div>
</ ahu>

Isi na oyiri

Ọkọlọtọ typographic ọkwa maka ịhazi ibe weebụ gị.

h1. Isi nke 1

h2. Isi nke 2

h3. Isi nke 3

h4. Isi nke 4

h5. Isi nke 5

h6. Isi nke 6

Paragraf ọmụmaatụ

Nullam quis risus eget urna mollis ornare vel eu leo. N'ihi ya, ọ bụ ezie na ọ dị mkpa ka a na-eme ihe nkiri, na-akpa ọchị. Nullam id dolor id nibh ultricies vehicula ut id elit.

Isi ihe atụ nwere isi-isi...

Ịnwekwara ike ịgbakwunye isi okwu na <strong>na<em>

Ụdị dị iche iche. ihe

Iji nkwusi okwu ike, adreesị, na ndebiri

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

Mgbe iji

Ekwesịrị iji mkpado mesiri ike ( <strong>na <em>) gbakwunye ọdịiche anya n'etiti okwu ma ọ bụ nkebiokwu na nnomi gbara ya gburugburu. Jiri <strong>maka nlebara anya ochie dị larịị yana <em>maka nlebara anya na utu aha.

Emesiri ike na paragraf

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.

Adreesị

A addressna-eji mmewere maka-ị chepụtara ya!-adreesị. Nke a bụ ka ọ dị:

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

Mara: Ahịrị ọ bụla dị n'ime addressga-ejedebe na nkwụsị ahịrị ( <br />) iji hazie ọdịnaya nke ọma ka a na-agụ ya na ndụ n'ezie na-enweghị ụdị ọ bụla etinyere ya.

Ndebiri

Maka ndebiri na mkpọghe okwu, jiri abbrmkpado ( acronymemebiela na HTML5 ). Tinye mpempe akwụkwọ n'ime mkpado ma tọọ aha maka aha zuru ezu.

Ihe mgbochi

<blockquote> <p> <cite>

Jide n'aka na ị kechie blockquotegburugburu gị paragraphna citemkpado. Mgbe ị na-ehota isi iyi, jiri citemmewere. CSS ga-eji em dash (—) wepụta aha na-akpaghị aka.

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

Dr Julius Hibbert

Edeghị iwu<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Ndị otu m
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• John Jacob
• Paul Pierce
• Kevin Garnett

Ekebeghị ụdị<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Ndị otu m
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• John Jacob
• Paul Pierce
• Kevin Garnett

Enyere iwu<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Ndị otu m
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. John Jacob
7. Paul Pierce
8. Kevin Garnett

Nkọwadl

Ndepụta nkọwa

Ndepụta nkọwa zuru oke maka ịkọwa okwu.

Euismod

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

Achọpụtaghị m porta gravida na eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Tebụl ụlọ

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

Tebụl dị mma - maka ọtụtụ ihe. Tebụl ndị mara mma, Otú ọ dị, chọrọ ntakịrị ịhụnanya nrịbama ka ọ bụrụ ihe bara uru, nke a na-atụgharị, na nke a na-agụ (na ọkwa koodu). Nke a bụ ndụmọdụ ole na ole iji nyere aka.

Kechie ndị nkụnye eji isi mee kọlụm gị mgbe niile n'ụdị ọkwa theadahụ bụ thead> tr> th.

Dị ka ndị nkụnye eji isi mee kọlụm, ọdịnaya ahụ dị na tebụl gị niile kwesịrị ka a kechie ya tbodyka ndị isi gị wee bụrụ tbody> tr> td.

Ọmụmaatụ: Ụdị tebụl nke emeghị eme

A ga-eji naanị oke dị mkpa hazie tebụl niile na-akpaghị aka iji hụ na enwere ike ịgụ na idobe nhazi. Ọ dịghị mkpa ịgbakwunye klaasị ma ọ bụ àgwà.

#	Aha mbụ	Aha ikpeazụ	Asụsụ
1	Ụfọdụ	Otu	Bekee
2	Joe	Sixpack	Bekee
3	Stu	Det	Koodu

<table class="common-table"> klas = "tebụl nkịtị" >
  ...
</table>

Ọmụmaatụ: Ahịhịa zebra

Nweta ntakịrị mmasị na tebụl gị site na ịgbakwunye zebra-striping - naanị tinye .zebra-stripedklas ahụ.

#	Aha mbụ	Aha ikpeazụ	Asụsụ
1	Ụfọdụ	Otu	Bekee
2	Joe	Sixpack	Bekee
3	Stu	Det	Koodu

<table class="common-table zebra-striped"> klaasị = "tebụl-okirikiri zebra" >
...
</table>

Ọmụmaatụ: Zebra-striped w/TableSorter.js

N'iji ihe atụ gara aga, anyị na-emeziwanye uru nke tebụl anyị site n'inye ọrụ nhazi site na jQuery na Tablesorter plugin. Pịa nkụnye eji isi mee kọlụm ọ bụla ka ịgbanwee ụdị.

#	Aha mbụ	Aha ikpeazụ	Asụsụ
1	Gị	Otu	Bekee
2	Joe	Sixpack	Bekee
3	Stu	Det	Koodu

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> ụdị = "ederede/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
< ụdị edemede = "ederede/javascript" > 
  $ ( akwụkwọ ). njikere ( ọrụ () { 
    $ ( "okpokoro#sortTableExample" ). tablesorter ( { ụdịList : [[ 1 , 0 ]]] );   
  }
</script>
<tebụlụ klas = "tebụlụ nkịtị nke zebra-striped" > 
  ...
</table>

Ụdị ndị ezighi ezi

A na-enye ụdịdị niile ka ọ bụrụ nke dabara adaba iji weta ha n'ụzọ enwere ike ịgụ na scalable. Enyere ụdị maka ntinye ederede, ndepụta họrọ, ebe ederede, bọtịnụ redio na igbe nlele, na bọtịnụ.

Ụdị akụkọ ifo

Ntinye X- Nnukwu

Họrọ

1 2 3 4 5

Họrọ

1 2 3 4 5

Ntinye enweghị ike idezi

Uru ụfọdụ Ebe a

Ntinye nkwunye

Ntinye X- Nnukwu

Obere snippet nke ederede enyemaka

Ụdị akụkọ ifo

Ederede akwadoro

@

Igbe nrịbama emegoro

Igbe nbanye agbakwunyere

Ntinye faịlụ

Ụdị akụkọ ifo

Ndepụta Nhọrọ

• Nhọrọ nke mbụ bụ nke a na nke ahụ - jide n'aka na ị gụnyere ihe kpatara o ji dị mma
• Enwere ike ịlele nhọrọ nke abụọ ma tinye ya na nsonaazụ ụdị
• Nhọrọ nke atọ nwere ike-ee, ị chepụtara ya-nwekwara ike ịlele ma tinye ya na nsonaazụ ụdị
• Enweghị ike ịlele nhọrọ anọ dịka ọ nwere nkwarụ.

Mara: Akara akara gbara nhọrọ niile maka mpaghara ọpịpị buru ibu yana ụdị enwere ike iji ya.

Ogologo ụbọchị

ka E gosipụtara oge niile dị ka Oge Ọkọlọtọ Pacific (GMT -08:00).

Mpaghara ederede

Mgbochi ederede enyemaka iji kọwaa mpaghara dị n'elu ma ọ dị mkpa.

Ndepụta Nhọrọ

• Nhọrọ nke mbụ bụ nke a na nke ahụ - jide n'aka na ị gụnyere ihe kpatara o ji dị mma
• Enwere ike ịlele nhọrọ nke abụọ ma tinye ya na nsonaazụ ụdị

Chekwaa mgbanwe Kagbuo

Ụdị ekpokọtara

Tinye .form-stackedna HTML ụdị gị ma ị ga-enwe akara n'elu ubi ha kama ịnọ n'aka ekpe ha. Nke a na-arụ ọrụ nke ọma ma ọ bụrụ na ụdị gị dị mkpụmkpụ ma ọ bụ na ị nwere ogidi abụọ nke ntinye maka ụdị dị arọ.

Ụdị akụkọ ifo

Ntinye X- Nnukwu

Họrọ

1 2 3 4 5

Ụdị akụkọ ifo

Ndepụta Nhọrọ

• Nhọrọ nke mbụ bụ nke a na nke ahụ - jide n'aka na ị gụnyere ihe kpatara o ji dị mma
• Enwere ike ịlele nhọrọ nke abụọ ma tinye ya na nsonaazụ ụdị

Mara: Akara akara gbara nhọrọ niile maka mpaghara ọpịpị buru ibu yana ụdị enwere ike iji ya.

Chekwaa mgbanwe Kagbuo

Bọtịnụ

Dịka mgbakọ, a na-eji bọtịnụ eme ihe mgbe ejiri njikọ mee ihe. Dịka ọmụmaatụ, "Download" nwere ike ịbụ bọtịnụ yana "ọrụ na-adịbeghị anya" nwere ike ịbụ njikọ.

Bọtịnụ niile dabara na ụdị isi awọ dị ọkụ, mana .primaryklaasị na-acha anụnụ anụnụ dị. Na mgbakwunye, ịtụgharị ụdị nke gị dị mfe peasy.

Bọtịnụ ihe atụ

Enwere ike itinye ụdị bọtịnụ na ihe ọ bụla na .btnetinyere ya. Ọ na-adịkarị, ị ga-achọ itinye ndị a na naanị a, button, ma họrọ inputihe. Nke a bụ ka ọ dị:

Nha ọzọ

Ị na-achọ bọtịnụ buru ibu ma ọ bụ obere? Nwee ya!

Ọnọdụ nkwarụ

Maka bọtịnụ ndị na-adịghị arụ ọrụ ma ọ bụ ndị ngwa nwere nkwarụ maka otu ihe ma ọ bụ ọzọ, jiri steeti nkwarụ. Nke ahụ bụ .disabledmaka njikọ na :disabledmaka buttonihe.

Njikọ

Bọtịnụ

Kedu ihe ọ bụ

Topbar anyị bụ ụlọ mmanya edobere nke nwere akara ma ọ bụ aha webụsaịtị, igodo ụzọ na ụdị ọchụchọ.

Enwere ike ịhazi ya

Ihe niile dị n'ime, yana topbar dum, bụ nhọrọ. Ị nwere ike ịhọrọ itinye akara/aha, igodo, ọchụchọ na ụgbọ mmiri nke abụọ-ma ọ bụ ngwakọta ọ bụla nke ahụ.

Mbudata gụnyere

Dịka akụkụ nke igodo igodo, anyị etinyela ikike ị gbakwunye mkpọda na ụgbọ mmiri gị. Lelee ụgbọ mmiri nke abụọ dị n'elu (dakọtara aka nri) ka ịhụ ka esi eme ya.

Taabụ na ọgwụ

Mepụta igodo nsoro dị mfe site na iji a ul. Gbanwee n'etiti taabụ ma ọ bụ ọgwụ site na ịgbakwunye klaasị kwesịrị ekwesị.

Ọ dị mma maka obere akụkụ nke ọdịnaya dị ka ibe ntọala akaụntụ anyị yana usoro oge onye ọrụ maka ịtụgharị n'etiti ibe ọdịnaya. Dị na tabbed ma ọ bụ pill ụdị.

• Ụlọ
• Profaịlụ
• Ozi
• Ntọala
• Kpọtụrụ

<ul class="tabs"> klas = "taabụ" >
  <li class = "ọrụ" ><a href = "" > Ụlọ </a></li>  
  <li><a href = "" > Profaịlụ </a></li> 
  <li><a href = "" Ozi </a> </li> 
  <li><a href = "" > Ntọala </a></li> 
  <li><a href = "" > Kọntaktị </a></li> 
</ul>

• Ụlọ
• Profaịlụ
• Ozi
• Ntọala
• Kpọtụrụ

<ul class=" pills"> klas = "ọgwụ" >
  <li class = "ọrụ" ><a href = "" > Ụlọ </a></li>  
  <li><a href = "" > Profaịlụ </a></li> 
  <li><a href = "" Ozi </a> </li> 
  <li><a href = "" > Ntọala </a></li> 
  <li><a href = "" > Kọntaktị </a></li> 
</ul>

Pagination

Pagination dị mfe ma dị ntakịrị nke sitere n'ike mmụọ nsọ Rdio. Nnukwu ngọngọ siri ike ịgbaghara, na-adị mfe ịrị elu, ma na-enye nnukwu mpaghara pịa.

<div class="pagination"> klas = "pagination" >
  <ul>
    <li class = "Agbanyụrụ nke gara aga" ><a href = "" > ← Nke gara aga </a></li>  
    <li class = "ọrụ" ><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 = "na-esote" ><a href = "" > Ọzọ → </a></li>  
  </ul>
</div>

Ngosipụta isi

Ozi otu ahịrị maka igosipụta ọdịda, ọdịda enwere ike, ma ọ bụ ịga nke ọma nke ihe omume. Karịsịa bara uru maka ụdị.

Gbochie ozi

Maka ozi chọrọ ntakịrị nkọwa, anyị nwere ọkwa ọkwa paragraf. Ndị a zuru oke maka iwepụta ozi njehie dị ogologo, dọọ onye ọrụ aka na ntị maka ihe na-echere, ma ọ bụ naanị iwepụta ozi maka itinyekwu ike na ibe ahụ.

Ụdị ụdị

Modals — dialogs ma ọ bụ igbe ọkụ — dị mma maka omume ọnọdụ n'ọnọdụ ebe ọ dị mkpa ka edobe ọnọdụ ndabere.

Popovers

Jiri popovers iji nye ozi subtextual na ibe na-enweghị nhazi nhazi.

Ejiri Preboot wuo Bootstrap , ngwugwu ngwakọta na-emepe emepe nke a ga-eji na obere obere , onye na-ebu ụzọ CSS maka mmepe weebụ ngwa ngwa ma dị mfe.

Lelee ka anyị si jiri Preboot na Bootstrap yana otu ị ga-esi jiri ya mee ihe ma ọ bụrụ na ịhọrọ ịgba ọsọ obere na ọrụ ọzọ gị.

Otu esi eji ya

Jiri nhọrọ a mee ihe nke ọma Bootstrap's Less variables, mixins, na nesting na CSS site na javascript na ihe nchọgharị gị.

<njikọ rel="stylesheet/less" ụdị = "text/css" href="less/bootstrap.less" media="all" /> rel = "ụdị mpempe akwụkwọ / obere" = "ederede / css" href = "obere/bootstrap.less" mgbasa ozi = "niile" />    
< ụdị edemede = "ederede/javascript" src = "js/less-1.0.41.min.js" </script>  

Enweghị mmetụta ngwọta .js? Gbalịa ngwa Mac obere ma ọ bụ jiri Node.js chịkọta mgbe ị na-ebuga koodu gị.

Kedu ihe gụnyere

Nke a bụ ụfọdụ isi ihe agbakwunyere na Twitter Bootstrap dịka akụkụ nke Bootstrap. Gaa na webụsaịtị Bootstrap ma ọ bụ ibe ọrụ Github ka ibudata ma mụtakwuo.

Ụdị agba

Mgbanwe dị na Less zuru oke maka idowe na imelite isi ọwụwa CSS gị n'efu. Mgbe ịchọrọ ịgbanwe uru agba ma ọ bụ uru a na-ejikarị, melite ya n'otu ebe wee tọọ gị.

// Njikọ
@linkColor : #8b59c2;         
@linkColorHover : gbara     ọchịchịrị ( @linkColor , 10 ); 
// Agba
@nwa : #000;             
@grayDark : gbaa           ọkụ ( @ nwa , 25 %); 
@isi awọ : gbaa               ọkụ ( @ nwa , 50 %); 
@grayLight : gbaa          ọkụ ( @ nwa , 70 %); 
@grayLighter : gbaa        ọkụ ( @ nwa , 90 %); 
@ọcha : #ff;             
// Agba olu
@acha anụnụ anụnụ : #08b5fb;              
@ akwụkwọ ndụ akwụkwọ ndụ : #46a546 ;             
@ uhie : #9d261d;               
@edo edo : #ffc40d;            
@oroma : #f89406;            
@pink : #c3325f;              
@acha odo odo : #7a43b6;            
// Ihe ndabere
@baseline : 20px ;          

Na-aza ajụjụ

Obere na-enyekwa ụdị nkọwa ọzọ na mgbakwunye na /* ... */syntax nkịtị nke CSS.

// Nke a bụ okwu
/* Nke a bụkwa okwu */

Na-agwakọta wazoo

Mixins na-agụnye ma ọ bụ akụkụ maka CSS, na-enye gị ohere ijikọta ngọngọ koodu n'ime otu. Ha dị mma maka ihe ndị na-ere ahịa prefixed dị ka box-shadow, ihe nlegharị anya ihe nchọgharị, stacks font na ndị ọzọ. N'okpuru ebe a bụ ihe atụ nke mixins nke etinyere na Bootstrap.

Ụdị mkpụrụedemede

# font {
  . mkpirisi ( @ arọ : nkịtị , @size : 14px , @lineHeight : 20px ) {     
    font - nha : @ size ; 
    font - arọ : @ arọ ; 
    ahịrị - elu : @lineHeight ; 
  }
  . sans - serif ( @ arọ : nkịtị , @size : 14px , @lineHeight : 20px ) {     
    font - ezinụlọ : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - nha : @ size ; 
    font - arọ : @ arọ ; 
    ahịrị - elu : @lineHeight ; 
  }
  . serif ( @ arọ : nkịtị , @size : 14px , @lineHeight : 20px ) {     
    font - ezinụlọ : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - nha : @ size ; 
    font - arọ : @ arọ ; 
    ahịrị - elu : @lineHeight ; 
  }
  . monospace ( @ arọ : nkịtị , @ size : 12px , @lineHeight : 20px ) {     
    font - ezinụlọ : "Monaco" , Courier New , monospace ;   
    font - nha : @ size ; 
    font - arọ : @ arọ ; 
    ahịrị - elu : @lineHeight ; 
  }
}

Gradients

#gradient {
  . kehoraizin ( @startColor : #555, @endColor: #333) { 
    ndabere - agba : @endColor ; 
    ndabere - megharịa : kwugharịa - x ;
    ndabere - onyonyo : - khtml - gradient ( linear , n'elu aka ekpe , elu aka nri , site na ( @startColor ), ruo ( @endColor ) ); // Konqueror   
    ndabere - onyonyo : - moz - linear - gradient ( aka ekpe , @startColor , @endColor ); // FF 3.6+    
    ndabere - onyonyo : - ms - linear - gradient ( aka ekpe , @startColor , @endColor ); // IE10    
    ndabere - onyonyo : - webkit - gradient ( linear , n'elu aka ekpe , elu aka nri , agba - nkwụsị ( 0 % , @startColor ), agba - nkwụsị ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    ndabere - onyonyo : - webkit - linear - gradient ( aka ekpe , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    ndabere - onyonyo : - o - linear - gradient ( aka ekpe , @startColor , @endColor ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    nzacha : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    ndabere - onyonyo : linear - gradient ( aka ekpe , @startColor , @endColor ); // Le ọkọlọtọ   
  }
  . vetikal ( @startColor : #555, @endColor: #333) { 
    ndabere - agba : @endColor ; 
    ndabere - megharịa : kwugharịa - x ;
    ndabere - onyonyo : - khtml - gradient ( linear , n'elu aka ekpe , ala aka ekpe , site na ( @startColor ), ruo ( @endColor ) ); // Konqueror   
    ndabere - onyonyo : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    ndabere - onyonyo : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    ndabere - oyiyi : - webkit - gradient ( linear , n'elu aka ekpe , aka ekpe , agba - nkwụsị ( 0 % , @startColor ), agba - nkwụsị ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    ndabere - onyonyo : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    ndabere - onyonyo : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    nzacha : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    ndabere - onyonyo : linear - gradient ( @startColor , @endColor ); // Ọkọlọtọ  
  }
  . ntụziaka ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vetikal - atọ - agba ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Sistemụ arụ ọrụ na grid

Nweta ọmarịcha ma mee ụfọdụ mgbakọ na mwepụ iji mepụta ngwakọta na-agbanwe agbanwe ma dị ike dị ka nke dị n'okpuru.

// Griditude
@grid kọlụm : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Sistemụ grid
. akpa {
  obosara : @siteWidth ; 
  oke : 0 akpaaka ;  
  . mkpochapụ ();
}
. kọlụm ( @columnSpan : 1 ) {  
  ngosi : inline ; 
  sere n'elu : aka ekpe ;
  obosara : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  oke - aka ekpe : @gridGutterWidth ; 
  &: mbụ - nwa {
    oke - aka ekpe : 0 ; 
  }
}
. kwụsịrị ( @columnOffset : 1 ) {  
  oke - aka ekpe : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! ihe dị mkpa ;          
}