Shabakadda asalka ah

Nidaamka shabagga caadiga ah ee lagu bixiyo qayb ka mid ah Bootstrap waa 940px ballaaran oo 16-column ah. Waa dhadhan habka caanka ah ee 960, laakiin iyada oo aan lahayn margin/padding dheeraad ah ee dhinaca bidix iyo midig.

Tusaalaha calaamadaynta grid

Sida halkan ku cad, qaabayn aasaasi ah ayaa lagu abuuri karaa laba "tiir", mid kastaa wuxuu ka kooban yahay tiro ka mid ah 16-ka tiir ee aasaasiga ah ee aan ku qeexnay qayb ka mid ah nidaamkayaga qulqulka. Kala duwanaansho badan ka eeg tusaalayaasha hoose.

<div class="row"> fasalka = " saf" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 tiirar" > 
    ...
  </div>
</div>

Qaab go'an

Aasaaska 940px ballaaran, qaabeynta weelka xudunta u ah oo ku saabsan goob kasta ama bog kasta.

<jir>
  <div class = "konteenar" > 
    ...
  </div>
</body>

Qaabka dareeraha

Dheecaan dabacsan ama qaab dhismeedka bog dareere ah oo leh min- iyo ballac-weyn iyo bar dhinaca bidix ah. Ku fiican apps

<jir>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Ciwaanka iyo koobiga

Heerarka qoraalka caadiga ah ee qaabaynta boggaga internetka.

h1. Ciwaanka 1

h2. Ciwaanka 2

h3. Ciwaanka 3

h4. Ciwaanka 4

h5. Ciwaanka 5

h6. Ciwaanka 6

Tusaalaha cutubka

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

Tusaalaha ciwaanka waxa uu leeyahay ciwaan hoose...

Waxa kale oo aad ku dari kartaa cinwaan-hoosaadyo leh <strong>iyo<em>

Kala duwan curiyayaasha

Isticmaalka xoojinta, ciwaannada, & soo gaabinta

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

Marka la isticmaalo

Calaamadaha xoogga la saarayo ( <strong>iyo <em>) waa in lagu daraa farqi muuqaal ah oo u dhexeeya kelmad ama weedh iyo nuqulka ku xeeran. U isticmaal <strong>dareenka duugga ah ee cad iyo <em>dareenka jilicsan iyo cinwaannada.

Xooga saarida cutubka

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.

Cinwaanada

Cunsurka addresswaxa loo isticmaalaa-waad matalisay!—ciwaanada. Waa kan sida ay u egtahay:

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

Fiiro gaar ah: Xariiq kasta oo ku jira addresswaa in uu ku dhammaadaa xariiq jebin ( <br />) si si habboon loogu habeeyo nuxurka sida loo akhriyo nolosha dhabta ah iyada oo aan la isticmaalin qaab.

Soo gaabinta

Soo gaabinta iyo gaabinnada, isticmaal abbrsummada ( acronymwaxaa laga saaray HTML5 ). Geli foomka gacanta gaaban gudaha summada oo u deji cinwaan magaca oo dhammaystiran.

Xigashooyinka

<blockquote> <p> <cite>

Hubi inaad ku duubto blockquotehareerahaaga paragraphoo tag cite. Markaad tixraacayso isha, isticmaal citecuriyaha. CSS waxay si toos ah u hor marin doontaa magac leh em dash (—).

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

Dr. Julius Hibbert

Aan la dalban<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Saaxiibadeyda Kooxda
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• John Yacquub
• Paul Pierce
• Kevin Garnett

Aan habayn<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Saaxiibadeyda Kooxda
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• John Yacquub
• Paul Pierce
• Kevin Garnett

Dalbaday<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Saaxiibadeyda Kooxda
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. John Yacquub
7. Paul Pierce
8. Kevin Garnett

Sharaxaadadl

Liiska sharraxaadda

Liiska sharraxaadda ayaa ku habboon qeexida ereyada.

Euismod

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

Donec id un mi porta gravida iyo eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Miisaska dhismaha

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

Miisaska ayaa ku fiican - waxyaabo badan. Miisaska waaweyn, si kastaba ha ahaatee, waxay u baahan yihiin xoogaa jacayl ah si ay u noqdaan kuwo faa'iido leh, la cabbiri karo, oo la akhriyi karo (heerka koodhka). Halkan waxaa ah dhowr tilmaamood oo lagu caawinayo.

Had iyo jeer ku duub madaxyada tiirkaaga si theaday u kala sarreyso thead> tr> th.

Si la mid ah madaxyada tiirarka, dhammaan waxyaabaha ku jira miiskaaga waa in lagu duuduubaa tbodysi kala sareyntaadu u noqoto tbody> tr> td.

Tusaale: Qaababka miiska caadiga ah

Miisaska oo dhan si toos ah ayaa loo qaabayn doonaa iyada oo leh kaliya xuduudaha muhiimka ah si loo hubiyo in la akhriyi karo oo loo ilaaliyo qaabdhismeedka. Looma baahna in lagu daro fasalo ama astaamo dheeri ah.

#	Magaca koowaad	Magaca Dambe	Luuqad
1	Qaar	Mid	Ingiriis
2	Joe	Sixpack	Ingiriis
3	Stu	Diid	Koodhka

< class class = "miiska caadiga ah" > 
  ...
</miiska>

Tusaale: Zebra-xariif ah

Wax yar ka hel miisaskaada adigoo ku daraya zebra-striping-kaliya ku dar .zebra-stripedfasalka.

#	Magaca koowaad	Magaca Dambe	Luuqad
1	Qaar	Mid	Ingiriis
2	Joe	Sixpack	Ingiriis
3	Stu	Diid	Koodhka

< class class = "miiska caadiga ah zebra-striped" > 
...
</miiska>

Tusaale: Zebra-xariif ah w/ TableSorter.js

Qaadashada tusaalihii hore, waxaan wanaajinaa faa'iidada miisaskayada annagoo siinaya kala soocida shaqeynta jQuery iyo plugin Tablesorter . Guji madaxa tiir kasta si aad u beddesho nooca

#	Magaca koowaad	Magaca Dambe	Luuqad
1	Adiga	Mid	Ingiriis
2	Joe	Sixpack	Ingiriis
3	Stu	Diid	Koodhka

<script type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" > script>  
Nooca qoraalka = "qoraalka/javascript" > 
  $ ( dukumeenti ). diyaar ah ( shaqo () { 
    $ ( "miiska # kala-soocida Tusaalaha " ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  }
</script>
< class class = "miiska caadiga ah zebra-striped" > 
  ...
</miiska>

Qaababka asalka ah

Dhammaan foomamka waxaa lasiiyaa qaabab aan fiicneyn si ay ugu soo bandhigaan si la akhriyi karo oo la cabbiri karo. Qaababka waxaa loo bixiyaa gelinta qoraalka, liiska xulashada, meelaha qoraalka, badhamada raadiyaha iyo sanduuqyada hubinta, iyo badhamada.

Tusaale ahaan halyeeyga

X-Input Large

Dooro

1 2 3 4 5

Dooro

1 2 3 4 5

Gelida aan la daabici karin

Qaar ka mid ah Qiimaha Halkan

Gelida Naafada

X-Input Large

Qoraal yar oo caawimo ah

Tusaale ahaan halyeeyga

Qoraal la sii diyaariyay

@

Sanduuqa hubinta ee la sii diyaariyay

Sanduuqa hubinta ee ku lifaaqan

Gal gal

Tusaale ahaan halyeeyga

Liiska Ikhtiyaarada

• Ikhtiyaarka koowaad waa kan iyo taas-hubi inaad ku darto sababta ay u weyn tahay
• Doorashada labaad sidoo kale waa la hubin karaa waxaana lagu dari karaa natiijooyinka foomka
• Doorashada seddexaad waxay kartaa-haa, waad qiyaastay-sidoo kale waa la hubiyaa oo lagu daraa natiijooyinka foomka
• Xulashada afraad lama hubin karo maadaama ay naafo tahay.

Fiiro gaar ah: Calaamaduhu waxay ku wareegsan yihiin dhammaan xulashooyinka meelaha gujinta ka weyn iyo foom la isticmaali karo.

Qiyaasta taariikhda

ku Waqtiyada oo dhan waxaa loo muujiyaa sida Waqtiga caadiga ah ee Baasifigga (GMT -08:00).

Meesha qoraalka

Qoraalka caawinta block si aad u sharaxdo goobta kore haddii loo baahdo.

Liiska Ikhtiyaarada

• Ikhtiyaarka koowaad waa kan iyo taas-hubi inaad ku darto sababta ay u weyn tahay
• Doorashada labaad sidoo kale waa la hubin karaa waxaana lagu dari karaa natiijooyinka foomka

Badbaadada isbedelada Jooji

Foomamka is dulsaaran

Ku dar .form-stackedHTML foomkaaga oo waxaad yeelan doontaa calaamado korka beerahooda halkii aad bidixda ka ahaan lahayd. Tani waxay si weyn u shaqeysaa haddii foomamkaagu ay gaaban yihiin ama aad leedahay laba tiir oo agabka foomamka culus.

Tusaale ahaan halyeeyga

X-Input Large

Dooro

1 2 3 4 5

Tusaale ahaan halyeeyga

Liiska Ikhtiyaarada

• Ikhtiyaarka koowaad waa kan iyo taas-hubi inaad ku darto sababta ay u weyn tahay
• Doorashada labaad sidoo kale waa la hubin karaa waxaana lagu dari karaa natiijooyinka foomka

Fiiro gaar ah: Calaamaduhu waxay ku wareegsan yihiin dhammaan xulashooyinka meelaha gujinta ka weyn iyo foom la isticmaali karo.

Badbaadada isbedelada Jooji

Badhamada

Caadi ahaan, badhamada waxaa loo isticmaalaa ficilada halka xiriirinta loo isticmaalo walxaha. Tusaale ahaan, "Download" waxay noqon kartaa badhan iyo "waxqabadyadii dhawaa" waxay noqon kartaa xiriiriye.

Dhammaan badhamada waxay u beddelaan qaab cawlan khafiif ah, laakiin .primaryfasal buluug ah ayaa diyaar ah. Waxaa dheer, in la rogrogo qaababkaaga waa sahlan tahay peasy.

Tusaalooyinka badhamada

Hababka badhanka waxaa lagu dabaqi karaa wax kasta oo la .btndabaqay. Caadi ahaan waxaad u baahan doontaa inaad kuwan ku dabaqdo oo keliya a, buttonoo dooro inputcuriyeyaasha. Waa kan sida ay u egtahay:

Cabbirrada kale

Ma jeceshahay badhamada waaweyn ama ka yar? Qabo!

Gobolka naafada

Badhamada aan shaqaynayn ama uu curyaamiyay abka hal sabab ama mid kale, isticmaal gobolka naafada ah. Taas waxaa loogu talagalay .disabledisku xirka iyo curiyeyaasha.:disabledbutton

Xiriirinta

Badhamada

Waa maxay

Barkeena sare waa baar go'an oo leh astaanta ama magaca degelka, navigation hoose, iyo foomka raadinta.

La beddeli karo

Dhammaan walxaha ku jira, iyo guud ahaan bar-sare sidoo kale, waa ikhtiyaari. Waxaad dooran kartaa inaad ku darto calaamad/magac, nav, goobitaan, iyo nav sare-ama mid kasta oo taas la mid ah.

Hoos u dhaca waxaa ka mid ahaa

Iyada oo qayb ka ah navigation-ka ugu weyn, waxaanu ku soo darnay awooda aad ku dari karto hoos u dhigista navkaaga. Fiiri qaybta sare ee sare (midig toosan) si aad u aragto sida loo sameeyay.

Tabs iyo kaniiniyo

Ku samee navigation sare fudud oo leh aul . Isku beddesho tabs ama kaniiniyada adiga oo ku daraya fasalka ku habboon.

Ku fiican qaybaha hoose ee macluumaadka sida boggaga dejinta akoonnadayada iyo wakhtiyada isticmaalayaasha ee u dhexeeya boggaga waxyaabaha la midka ah. Lagu heli karo qaababka tabbed ama kaniiniga.

• Guriga
• Profile
• Fariimaha
• Dejinta
• Xiriir

<ul class = "tabs" > 
  <li class = "firfircoon" ><a href = "" > Guriga </a></li>  
  <li><a href = "" > Profile </a></li> 
  <li><a href = "" > Farriimaha </a></li> 
  <li><a href = "" > Dejinta </a></li> 
  <li><a href = "" > La xidhiidh </a></li> 
</ul>

• Guriga
• Profile
• Fariimaha
• Dejinta
• Xiriir

<ul class = "kiniiniyada" > 
  <li class = "firfircoon" ><a href = "" > Guriga </a></li>  
  <li><a href = "" > Profile </a></li> 
  <li><a href = "" > Farriimaha </a></li> 
  <li><a href = "" > Dejinta </a></li> 
  <li><a href = "" > La xidhiidh </a></li> 
</ul>

Pagination

aadka u fudud oo qaab yar u qaabaysan bogga Rdio. Baloogga weyni way adag tahay in la waayo, si fudud ayaa loo miisaami karaa, wuxuuna bixiyaa meelo badan oo gujis ah.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "" > ← Hore </a></li>  
    <li class = "firfircoon" ><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 = "xiga" ><a href = "" > Xiga → </a></li>  
  </ul>
</div>

Digniinaha aasaasiga ah

Fariimo hal sadar ah oo loogu talagalay muujinta guul-darrada, guul-darrida suurtagalka ah, ama guusha ficilka. Gaar ahaan faa'iido u leh foomamka.

Jooji fariimaha

Farriimaha u baahan sharraxaad yar, waxaan haynaa digniinaha qaabka cutubka. Kuwani waxay ku fiican yihiin buunbuuninta farriimaha khaldan ee dheer, uga digaya isticmaalaha ficil la sugayo, ama kaliya soo bandhigida macluumaadka si xooga loo saaro bogga.

Hababka

Hababka — wada-hadallada ama sanduuqyada iftiinka - waxay ku fiican yihiin ficillada macnaha guud ee xaaladaha ay muhiim tahay in macnaha asalka ah la ilaaliyo.

Popovers

Isticmaal popovers si aad u bixiso macluumaad qoraal-hoosaad bogga adiga oo aan samaynayn qaabaynta.

Bootstrap waxaa lagu dhisay Preboot , xirmo il furan oo isku darka ah iyo doorsoomayaasha si loogu isticmaalo in ay la socoto Wax ka yar , horudhac CSS ah oo loogu talagalay horumarinta shabakadda si dhakhso leh oo sahlan.

Fiiri sida aan ugu isticmaalnay Preboot gudaha Bootstrap iyo sida aad uga faa'iidaysan karto haddii aad doorato inaad wax ka yar ka waddo mashruucaaga xiga.

Sida loo isticmaalo

Isticmaal doorashadan si aad si buuxda ugu isticmaasho Bootstrap's Yar doorsoomayaasha, isku darka, iyo buulka CSS adiga oo isticmaalaya javascript ee browserkaaga.

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

Ma dareemaysid xalka .js? Isku day app ka yar Mac ama isticmaal Node.js si aad u ururiso marka aad geyso koodka.

Maxaa ka mid ah

Waa kuwan qaar ka mid ah waxyaabaha ugu muhiimsan ee lagu daray Bootstrap Twitter-ka oo qayb ka ah Bootstrap. U gudub bogga Bootstrap ama bogga mashruuca Github si aad u soo dejiso oo aad wax badan uga barato.

Doorsoomayaasha midabka

Doorsoomayaasha in ka yar waxay ku fiican yihiin ilaalinta iyo cusboonaysiinta madax xanuunkaaga CSS ee bilaashka ah. Marka aad rabto inaad bedesho qiimaha midabka ama qiimaha inta badan la isticmaalo, ku cusboonaysii hal meel oo aad dejisay.

// Xiriirinta
@linkColor : #8b59c2;         
@linkColorHover :     madow ( @linkColor , 10 ); 
 
// Grays
@madow : # 000;             
@grayDark : khafiif (           @madow , 25 %); 
@cawlan : khafiif (               @madow , 50 %); 
@grayLight :          iftiimi ( @madow , 70 %); 
@grayLighter :        iftiimi ( @madow , 90 %); 
@cad : #ff;             
 
// Midabada Lahjadda
@buluug : #08b5fb;              
@ cagaar : # 46a546 ;             
@cas : #9d261d;               
@jaalle : #ffc40d;            
@orange : #f89406;            
@casaan : #c3325f;              
@purple : #7a43b6;            
 
// Asal ahaan
@saldhig : 20px ;          

Faallo

In ka yar ayaa sidoo kale bixisa qaab kale oo wax looga sheego marka lagu daro /* ... */ereyga caadiga ah ee CSS.

// Tani waa faallo
/* Tani sidoo kale waa faallo */

Isku qas wazoo

Mixins asal ahaan waxaa ka mid ah ama qaybo ka mid ah CSS, taas oo kuu oggolaanaysa inaad ku darto block of code mid. Waxay aad ugu fiican yihiin iibiyeyaasha guryaha hore loo sii dhigay sida box-shadow, jaangooyooyinka browser-ka-dhaafka ah, xirmooyinka xarfaha, iyo in ka badan. Hoos waxaa ah muunad ka mid ah isku darka ay ku jiraan Bootstrap.

Xarfaha xarfaha

# farta {
  . gacmo gaaban ( @miisaanka : caadiga ah , @size : 14px , @lineHeight : 20px ) {     
    font - cabbirka : @ size ; 
    font - miisaanka : @miisaanka ; 
    line - height : @lineHeight ; 
  }
  . sans - serif ( @miisaanka : caadiga ah , @size : 14px , @lineHeight : 20px ) {     
    font - qoyska : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - cabbirka : @ size ; 
    font - miisaanka : @miisaanka ; 
    line - height : @lineHeight ; 
  }
  . serif ( @miisaanka : caadiga ah , @size : 14px , @lineHeight : 20px ) {     
    font - qoyska : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - cabbirka : @ size ; 
    font - miisaanka : @miisaanka ; 
    line - height : @lineHeight ; 
  }
  . monospace ( @miisaanka : caadiga ah , @size : 12px , @lineHeight : 20px ) {     
    font - qoyska : "Monaco" , Courier New , monospace ;   
    font - cabbirka : @ size ; 
    font - miisaanka : @miisaanka ; 
    line - height : @lineHeight ; 
  }
}

Gradients

#gradient {
  . jiif ( @startColor : #555, @endColor: #333) { 
    asalka - midabka : @endColor ; 
    gadaal - ku celi : ku celi - x ;
    asalka - sawirka : - khtml - gradient ( toosan , sare bidix , sare midig , laga bilaabo ( @startColor ), ilaa ( @endColor )); // Konqueror   
    asalka - sawirka : - moz - linear - gradient ( bidix , @startColor , @endColor ); // FF 3.6+    
    asalka - sawirka : - ms - linear - gradient ( bidix , @startColor , @endColor ); // IE10    
    asalka - sawirka : - xirmo shabakad - gradient ( toosan , sare bidix , sare midig , midabka - joogsiga ( 0 % , @startColor ), midabka - joogsiga ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    asalka - sawirka : - webkit - linear - gradient ( bidix , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    asalka - sawirka : - o - toosan - gradient ( bidix , @startColor , @endColor ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    asalka - sawirka : toosan - gradient ( bidix , @startColor , @endColor ); // Le standard   
  }
  . toosan ( @startColor : #555, @endColor: #333) { 
    asalka - midabka : @endColor ; 
    gadaal - ku celi : ku celi - x ;
    asalka - sawirka : - khtml - gradient ( toosan , sare bidix , hoose bidix , laga bilaabo ( @startColor ), ilaa ( @endColor )); // Konqueror   
    asalka - sawirka : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    asalka - sawirka : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    asalka - sawirka : - webkit - gradient ( toosan , sare bidix , hoose bidix , midabka - joogsiga ( 0 % , @startColor ), midabka - joogsiga ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    asalka - sawirka : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    asalka - sawirka : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    asalka - sawirka : toosan - gradient ( @startColor , @endColor ); // Halbeegga  
  }
  . jihayn ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . toosan - saddex - midab ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Hawlgallada iyo nidaamka grid

Noqo mid qurux badan oo samee xoogaa xisaab ah si aad u dhaliso isku-dhafan dabacsan oo awood leh sida kan hoose.

// Dhererka
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Nidaamka Grid
. weel {
  ballac : @siteWidth ; 
  margin : 0 auto ;  
  . nadiifinta ();
}
. tiirarka ( @columnSpan : 1 ) {  
  bandhig : khadka ; 
  sabayn : bidix ;
  ballac : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margin - bidix : @gridGutterWidth ; 
  &: ugu horreeya - ilmaha {
    margin - bidix : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - bidix : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! muhiim ah ;          
}