Kasaysayan

Sa mga naunang araw ng Twitter, ginamit ng mga inhinyero ang halos anumang library na pamilyar sa kanila upang matugunan ang mga kinakailangan sa front-end. Nagsimula ang Bootstrap bilang sagot sa mga hamon na ipinakita at mabilis na bumilis ang pag-unlad sa unang Hackweek ng Twitter.

Sa tulong at feedback ng maraming mga inhinyero sa Twitter, ang Bootstrap ay lumago nang malaki upang sumaklaw hindi lamang sa mga pangunahing istilo, ngunit mas elegante at matibay na mga pattern ng disenyo sa harap.

Magbasa pa sa dev.twitter.com ›

Suporta sa browser

Ang Bootstrap ay sinubukan at sinusuportahan sa mga pangunahing modernong browser tulad ng Chrome, Safari, Internet Explorer, at Firefox.

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

Ano ang kasama

Kumpleto ang Bootstrap sa pinagsama-samang CSS, hindi na-compile, at mga halimbawang template.

• Lahat ng orihinal na .less na file
• Ganap na pinagsama-sama at pinaliit na CSS
• Kumpletuhin ang dokumentasyon ng styleguide
• Halimbawang template ng pahina (higit pang darating sa lalong madaling panahon)

Default na grid

Ang default na grid system na ibinigay bilang bahagi ng Bootstrap ay isang 940px na lapad na 16-column na grid. Ito ay lasa ng sikat na 960 grid system, ngunit walang karagdagang margin/padding sa kaliwa at kanang bahagi.

Halimbawang grid markup

Gaya ng ipinapakita dito, maaaring gumawa ng pangunahing layout gamit ang dalawang "column," bawat isa ay sumasaklaw sa isang bilang ng 16 na pundasyong column na tinukoy namin bilang bahagi ng aming grid system. Tingnan ang mga halimbawa sa ibaba para sa higit pang mga variation.

<div class = "row" > 
  <div class = "span6 na hanay" > 
    ...
  </div>
  <div class = "span10 column" > 
    ...
  </div>
</div>

Nakapirming layout

Ang default at simpleng 940px-wide, nakasentro na layout para sa halos anumang website o page na ibinigay ng iisang <div.container>.

<katawan>
  <div class = "lalagyan" > 
    ...
  </div>
</body>

Layout ng likido

Isang alternatibo, nababaluktot na istraktura ng tuluy-tuloy na pahina na may min- at max-width at isang kaliwang sidebar. Mahusay para sa mga app at doc.

<katawan>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "nilalaman" > 
      ...
    </div>
  </div>
</body>

Mga pamagat at kopya

Isang karaniwang typographic hierarchy para sa pagbubuo ng iyong mga webpage.

Ang buong typographic grid ay batay sa dalawang Less variable sa aming preboot.less file: @basefontat @baseline. Ang una ay ang batayang laki ng font na ginamit sa kabuuan at ang pangalawa ay ang batayang taas ng linya.

Ginagamit namin ang mga variable na iyon, at ilang matematika, upang gawin ang mga margin, padding, at line-height ng lahat ng aming uri at higit pa.

h1. Pamagat 1

h2. Pamagat 2

h3. Pamagat 3

h4. Pamagat 4

h5. Pamagat 5

h6. Pamagat 6

Halimbawang talata

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

Halimbawang heading May sub-heading…

Misc. mga elemento

Paggamit ng diin, mga address, at mga pagdadaglat

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

Kailan gagamitin

Dapat gamitin ang mga emphasis tag ( <strong>at <em>) upang ipahiwatig ang karagdagang kahalagahan o diin ng isang salita o parirala na nauugnay sa nakapaligid na kopya nito. Gamitin <strong>para sa kahalagahan at <em>para sa diin na diin.

Diin sa isang talata

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.

Tandaan: Okay pa rin ang paggamit <b>at mga <i>tag sa HTML5 at hindi kailangang i-istilong bold at italic ang mga ito, ayon sa pagkakabanggit (bagaman kung mayroong mas semantic na elemento, gamitin ito). <b>ay nilalayong i-highlight ang mga salita o parirala nang hindi nagbibigay ng karagdagang kahalagahan, habang <i>kadalasan ay para sa boses, teknikal na termino, atbp.

Mga address

Ginagamit ang <address>elemento para sa impormasyon sa pakikipag-ugnayan para sa pinakamalapit na ninuno nito, o ang buong katawan ng trabaho. Narito ang hitsura nito:

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

Tandaan: Ang bawat linya sa isang <address>ay dapat magtapos sa isang line-break ( <br />) o balot sa isang block-level na tag (hal., <p>) upang maayos na buuin ang nilalaman.

Mga pagdadaglat

Para sa mga pagdadaglat at acronym, gamitin ang <abbr>tag ( <acronym>ay hindi na ginagamit sa HTML5 ). Ilagay ang shorthand form sa loob ng tag at magtakda ng pamagat para sa kumpletong pangalan.

Blockquotes

<blockquote> <p> <small>

Paano mag-quote

Upang magsama ng blockquote, balutin at <blockquote>mga tag. Gamitin ang elemento upang banggitin ang iyong pinagmulan at makakakuha ka ng em dash bago ito.<p><small><small>&mdash;

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

Dr. Julius Hibbert

Hindi nakaayos<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at masa
• Facilisis sa 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 umupo amet erat nunc
• Eget porttitor lorem

Walang istilo<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at masa
• Facilisis sa 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 umupo amet erat nunc
• Eget porttitor lorem

Inutusan<ol>

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

Paglalarawandl

Mga listahan ng paglalarawan

Ang isang listahan ng paglalarawan ay perpekto para sa pagtukoy ng mga termino.

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.

Pagbuo ng mga mesa

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

Mahusay ang mga mesa—para sa maraming bagay. Gayunpaman, ang magagandang talahanayan ay nangangailangan ng kaunting pag-ibig sa markup upang maging kapaki-pakinabang, nasusukat, at nababasa (sa antas ng code). Narito ang ilang mga tip upang makatulong.

Palaging balutin ang iyong mga header ng column sa isang <thead>tulad na hierarchy ay <thead>> <tr>> <th>.

Katulad ng mga header ng column, ang lahat ng nilalaman ng katawan ng iyong talahanayan ay dapat na nakabalot sa isang <tbody>upang ang iyong hierarchy ay <tbody>> <tr>> <td>.

Halimbawa: Mga default na istilo ng talahanayan

Ang lahat ng mga talahanayan ay awtomatikong mai-istilo na may mga mahahalagang hangganan lamang upang matiyak ang pagiging madaling mabasa at mapanatili ang istraktura. Hindi na kailangang magdagdag ng mga karagdagang klase o katangian.

#	Pangalan	Huling pangalan	Wika
1	Ang ilan	Isa	Ingles
2	Joe	Anim na pack	Ingles
3	Stu	Dent	Code

<talahanayan>
  ...
</table>

Halimbawa: Zebra-striped

Maging medyo magarbo sa iyong mga talahanayan sa pamamagitan ng pagdaragdag ng zebra-striping—idagdag lang ang .zebra-stripedklase.

#	Pangalan	Huling pangalan	Wika
1	Ang ilan	Isa	Ingles
2	Joe	Anim na pack	Ingles
3	Stu	Dent	Code

Tandaan: Ang zebra-striping ay isang progresibong pagpapahusay na hindi available para sa mga mas lumang browser tulad ng IE8 at mas mababa.

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

Halimbawa: Zebra-striped w/ TableSorter.js

Sa pagkuha sa nakaraang halimbawa, pinapabuti namin ang pagiging kapaki-pakinabang ng aming mga talahanayan sa pamamagitan ng pagbibigay ng pag-uuri ng functionality sa pamamagitan ng jQuery at ang Tablesorter plugin. I-click ang anumang header ng column upang baguhin ang pag-uuri.

#	Pangalan	Huling pangalan	Wika
1	Iyong	Isa	Ingles
2	Joe	Anim na pack	Ingles
3	Stu	Dent	Code

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( function () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-striped" > 
  ...
</table>

Mga default na istilo

Ang lahat ng mga form ay binibigyan ng mga default na istilo upang ipakita ang mga ito sa isang nababasa at nasusukat na paraan. Ibinibigay ang mga istilo para sa mga text input, mga piling listahan, mga textarea, mga radio button at checkbox, at mga button.

Halimbawa ng anyo ng alamat

X-Malaking Input

Pumili

1 2 3 4 5

Pumili

1 2 3 4 5

Hindi Mae-edit na Input

Ilang Halaga Dito

Naka-disable na Input

X-Malaking Input

Maliit na snippet ng text ng tulong

Halimbawa ng anyo ng alamat

Prepended na Teksto

@

Prepended na Checkbox

Nakadugtong na Checkbox

File Input

Halimbawa ng anyo ng alamat

Listahan ng mga Opsyon

• Ang opsyon isa ay ito at iyon—siguraduhing isama kung bakit ito mahusay
• Ang opsyon na dalawa ay maaari ding suriin at isama sa mga resulta ng form
• Ang pagpipiliang tatlo ay maaari—oo, nahulaan mo na—masuri din at isama sa mga resulta ng form
• Ang apat na opsyon ay hindi maaaring suriin dahil ito ay hindi pinagana.

Tandaan: Ang mga label ay pumapalibot sa lahat ng mga opsyon para sa mas malalaking lugar ng pag-click at isang mas magagamit na form.

Saklaw ng Petsa

sa Ang lahat ng oras ay ipinapakita bilang Pacific Standard Time (GMT -08:00).

Textarea

Block ng text ng tulong upang ilarawan ang field sa itaas kung kinakailangan.

Listahan ng mga Opsyon

• Ang opsyon isa ay ito at iyon—siguraduhing isama kung bakit ito mahusay
• Ang opsyon na dalawa ay maaari ding suriin at isama sa mga resulta ng form

I-save ang mga pagbabago  Kanselahin

Mga nakasalansan na form

Idagdag .form-stackedsa HTML ng iyong form at magkakaroon ka ng mga label sa ibabaw ng kanilang mga field sa halip na sa kanilang kaliwa. Mahusay itong gumagana kung maikli ang iyong mga form o mayroon kang dalawang column ng mga input para sa mas mabibigat na form.

Halimbawa ng anyo ng alamat

X-Malaking Input

Pumili

1 2 3 4 5

Halimbawa ng anyo ng alamat

X-Malaking Input

Maliit na snippet ng text ng tulong

Listahan ng mga Opsyon

• Ang opsyon isa ay ito at iyon—siguraduhing isama kung bakit ito mahusay
• Ang opsyon na dalawa ay maaari ding suriin at isama sa mga resulta ng form

Tandaan: Ang mga label ay pumapalibot sa lahat ng mga opsyon para sa mas malalaking lugar ng pag-click at isang mas magagamit na form.

I-save ang mga pagbabago  Kanselahin

Mga Pindutan

Bilang isang convention, ang mga button ay ginagamit para sa mga aksyon habang ang mga link ay ginagamit para sa mga bagay. Halimbawa, ang "I-download" ay maaaring isang button at ang "kamakailang aktibidad" ay maaaring isang link.

Default ang lahat ng button sa isang light grey na istilo, ngunit maaaring ilapat ang ilang functional class para sa iba't ibang istilo ng kulay. Kasama sa mga klaseng ito ang isang asul .primaryna klase, isang mapusyaw na asul na .infoklase, isang berdeng .successklase, at isang pulang .dangerklase. Dagdag pa, ang pag-roll ng iyong sariling mga estilo ay madaling peasy.

Halimbawang mga pindutan

Maaaring ilapat ang mga istilo ng button sa anumang bagay na may .btninilapat. Karaniwang gugustuhin mong ilapat ang mga ito sa <a>, <button>, at mga piling <input>elemento lamang. Narito ang hitsura nito:

Mga kahaliling laki

Gusto mo ba ng mas malaki o mas maliit na mga pindutan? Gawin mo ito!

Estadong may kapansanan

Para sa mga button na hindi aktibo o hindi pinagana ng app para sa isang dahilan o iba pa, gamitin ang disabled na estado. Iyon ay .disabledpara sa mga link at :disabledpara sa mga <button>elemento.

Mga link

Mga Pindutan

Ano ito

Ang aming topbar ay isang nakapirming bar na naglalaman ng logo o pangalan ng website, pangunahing nabigasyon, at form ng paghahanap.

Nako-customize

Ang lahat ng elemento sa loob, at ang buong topbar din, ay opsyonal. Maaari mong piliing magsama ng logo/pangalan, nav, paghahanap, at pangalawang nav—o anumang kumbinasyon niyan.

Kasama ang mga dropdown

Bilang bahagi ng pangunahing nabigasyon, isinama namin ang kakayahan para sa iyo na magdagdag ng mga dropdown sa iyong nav. Tingnan ang pangalawang nav sa itaas (naka-align sa kanan) upang makita kung paano ito ginagawa.

Mga tab at tabletas

Lumikha ng simpleng pangalawang nabigasyon gamit ang isang <ul>. Magpalit sa pagitan ng mga tab o tableta sa pamamagitan ng pagdaragdag ng naaangkop na klase.

Mahusay para sa mga sub-section ng nilalaman tulad ng aming mga pahina ng mga setting ng account at mga timeline ng user para sa pagpalipat-lipat sa pagitan ng mga pahina ng katulad na nilalaman. Magagamit sa mga istilo ng tab o tableta.

• Bahay
• Profile
• Mga mensahe
• Mga setting
• Makipag-ugnayan

<ul class = "mga tab" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profile </a></li> 
  <li><a href = "#" > Mga Mensahe </a></li> 
  <li><a href = "#" > Mga Setting </a></li> 
  <li><a href = "#" > Makipag -ugnayan sa </a></li> 
</ul>

• Bahay
• Profile
• Mga mensahe
• Mga setting
• Makipag-ugnayan

<ul class = "mga tabletas" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profile </a></li> 
  <li><a href = "#" > Mga Mensahe </a></li> 
  <li><a href = "#" > Mga Setting </a></li> 
  <li><a href = "#" > Makipag -ugnayan sa </a></li> 
</ul>

Pagbilang ng pahina

Ultra simplistic at minimally styled pagination na inspirasyon ng Rdio. Ang malaking bloke ay mahirap makaligtaan, madaling masusukat, at nagbibigay ng malalaking lugar ng pag-click.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Nakaraang </a></li>  
    <li class = "aktibo" ><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>

Mga pangunahing alerto

div.alert-message

Isang linyang mensahe para sa pag-highlight ng kabiguan, posibleng pagkabigo, o tagumpay ng isang aksyon. Lalo na kapaki-pakinabang para sa mga form.

I-block ang mga mensahe

div.alert-message.block-message

Para sa mga mensaheng nangangailangan ng kaunting paliwanag, mayroon kaming mga alerto sa istilo ng talata. Ang mga ito ay perpekto para sa pagbubula ng mas mahabang mga mensahe ng error, babala sa isang gumagamit ng isang nakabinbing aksyon, o pagpapakita lamang ng impormasyon para sa higit na diin sa pahina.

Mga modal

Ang mga modal—mga dialog o lightbox—ay mahusay para sa mga aksyong ayon sa konteksto sa mga sitwasyon kung saan mahalagang mapanatili ang konteksto ng background.

Mga Tip sa Tool

Ang Twipsies ay sobrang kapaki-pakinabang para sa pagtulong sa isang nalilitong user at pagturo sa kanila sa tamang direksyon.

Mga Popover

Gumamit ng mga popover upang magbigay ng subtextuwal na impormasyon sa isang pahina nang hindi naaapektuhan ang layout.

Binuo ang Bootstrap gamit ang Preboot , isang open-source pack ng mga mixin at variable na gagamitin kasabay ng Less , isang CSS preprocessor para sa mas mabilis at mas madaling pag-develop ng web.

Tingnan kung paano namin ginamit ang Preboot sa Bootstrap at kung paano mo ito magagamit kung pipiliin mong magpatakbo ng Mas kaunti sa iyong susunod na proyekto.

Paano ito gamitin

Gamitin ang opsyong ito upang lubos na magamit ang Mga Mas kaunting variable, mixin, at nesting ng Bootstrap sa CSS sa pamamagitan ng javascript sa iyong browser.

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

Hindi nararamdaman ang .js na solusyon? Subukan ang Less Mac app o gamitin ang Node.js para mag-compile kapag na-deploy mo ang iyong code.

Ano ang kasama

Narito ang ilan sa mga highlight ng kung ano ang kasama sa Twitter Bootstrap bilang bahagi ng Bootstrap. Tumungo sa website ng Bootstrap o pahina ng proyekto ng Github para mag-download at matuto pa.

Mga variable

Ang mga variable sa Less ay perpekto para sa pagpapanatili at pag-update ng iyong CSS na walang sakit sa ulo. Kapag gusto mong baguhin ang value ng kulay o value na madalas gamitin, i-update ito sa isang lugar at nakatakda ka na.

// Mga link
@linkColor : #8b59c2;         
@linkColorHover :     darken ( @linkColor , 10 ); 
 
// Mga Gray
@black : #000;             
@grayDark :           gumaan ( @black , 25 %); 
@gray :               lumiwanag ( @black , 50 %); 
@grayLight :          gumaan ( @black , 70 %); 
@grayLighter :        gumaan ( @black , 90 %); 
@white : #fff;             
 
// Mga Kulay ng Accent
@blue : #08b5fb;              
@berde : #46a546;             
@pula : #9d261d;               
@dilaw : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@purple : #7a43b6;            
 
// Baseline grid
@basefont : 13px ;          
@baseline : 18px ;          

Nagkomento

Nagbibigay din ang Less ng isa pang istilo ng pagkomento bilang karagdagan sa normal na /* ... */syntax ng CSS.

// Ito ay isang komento
/* Comment din ito */

Pinaghalo ang wazoo

Ang mga mixin ay karaniwang kasama o mga partial para sa CSS, na nagbibigay-daan sa iyong pagsamahin ang isang bloke ng code sa isa. Mahusay ang mga ito para sa mga property na may prefix na vendor tulad ng box-shadow, mga cross-browser gradient, font stack, at higit pa. Nasa ibaba ang isang sample ng mga mixin na kasama sa Bootstrap.

Mga stack ng font

#font {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
laki ng     font : @size ; 
    font - timbang : @timbang ; 
    linya - taas : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - pamilya : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
laki ng     font : @size ; 
    font - timbang : @timbang ; 
    linya - taas : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - pamilya : "Georgia" , Times New Roman , Times , sans - serif ;     
laki ng     font : @size ; 
    font - timbang : @timbang ; 
    linya - taas : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
laki ng     font : @size ; 
    font - timbang : @timbang ; 
    linya - taas : @lineHeight ; 
  }
}

Mga gradient

#gradient {
  . pahalang ( @startColor : #555, @endColor: #333) { 
    background - kulay : @endColor ; 
    background - ulitin : ulitin - x ;
    background - image : - khtml - gradient ( linear , left top , right top , from ( @startColor ), to ( @endColor )); // Mananakop   
    background - imahe : - moz - linear - gradient ( kaliwa , @startColor , @endColor ); // FF 3.6+    
    background - imahe : - ms - linear - gradient ( kaliwa , @startColor , @endColor ); // IE10    
    background - imahe : - webkit - gradient ( linear , left top , right top , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - imahe : - webkit - linear - gradient ( kaliwa , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - imahe : - o - linear - gradient ( kaliwa , @startColor , @endColor ); // Opera 11.10    
    background - imahe : linear - gradient ( kaliwa , @startColor , @endColor ); // Ang pamantayan   
  }
  . patayo ( @startColor : #555, @endColor: #333) { 
    background - kulay : @endColor ; 
    background - ulitin : ulitin - x ;
    background - image : - khtml - gradient ( linear , left top , left bottom , from ( @startColor ), to ( @endColor )); // Mananakop   
    background - imahe : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    background - larawan : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    background - imahe : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - imahe : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - larawan : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    background - larawan : linear - gradient ( @startColor , @endColor ); // Ang pamantayan  
  }
  . direksyon ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . patayo - tatlong - kulay ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Mga operasyon at sistema ng grid

Maging magarbo at magsagawa ng ilang matematika upang makabuo ng mga flexible at makapangyarihang mixin tulad ng nasa ibaba.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Grid system
. lalagyan {
  lapad : @siteWidth ; 
  margin : 0 auto ;  
  . clearfix ();
}
. mga hanay ( @columnSpan : 1 ) {  
  lapad : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. offset ( @columnOffset : 1 ) {  
  margin - kaliwa : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}