Tarihi

A kwanakin farko na Twitter, injiniyoyi sun yi amfani da kusan kowane ɗakin karatu da suka saba da shi don biyan buƙatun gaba. Bootstrap ya fara ne azaman amsa ga ƙalubalen da aka gabatar da haɓaka cikin sauri yayin Hackweek na farko na Twitter.

Tare da taimako da ra'ayoyin injiniyoyi da yawa a Twitter, Bootstrap ya girma sosai don haɗawa ba kawai salo na asali ba, amma mafi kyawun ƙirar ƙirar gaba-gaba.

Kara karantawa akan dev.twitter.com ›

Tallafin mai lilo

Ana gwada Bootstrap kuma ana goyan bayan manyan masu bincike na zamani kamar Chrome, Safari, Internet Explorer, da Firefox.

• Sabbin Safari
• Sabon Google Chrome
• Firefox 4+
• Internet Explorer 7+
• Opera 11

Me ya hada

Bootstrap ya zo cikakke tare da haɗaɗɗen CSS, waɗanda ba a tattara ba, da samfuran misali.

• Duk fayiloli marasa asali na asali
• Cikakkun da aka tattara kuma an rage girman CSS
• Cikakken takardun jagororin salo
• Samfurin shafi na misali (ƙarin zuwa nan ba da jimawa ba)

Tsohuwar grid

Tsohuwar tsarin grid da aka bayar azaman ɓangare na Bootstrap shine grid mai faɗin 940px 16. Yana da ɗanɗano na mashahurin tsarin grid 960, amma ba tare da ƙarin gefe/padding a gefen hagu da dama ba.

Misali alamar grid

Kamar yadda aka nuna a nan, za a iya ƙirƙira wani tsari na asali tare da "ginshiƙai" guda biyu, kowanne ya faɗi adadin ginshiƙai 16 da muka ayyana a matsayin wani ɓangare na tsarin grid ɗin mu. Dubi misalan da ke ƙasa don ƙarin bambancin.

<div class = "jere" > 
  <div class = "span6 ginshiƙai" > 
    ...
  </div>
  <div class = "span10 ginshiƙai" > 
    ...
  </div>
</div>

Kafaffen shimfidar wuri

Tsohuwar kuma mai sauƙi 940px-fadi, shimfidar wuri na tsakiya don kusan kowane gidan yanar gizo ko shafi da aka samar ta guda <div.container>.

<jiki>
  <div class = "kwantena" > 
    ...
  </div>
</ jiki>

Tsarin ruwa

Madadin, tsarin shafi mai sassauƙa mai sassauƙa tare da min- da max-fasa da mashigin gefen hagu. Mafi kyau ga apps da docs.

<jiki>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "abun ciki" > 
      ...
    </div>
  </div>
</ jiki>

Kanun labarai & kwafi

Madaidaicin matsayi na rubutu don tsara shafukan yanar gizonku.

Gabaɗayan grid ɗin rubutun ya dogara ne akan ƙananan masu canji guda biyu a cikin fayil ɗin preboot.less: @basefontda @baseline. Na farko shine girman font-girman da aka yi amfani da shi duka kuma na biyu shine tsayin layin tushe.

Muna amfani da waɗancan sauye-sauye, da wasu maths, don ƙirƙira margins, paddings, da tsayin layi na kowane nau'in mu da ƙari.

h1. Take 1

h2. Take 2

h3. Take 3

h4. Take 4

h5. Take 5

h6. Take 6

Misali sakin layi

Nullam quis risus eget urna mollis ornare vel eu leo. Duk da haka, muna magana ne game da abin ban dariya da kuma ban mamaki. Nullam id dolor id nibh ultricies vehicula ut id elit.

Misalin taken Yana da babban taken…

Misc abubuwa

Amfani da girmamawa, adireshi, & gajarta

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

Lokacin amfani

Ya kamata a yi amfani da alamun girmamawa ( <strong>da <em>) don nuna ƙarin mahimmanci ko jaddada kalma ko jumla dangane da kwafinta na kewaye. Yi amfani <strong>da mahimmanci kuma <em>don jaddada damuwa .

Ƙaddamarwa a cikin sakin layi

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.

Lura: Har yanzu yana da kyau a yi amfani <b>da <i>alama a cikin HTML5 kuma ba dole ba ne a yi musu salo mai ƙarfi da rubutu ba, bi da bi (ko da yake idan akwai ƙarin ma'anar ma'anar, yi amfani da shi). <b>ana nufin haskaka kalmomi ko jimloli ba tare da isar da ƙarin mahimmanci ba, yayin <i>da galibin murya ne, kalmomin fasaha, da sauransu.

Adireshi

Ana <address>amfani da kashi don bayanin tuntuɓar kakansa na kusa, ko duka jikin aikin. Ga yadda abin yake:

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

Lura: Kowane layi a cikin <address>dole ne ya ƙare tare da karya-layi ( <br />) ko a naɗe shi cikin alamar toshewa (misali, <p>) don tsara abun ciki yadda ya kamata.

Gajartawa

Don gajartawa da gajarta, yi amfani da <abbr>tag ( <acronym>an soke shi a cikin HTML5 ). Saka fom ɗin gajeriyar hannu a cikin alamar kuma saita take don cikakken suna.

Blockquotes

<blockquote> <p> <small>

Yadda za a faɗi

Don haɗa da blockquote, kunsa <blockquote>kusa <p>da <small>alama. Yi amfani da <small>kashi don faɗi tushen ku kuma za ku sami dash —a gabansa.

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

Dokta Julius Hibbert

Ba a ba da oda ba<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis a cikin pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculus neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat a
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Mara salo<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis a cikin pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculus neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat a
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

An yi oda<ol>

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

Bayanidl

Jerin bayanin

Jerin bayanin ya dace don ma'anar kalmomi.

Euismod

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

Donec id un mi porta gravida a eget metus.

Malesuada porta

Ka yi la'akari da abin da ake kira euismod.

Gine-gine tebur

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

Tables suna da kyau-don abubuwa da yawa. Manyan teburi, duk da haka, suna buƙatar ɗan ƙaƙƙarfan soyayya don zama mai amfani, daidaitacce, da abin karantawa (a matakin lambar). Anan akwai 'yan shawarwari don taimakawa.

Koyaushe ku nannade rubutun ku a cikin <thead>irin wannan matsayi shine <thead>> <tr>> <th>.

Hakazalika da rubutun kan layi, duk abubuwan da ke cikin teburin ku yakamata a nannade su cikin ta <tbody>yadda tsarinku ya kasance <tbody>> <tr>> <td>.

Misali: Tsoffin salon tebur

Duk teburi za a tsara su ta atomatik tare da mahimman iyakoki kawai don tabbatar da karantawa da kiyaye tsari. Babu buƙatar ƙara ƙarin azuzuwan ko halaye.

#	Sunan rana	Sunan mahaifa	Harshe
1	Wasu	Daya	Turanci
2	Joe	Packack	Turanci
3	Stu	Haushi	Lambar

<tebur>
  ...
</text>

Misali: Zaki-tsitsi

Samun ɗan zato tare da tebur ɗinku ta ƙara zakin zebra - ƙara .zebra-stripedaji kawai.

#	Sunan rana	Sunan mahaifa	Harshe
1	Wasu	Daya	Turanci
2	Joe	Packack	Turanci
3	Stu	Haushi	Lambar

Lura: Zebra-striping shine haɓakawa na ci gaba da ba samuwa ga tsofaffin masu bincike kamar IE8 da ƙasa.

< class class = "zebra-striped" > 
...
</text>

Misali: Zaure-Tabled w/TableSorter.js

Ɗaukar misalin da ya gabata, muna inganta fa'idar teburin mu ta hanyar samar da aikin rarrabawa ta hanyar jQuery da plugin ɗin Tablesorter . Danna kowane ginshiƙi don canza nau'in.

#	Sunan rana	Sunan mahaifa	Harshe
1	Naku	Daya	Turanci
2	Joe	Packack	Turanci
3	Stu	Haushi	Lambar

<script src = "js/jquery/jquery.tablesorter.min.js" > </script> 
<rubutu > 
  $ ( aiki () { 
    $ ( "tebur# sortTableExample" ). tablesorter ({ irinList : [[ 1 , 0 ]]] );  
  });
</script>
< class class = "zebra-striped" > 
  ...
</text>

Salon tsoho

Ana ba da kowane nau'i nau'i na asali don gabatar da su a cikin hanyar da za a iya karantawa da kuma daidaitawa. An ba da salo don shigar da rubutu, zaɓi lissafin, wuraren rubutu, maɓallan rediyo da akwatunan rajista, da maɓalli.

Misali tatsuniya

X-Babban Shigarwa

Zaɓi

1 2 3 4 5

Zaɓi

1 2 3 4 5

Shigar da ba za a iya gyarawa ba

Wasu Daraja Anan

An kashe Input

X-Babban Shigarwa

Ƙananan rubutun taimako

Misali tatsuniya

Rubutun da aka riga aka shirya

@

Akwatin Tambayoyi da aka riga aka shirya

Akwatin Tambayoyi da aka Rataye

Shigar da Fayil

Misali tatsuniya

Jerin Zaɓuɓɓuka

• Zaɓin ɗaya shine wannan da wancan — tabbas kun haɗa da dalilin da yasa yake da kyau
• Za a iya bincika zaɓi na biyu kuma a haɗa su cikin sakamakon fom
• Zabi na uku na iya-e, kun ganta-kuma za'a bincika kuma a haɗa su cikin sakamakon fom
• Ba za a iya bincika zaɓi na huɗu ba saboda an kashe shi.

Lura: Lakabi suna kewaye da duk zaɓuɓɓukan don wuraren dannawa da yawa da mafi girman nau'i mai amfani.

Rage kwanan wata

ku Ana nuna duk lokuta azaman daidaitaccen lokacin Pacific (GMT -08:00).

Yankin rubutu

Toshe rubutun taimako don kwatanta filin da ke sama idan an buƙata.

Jerin Zaɓuɓɓuka

• Zaɓin ɗaya shine wannan da wancan — tabbas kun haɗa da dalilin da yasa yake da kyau
• Za a iya bincika zaɓi na biyu kuma a haɗa su cikin sakamakon fom

Ajiye Canje-canje  Soke

Siffofin da aka tattara

Ƙara .form-stackedzuwa HTML na fom ɗin ku kuma za ku sami lakabi a saman filayen su maimakon hagu. Wannan yana aiki da kyau idan fom ɗinku gajeru ne ko kuna da ginshiƙai biyu na abubuwan shigar da sifofi masu nauyi.

Misali tatsuniya

X-Babban Shigarwa

Zaɓi

1 2 3 4 5

Misali tatsuniya

X-Babban Shigarwa

Ƙananan rubutun taimako

Jerin Zaɓuɓɓuka

• Zaɓin ɗaya shine wannan da wancan — tabbas kun haɗa da dalilin da yasa yake da kyau
• Za a iya bincika zaɓi na biyu kuma a haɗa su cikin sakamakon fom

Lura: Lakabi suna kewaye da duk zaɓuɓɓukan don wuraren dannawa da yawa da mafi girman nau'i mai amfani.

Ajiye Canje-canje  Soke

Maɓalli

A matsayin al'ada, ana amfani da maɓalli don ayyuka yayin da ake amfani da hanyoyin haɗin gwiwa don abubuwa. Misali, "Zazzagewa" na iya zama maɓalli kuma "aikin kwanan nan" na iya zama hanyar haɗi.

Duk maɓallai sun saba zuwa salon launin toka mai haske, amma ana iya amfani da nau'ikan azuzuwan aiki don nau'ikan launi daban-daban. Waɗannan azuzuwan sun haɗa da ajin shuɗi .primary, ajin haske-blue .info, ajin kore .success, da kuma jan .dangeraji. Bugu da ƙari, mirgina salon ku abu ne mai sauƙi peasy.

Misali maɓallan

Za a iya amfani da salon maɓalli ga kowane abu tare da abin da aka .btnyi amfani da shi. Yawanci kuna son amfani da waɗannan zuwa kawai <a>, <button>, kuma zaɓi <input>abubuwa. Ga yadda abin yake:

Madadin girma dabam

Kuna son manyan maɓalli ko ƙarami? Ku zo da shi!

Jihar naƙasassu

Don maɓallan da ba su aiki ko ƙa'idar ta kashe su saboda dalili ɗaya ko wani, yi amfani da yanayin nakasa. Wato .disableddon haɗin kai da :disabledabubuwan <button>abubuwa.

Hanyoyin haɗi

Maɓalli

Menene

Babban mashaya na mu kafaffen mashaya ne wanda ke dauke da tambarin gidan yanar gizo ko suna, kewayawa na farko, da sigar bincike.

Mai iya daidaitawa

Duk abubuwan da ke ciki, da kuma gabaɗayan saman saman ma, zaɓi ne. Za ka iya zaɓar haɗa tambari/suna, kewayawa, bincike, da nav na biyu-ko kowane haɗin wancan.

An haɗa abubuwan saukarwa

A matsayin wani ɓangare na babban kewayawa, mun haɗa da ikon da za ku ƙara abubuwan da aka sauke zuwa nav ɗinku. Duba babban kewayawa na biyu a sama (daidaitacce) don ganin yadda aka yi.

Tabs da kwayoyi

Ƙirƙiri sauƙi na kewayawa na sakandare tare da <ul>. Musanya tsakanin shafuka ko kwayoyi ta ƙara ajin da ya dace.

Mai girma ga ƙananan sassan abun ciki kamar shafukan saitunan asusun mu da lokutan masu amfani don juyawa tsakanin shafuka na abun ciki. Akwai a cikin tabbed ko tsarin kwaya.

• Gida
• Bayanan martaba
• Saƙonni
• Saituna
• Tuntuɓar

<ul class = "shafukan" > 
  <li class = "active" ><a href = "#" > Gida </a></li>  
  <li><a href = "#" > Bayanan martaba </a></li> 
  <li><a href = "#" > Saƙonni </a></li> 
  <li><a href = "#" > Saituna </a></li> 
  <li><a href = "#" > Tuntuɓi </a></li> 
</ul>

• Gida
• Bayanan martaba
• Saƙonni
• Saituna
• Tuntuɓar

<ul class = "kwayoyin kwayoyi" > 
  <li class = "active" ><a href = "#" > Gida </a></li>  
  <li><a href = "#" > Bayanan martaba </a></li> 
  <li><a href = "#" > Saƙonni </a></li> 
  <li><a href = "#" > Saituna </a></li> 
  <li><a href = "#" > Tuntuɓi </a></li> 
</ul>

Pagination

Mafi sauƙaƙa da ƙaramin salo mai salo wanda Rdio yayi wahayi. Babban toshe yana da wuya a rasa, sauƙin daidaitawa, kuma yana ba da manyan wuraren dannawa.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Na baya </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 = "na gaba" ><a href = "#" > Gaba → </li>  
  </ul>
</div>

Fadakarwa na asali

div.alert-message

Saƙonnin layi ɗaya don nuna gazawa, yuwuwar gazawa, ko nasarar aiki. Musamman amfani ga siffofin.

Toshe saƙonni

div.alert-message.block-message

Don saƙonnin da ke buƙatar ɗan bayani, muna da faɗakarwar salon sakin layi. Waɗannan cikakke ne don busa saƙonnin kuskure masu tsayi, gargaɗin mai amfani da wani mataki na jiran aiki, ko gabatar da bayanai kawai don ƙarin girmamawa akan shafin.

Modals

Modals — maganganu ko akwatunan haske — suna da kyau don ayyukan mahallin a cikin yanayi inda yana da mahimmanci a kiyaye mahallin baya.

Tukwici na Kayan aiki

Twipsies suna da fa'ida sosai don taimaka wa mai amfani da ya ruɗe da nuna su ta hanya madaidaiciya.

Popovers

Yi amfani da popovers don samar da bayanan rubutu zuwa shafi ba tare da shafar shimfidar wuri ba.

An gina Bootstrap tare da Preboot , buɗaɗɗen tushen fakitin mixins da masu canji da za a yi amfani da su tare da Kadan , mai gabatar da CSS don ci gaban yanar gizo cikin sauri da sauƙi.

Duba yadda muka yi amfani da Preboot a Bootstrap da kuma yadda za ku iya amfani da shi idan kun zaɓi gudanar da ƙasa akan aikinku na gaba.

Yadda ake amfani da shi

Yi amfani da wannan zaɓi don yin cikakken amfani da Bootstrap's Ƙananan masu canji, mixins, da gida a cikin CSS ta hanyar javascript a cikin burauzar ku.

<link rel = "stylesheet/less" href = "kasa/bootstrap.less" kafofin watsa labarai = "duk" />    
<script src = "js/less-1.1.3.min.js" > </script> 

Ba jin maganin .js? Gwada ƙarancin Mac app ko amfani da Node.js don haɗawa lokacin da kuka tura lambar ku.

Me ya hada

Anan akwai wasu mahimman abubuwan abubuwan da aka haɗa a cikin Bootstrap na Twitter a matsayin wani ɓangare na Bootstrap. Jeka zuwa gidan yanar gizon Bootstrap ko shafin aikin Github don saukewa da ƙarin koyo.

Masu canji

Maɓalli a Ƙananan sun dace don kiyayewa da sabunta ciwon kai na CSS kyauta. Lokacin da kake son canza ƙimar launi ko ƙimar da ake yawan amfani da ita, sabunta shi a wuri ɗaya kuma an saita ku.

// Hanyoyin haɗi
@linkColor : #8b59c2;         
@linkColorHover :     duhu ( @linkColor , 10 ); 
 
// Gwarzo
@baki : #000;             
@grayDark :           haske ( @black , 25 %); 
@ launin toka : haske (               @black , 50 %); 
@GreyLight :          haske ( @black , 70 %); 
@grayLighter :        haske ( @black , 90 %); 
@farar : #ff;             
 
// Launukan lafazi
@blue : #08b5fb;              
@ kore : #46a546;             
@ja : #9d261d;               
@rawaya : #ffc40d;            
@orange : #f89406;            
@ruwan ruwa : #c3325f;              
@m : #7a43b6;            
 
// Gishiri na Baseline
@bawant : 13px ;          
@batun : 18px ;          

Yin sharhi

Kadan kuma yana ba da wani salon sharhi ban da ma'auni na al'ada na CSS /* ... */.

// Wannan sharhi ne
/* Wannan kuma comment ne */

Ya haɗu da wazoo

Mixins sun haɗa da asali ko ɓangarori don CSS, yana ba ku damar haɗa toshe na lamba zuwa ɗaya. Suna da kyau ga kaddarorin prefixed na mai siyarwa kamarbox-shadow , ginshiƙan mai binciken giciye, tarin rubutu, da ƙari. A ƙasa akwai samfurin mixins waɗanda aka haɗa tare da Bootstrap.

Rubutun haruffa

# font {
  . shorthand ( @nauyi : al'ada , @ size : 14px , @lineHeight : 20px ) {     
    font - girman : @ size ; 
    font - nauyi : @nauyi ; 
    layi - tsawo : @lineHeight ; 
  }
  . sans - serif ( @weight : al'ada , @ size : 14px , @lineHeight : 20px ) {     
    font - iyali : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - girman : @ size ; 
    font - nauyi : @nauyi ; 
    layi - tsawo : @lineHeight ; 
  }
  . serif ( @nauyi : al'ada , @size : 14px , @lineHeight : 20px ) {     
    font - iyali : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - girman : @ size ; 
    font - nauyi : @nauyi ; 
    layi - tsawo : @lineHeight ; 
  }
  . monospace ( @ nauyi : al'ada , @ size : 12px , @lineHeight : 20px ) {     
    font - iyali : "Monaco" , Courier New , monospace ;   
    font - girman : @ size ; 
    font - nauyi : @nauyi ; 
    layi - tsawo : @lineHeight ; 
  }
}

Gradients

#gradient {
  . kwance ( @startColor : #555, @endColor: #333) { 
    bango - launi : @endColor ; 
    baya - maimaita : maimaita - x ;
    baya - hoto : - khtml - gradient ( mikakke , saman hagu , saman dama , daga ( @startColor ), zuwa ( @endColor )); // Konqueror   
    baya - hoto : - moz - layi - gradient ( hagu , @startColor , @endColor ); // FF 3.6+    
    baya - hoto : - ms - madaidaiciya - gradient ( hagu , @startColor , @endColor ); // IE10    
    baya - hoto : - webkit - gradient ( mikakke , saman hagu , saman dama , launi - tsayawa ( 0 % , @startColor ), launi - tsayawa ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    baya - hoto : - webkit - linear - gradient ( hagu , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    baya - hoto : - o - madaidaiciya - gradient ( hagu , @startColor , @endColor ); // Opera 11.10    
    baya - hoto : madaidaiciya - gradient ( hagu , @startColor , @endColor ); // Le Standard   
  }
  . a tsaye ( @startColor : #555, @endColor: #333) { 
    bango - launi : @endColor ; 
    baya - maimaita : maimaita - x ;
    baya - hoto : - khtml - gradient ( mikakke , saman hagu , hagu kasa , daga ( @startColor ), zuwa ( @endColor )); // Konqueror   
    baya - hoto : - moz - layi - gradient ( @startColor , @endColor ); // FF 3.6+   
    baya - hoto : - ms - layi - gradient ( @startColor , @endColor ); // IE10   
    baya - hoto : - webkit - gradient ( mikakke , saman hagu , hagu kasa , launi - tsayawa ( 0 % , @startColor ), launi - tsayawa ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    baya - hoto : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    baya - hoto : - o - madaidaiciya - gradient ( @startColor , @endColor ); // Opera 11.10   
    baya - hoto : madaidaiciya - gradient ( @startColor , @endColor ); // Ma'auni  
  }
  . shugabanci ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . a tsaye - uku - launuka ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Ayyuka da tsarin grid

Yi zato kuma yi wasu lissafi don samar da sassauƙa da haɗaɗɗun haɗaɗɗiya kamar na ƙasa.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Tsarin Grid
. akwati {
  fadin : @siteWidth ; 
  gefe : 0 atomatik ;  
  . tsaftacewa ();
}
. ginshiƙai ( @columnSpan : 1 ) {  
  nisa : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. biya ( @columnOffset : 1 ) {  
  gefe - hagu : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}