Moolelo

I nā lā mua o Twitter, ua hoʻohana nā mea ʻenekinia i nā hale waihona puke a lākou i kamaʻāina ai e hoʻokō i nā koi mua. Ua hoʻomaka ʻo Bootstrap ma ke ʻano he pane i nā pilikia i hōʻike ʻia a me ka hoʻomohala wikiwiki ʻana i ka wā Hackweek mua o Twitter.

Me ke kōkua a me ka pane ʻana mai o nā mea ʻenekinia he nui ma Twitter, ua ulu nui ʻo Bootstrap e hoʻopili ʻaʻole i nā ʻano kumu wale nō, akā ʻoi aku ka nani a me ka lōʻihi o nā hiʻohiʻona hoʻolālā mua.

Heluhelu hou aku ma dev.twitter.com ›

Kākoʻo polokalamu kele pūnaewele

Hoʻāʻo ʻia ʻo Bootstrap a kākoʻo ʻia i nā polokalamu kele hou e like me Chrome, Safari, Internet Explorer, a me Firefox.

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

He aha ka mea i komo

Hoʻopiha piha ʻia ʻo Bootstrap me CSS i hōʻuluʻulu ʻia, uncompiled, a me nā kumu hoʻohālike.

• Nā waihona kumu .less a pau
• Hoʻopili piha ʻia a hoʻemi ʻia CSS
• Hoʻopiha i nā palapala alakaʻi style
• Laʻana ʻaoʻao laʻana (e hiki koke mai ana)

Mānoa paʻamau

ʻO ka ʻōnaehana mākia paʻamau i hāʻawi ʻia ma ke ʻano he ʻāpana o Bootstrap he 940px ākea 16-kolani mākia. He mea ʻono ia o ka ʻōnaehana 960 grid kaulana, akā me ka ʻole o ka palena ʻē aʻe ma ka ʻaoʻao hema a me ka ʻaoʻao ʻākau.

Hōʻailona mānoanoa laʻana

E like me ka mea i hōʻike ʻia ma ʻaneʻi, hiki ke hana ʻia kahi hoʻolālā kumu me ʻelua "nā kolamu," ʻo kēlā me kēia me kahi helu o nā kolamu kumu 16 a mākou i wehewehe ai ma ke ʻano he ʻāpana o kā mākou pūnaewele puni honua. E ʻike i nā laʻana ma lalo no nā ʻano like ʻole.

<div class="laina"> papa = "lālani" >
  <div class = "nā kolamu span6" > 
    ...
  </div>
  <div class = "span10 kolamu" > 
    ...
  </div>
</div>

Hoʻolālā paʻa

He 940px kumu ākea, hoʻonohonoho pahu kikowaena no kahi pūnaewele a i ʻole ʻaoʻao.

<kino>
  <div class = "container" > 
    ...
  </div>
</kino>

Hoʻolālā wai

ʻO kahi ʻaoʻao ʻaoʻao wai maʻalahi me ka liʻiliʻi a me ka nui-ākea a me ka ʻaoʻao ʻaoʻao hema. Nui no nā polokalamu.

<kino>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "maʻiʻo" > 
      ...
    </div>
  </div>
</kino>

Nā poʻomanaʻo a me ke kope

ʻO kahi hierarchy typographic maʻamau no ka hoʻonohonoho ʻana i kāu mau ʻaoʻao pūnaewele.

h1. Poʻomanaʻo 1

h2. Poʻomanaʻo 2

h3. Poʻomanaʻo 3

h4. Poʻomanaʻo 4

h5. Poʻomanaʻo 5

h6. Poʻomanaʻo 6

Laʻana paukū

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.

Ke poʻo poʻomanaʻo He poʻomanaʻo poʻomanaʻo…

Kekahi. mau mea

Ke hoʻohana nei i ka manaʻo nui, nā ʻōlelo a me nā pōkole

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

I ka wā e hoʻohana ai

Pono e hoʻohana ʻia nā huaʻōlelo koʻikoʻi ( <strong>a <em>) e hōʻike i ke koʻikoʻi a i ʻole ka manaʻo nui o kahi huaʻōlelo a ʻōlelo paha e pili ana i kona kope a puni. E hoʻohana <strong>no ke koʻikoʻi a <em>no ke koʻikoʻi koʻikoʻi.

Hoʻoikaika i ka paukū

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.

' Ōlelo Aʻo: Maikaʻi nō ka hoʻohana ʻana <b>a me <i>nā hōʻailona ma HTML5, akā ʻaʻole lākou e hele mai me nā ʻano like ʻole. <b>ʻO ka manaʻo e hōʻike i nā huaʻōlelo a i ʻole nā ​​​​huaʻōlelo me ka ʻole o ka lawe ʻana i ka mea nui, ʻoiai <i>ka hapa nui no ka leo, nā ʻōlelo loea, etc.

Heluhelu

Hoʻohana ʻia ka <address>mea no ka ʻike pili no kona kupuna kokoke, a i ʻole ke kino holoʻokoʻa o ka hana. Penei kona ano:

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

Hoʻomaopopo: Pono e hoʻopau ʻia kēlā me kēia laina <address>me ka haki laina ( <br />) a i ʻole e ʻōwili ʻia i kahi hōʻailona pae poloka (e laʻa, <p>) no ka hoʻonohonoho pono ʻana i ka ʻike.

Nā pōkole

No nā pōkole a me nā acronyms, e hoʻohana i ka <abbr>hōʻailona ( <acronym>ua hoʻopau ʻia ma HTML5 ). E kau i ka pepa pōkole i loko o ka lepili a hoʻonoho i poʻo inoa no ka inoa piha.

Blockquotes

<blockquote> <p> <small>

Pehea e ʻōlelo ai

No ka hoʻokomo ʻana i kahi blockquote, ʻōwili a <blockquote>puni . E hoʻohana i ka mea e haʻi i kāu kumu a e loaʻa iā ʻoe kahi em dash ma mua o ia.<p><small><small>&mdash;

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

Kauka Julius Hibbert

Kau ʻole ʻia<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem and 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

Kaulana ʻole<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem and 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

Kauoha ʻia<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem and 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

wehewehedl

Nā papa inoa wehewehe

Kūpono ka papa inoa wehewehe no ka wehewehe ʻana i nā huaʻōlelo.

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.

Nā papa kūkulu hale

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

Nui nā papaʻaina-no nā mea he nui. ʻO nā papa nui, akā naʻe, pono ke aloha markup e pono, scalable, a hiki ke heluhelu ʻia (ma ka pae code). Eia kekahi mau ʻōlelo kōkua.

Hoʻopili mau i kāu mau poʻomanaʻo kolamu i loko o kahi <thead>hierarchy he <thead>> <tr>> <th>.

E like me nā poʻomanaʻo kolamu, pono e hoʻopaʻa ʻia nā ʻike a pau o kāu papaʻaina i kahi <tbody>a no laila ʻo kāu hierarchy <tbody>> <tr>> <td>.

Laʻana: Nā ʻano papa paʻamau

Hoʻopili ʻia nā papa ʻaina āpau me nā palena koʻikoʻi wale nō e hōʻoia i ka heluhelu ʻana a mālama ʻia ke ʻano. ʻAʻole pono e hoʻohui i nā papa a i ʻole nā ​​hiʻohiʻona.

#	Inoa mua	Inoa hope	ʻŌlelo
1	ʻO kekahi	ʻekahi	Pelekania
2	Joe	ʻEono ʻeke	Pelekania
3	ʻO Stu	Dent	Code

<table class="common-table"> papa = "papakaukau maʻamau" >
  ...
</papa>

Laʻana: Zebra-striped

E ʻoluʻolu iki i kāu mau papa ma ka hoʻohui ʻana i ka zebra-striping—e hoʻohui wale i ka .zebra-stripedpapa.

#	Inoa mua	Inoa hope	ʻŌlelo
1	ʻO kekahi	ʻekahi	Pelekania
2	Joe	ʻEono ʻeke	Pelekania
3	ʻO Stu	Dent	Code

'Ōlelo Aʻo: ʻO ka Zebra-striping kahi hoʻonui holomua ʻaʻole i loaʻa no nā polokalamu kele kahiko e like me IE8 a ma lalo.

<table class="common-table zebra-striped"> class = "maʻamau-table zebra-striped" > 
...
</papa>

Laʻana: Zebra-striped w/ TableSorter.js

Ma ka lawe ʻana i ka laʻana mua, hoʻomaikaʻi mākou i ka pono o kā mākou papa ma ka hāʻawi ʻana i nā hana hoʻokaʻawale ma o jQuery a me ka plugin Tablesorter . Kaomi i ke poʻo o ke kolamu e hoʻololi i ke ʻano.

#	Inoa mua	Inoa hope	ʻŌlelo
1	ʻO kāu	ʻekahi	Pelekania
2	Joe	ʻEono ʻeke	Pelekania
3	ʻO Stu	Dent	Code

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( hana () { 
    $ ( "papa#sortTableExample" ). papa kuhikuhi papa ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<papa papa = "ka papa zebra-striped maʻamau" > 
  ...
</papa>

Nā ʻano paʻamau

Hāʻawi ʻia nā ʻano āpau i nā kaila paʻamau e hōʻike iā lākou ma ke ʻano hiki ke heluhelu a hiki ke hoʻonui ʻia. Hāʻawi ʻia nā ʻano no nā hoʻokomo kikokikona, koho i nā papa inoa, nā wahi kikokikona, nā pihi lekiō a me nā pahu pahu, a me nā pihi.

Kaao hoʻohālike

X-Hookomo Nui

E koho

1 2 3 4 5

E koho

1 2 3 4 5

Hoʻokomo hiki ʻole ke hoʻololi ʻia

Kekahi Waiwai Eia

Hoʻokomo ʻia

X-Hookomo Nui

Snippet liʻiliʻi o ka kikokikona kōkua

Kaao hoʻohālike

kikokikona i hoʻomākaukau ʻia

@

Pahu hoʻopaʻa mua ʻia

Hoʻopili ʻia ka pahu koho

Waihona waihona

Kaao hoʻohālike

Papa inoa o na koho

• ʻO ke koho hoʻokahi kēia a me kēlā - e hoʻokomo pono i ke kumu o ka maikaʻi
• Hiki ke nānā ʻia ke koho ʻelua a hoʻokomo ʻia i nā hopena puka
• Hiki ke koho ʻekolu—ʻae, manaʻo ʻoe—e nānā pū ʻia a hoʻokomo ʻia i nā hopena puka
• ʻAʻole hiki ke nānā ʻia ke koho ʻehā no ka mea ua pio.

Hoʻomaopopo: Hoʻopuni nā lepili i nā koho āpau no nā wahi kaomi nui aʻe a me kahi ʻano hoʻohana hou aku.

Laulā lā

i Hōʻike ʻia nā manawa āpau e like me ka Pacific Standard Time (GMT -08:00).

Textarea

Poloka o ka kikokikona kōkua e wehewehe i ke kahua ma luna inā pono.

Papa inoa o na koho

• ʻO ke koho hoʻokahi kēia a me kēlā - e hoʻokomo pono i ke kumu o ka maikaʻi
• Hiki ke nānā ʻia ke koho ʻelua a hoʻokomo ʻia i nā hopena puka

E mālama i nā hoʻololi  Hoʻopau

Nā palapala i hoʻopaʻa ʻia

Hoʻohui .form-stackedi ka HTML o kāu palapala a loaʻa iā ʻoe nā lepili ma luna o kā lākou mau kahua ma mua o ko lākou hema. Hana maikaʻi kēia inā pōkole kāu mau palapala a i ʻole ʻelua kolamu o nā mea hoʻokomo no nā ʻano kaumaha.

Kaao hoʻohālike

X-Hookomo Nui

E koho

1 2 3 4 5

Kaao hoʻohālike

X-Hookomo Nui

Snippet liʻiliʻi o ka kikokikona kōkua

Papa inoa o na koho

• ʻO ke koho hoʻokahi kēia a me kēlā - e hoʻokomo pono i ke kumu o ka maikaʻi
• Hiki ke nānā ʻia ke koho ʻelua a hoʻokomo ʻia i nā hopena puka

Hoʻomaopopo: Hoʻopuni nā lepili i nā koho āpau no nā wahi kaomi nui aʻe a me kahi ʻano hoʻohana hou aku.

E mālama i nā hoʻololi  Hoʻopau

Nā pihi

Ma ke ʻano he ʻaha kūkā, hoʻohana ʻia nā pihi no nā hana ʻoiai e hoʻohana ʻia nā loulou no nā mea. No ka laʻana, ʻo "Download" paha he pihi a ʻo "hana hou" hiki ke lilo i loulou.

ʻO nā pihi āpau i ke ʻano hina hina, akā loaʻa kahi .primarypapa polū. Eia kekahi, ʻo ka ʻōwili ʻana i kāu mau ʻano ponoʻī he peasy maʻalahi.

Nā pihi laʻana

Hiki ke hoʻohana ʻia nā ʻano pihi i kekahi mea me ka mea i hoʻopili ʻia .btn. ʻO ka maʻamau, makemake ʻoe e hoʻopili i kēia mau mea wale nō i <a>, <button>, a koho i <input>nā mea. Penei kona ano:

Nui ʻokoʻa

Makemake i nā pihi nui a liʻiliʻi paha? Loaʻa iā ia!

Mokuʻāina kīnā

No nā pihi ʻaʻole hoʻoikaika a paʻa ʻole paha e ka app no ​​kekahi kumu a i ʻole, e hoʻohana i ka mokuʻāina kīnā. ʻO ia .disabledno nā loulou a me :disablednā <button>mea.

Nā loulou

Nā pihi

He aha kēīa

ʻO kā mākou topbar kahi pā paʻa e waiho ai i ka logo a i ʻole ka inoa o kahi pūnaewele, ka hoʻokele mua, a me ka palapala huli.

Hoʻopilikino

ʻO nā mea āpau i loko, a me ka topbar holoʻokoʻa pū kekahi, he koho. Hiki iā ʻoe ke koho e hoʻokomo i kahi logo/inoa, nav, hulina, a me ka lua nav—a i ʻole kekahi hui pū ʻana o ia mea.

Hoʻokomo ʻia nā hāʻule iho

Ma ke ʻano o ka hoʻokele nui, ua hoʻokomo mākou i ka hiki iā ʻoe ke hoʻohui i nā dropdown i kāu nav. E nānā i ka piko lua ma luna (kūpono ʻākau) e ʻike pehea i hana ʻia ai.

Nā papa a me nā pila

E hana i ka hoʻokele lua maʻalahi me kahi <ul>. E hoʻololi i waena o nā papa a i ʻole nā ​​​​palapala ma ka hoʻohui ʻana i ka papa kūpono.

Maikaʻi no nā ʻāpana ʻāpana o ka ʻikepili e like me kā mākou ʻaoʻao hoʻonohonoho moʻokāki a me nā manawa hoʻohana no ka hoʻololi ʻana ma waena o nā ʻaoʻao o ka ʻike like. Loaʻa i nā ʻano tabbed a pila paha.

• Home
• Pilikino
• Nā memo
• Nā hoʻonohonoho
• Hoʻopili

<ul class = "nā papa" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Palapala </a></li> 
  <li><a href = "#" > Nā memo </a></li> 
  <li><a href = "#" > Nā hoʻonohonoho </a></li> 
  <li><a href = "#" > Hoʻokaʻaʻike </a></li> 
</ul>

• Home
• Pilikino
• Nā memo
• Nā hoʻonohonoho
• Hoʻopili

<ul class = "pills" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Palapala </a></li> 
  <li><a href = "#" > Nā memo </a></li> 
  <li><a href = "#" > Nā hoʻonohonoho </a></li> 
  <li><a href = "#" > Hoʻokaʻaʻike </a></li> 
</ul>

Ka helu helu

ʻO ka ʻaoʻao maʻalahi a me ka liʻiliʻi i hoʻoikaika ʻia e Rdio. ʻO ka poloka nui he paʻakikī ke hala, hiki ke hoʻonui ʻia, a hāʻawi i nā wahi kaomi nui.

<div class = "ka helu helu" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Mamua </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>

Nā mākau kumu

Nā leka laina hoʻokahi no ka hōʻike ʻana i ka hāʻule, hiki ʻole, a i ʻole ka kūleʻa o kahi hana. Pono pono no nā puka.

Kāohi i nā memo

No nā memo e koi ana i kahi wehewehe wehewehe, loaʻa iā mākou nā mākaʻikaʻi kaila paukū. He kūpono kēia no ka hoʻoulu ʻana i nā memo hala ʻoi aku ka lōʻihi, e ʻōlelo ana i ka mea hoʻohana i kahi hana e kali nei, a i ʻole ka hōʻike ʻana i ka ʻike no ka manaʻo nui i ka ʻaoʻao.

Modal

Maikaʻi nā modals—dialogs a i ʻole pahu kukui—no nā hana ʻokoʻa i nā kūlana he mea nui e mālama ʻia ka pōʻaiapili hope.

Mea kōkua kōkua

He mea maikaʻi loa nā Twipsies no ke kōkua ʻana i kahi mea hoʻohana huikau a kuhikuhi iā lākou i ke ala pololei.

Popovers

E hoʻohana i nā popovers no ka hāʻawi ʻana i ka ʻike subtexttual i kahi ʻaoʻao me ka ʻole o ka pili ʻana i ka hoʻolālā.

Ua kūkulu ʻia ʻo Bootstrap me Preboot , kahi pūʻulu open-source o nā mixins a me nā ʻano like ʻole e hoʻohana pū ʻia me Less , kahi preprocessor CSS no ka hoʻomohala pūnaewele wikiwiki a maʻalahi.

E nānā pehea mākou i hoʻohana ai iā Preboot ma Bootstrap a pehea ʻoe e hoʻohana ai inā koho ʻoe e holo i ka liʻiliʻi ma kāu papahana aʻe.

Pehea e hoʻohana ai

E hoʻohana i kēia koho no ka hoʻohana piha ʻana i nā ʻano liʻiliʻi liʻiliʻi o Bootstrap, mixins, a me ka nesting ma CSS ma o javascript i kāu polokalamu kele pūnaewele.

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

ʻAʻole manaʻo i ka hoʻonā .js? E ho'āʻo i ka polokalamu Less Mac a i ʻole e hoʻohana iā Node.js e hōʻuluʻulu i ka wā e kau ai ʻoe i kāu code.

He aha ka mea i komo

Eia kekahi o nā mea koʻikoʻi o ka mea i hoʻokomo ʻia ma Twitter Bootstrap ma ke ʻano o Bootstrap. E poʻo i ka pūnaewele Bootstrap a i ʻole ʻaoʻao papahana Github e hoʻoiho a aʻo hou.

Nā hoʻololi kala

He kūpono nā ʻano like ʻole i ka liʻiliʻi no ka mālama ʻana a me ka hoʻonui ʻana i kāu CSS maʻi poʻo. Ke makemake ʻoe e hoʻololi i ka waiwai kala a i ʻole ka waiwai i hoʻohana pinepine ʻia, e hoʻohou iā ia ma kahi wahi a ua hoʻonohonoho ʻoe.

// Nā loulou
@linkColor : #8b59c2;         
@linkColorHover :     darken ( @linkColor , 10 ); 
 
// Nahinahina
@ʻeleʻele : #000;             
@grayDark :           māmā ( @ʻeleʻele , 25 %); 
@hina :               māmā ( @ʻeleʻele , 50 %); 
@GrayLight :          māmā ( @ʻeleʻele , 70 %); 
@grayLighter :        māmā ( @ʻeleʻele , 90 %); 
@keokeo : #fff;             
 
// Nā waihoʻoluʻu leo
@uliuli : #08b5fb;              
@' ōmaʻomaʻo : #46a546;             
@ulaula : #9d261d;               
@melemele : #ffc40d;            
@alani : #f89406;            
@ʻulaʻula : #c3325f;              
@ʻulaʻula : #7a43b6;            
 
// Kaulana
@kumu : 20px ;          

ʻŌlelo ʻōlelo

Hāʻawi ʻo Less i kahi ʻano manaʻo ʻē aʻe me ka /* ... */syntax maʻamau o CSS.

// He ʻōlelo kēia
/* He ʻōlelo hoʻi kēia */

Hoʻohui i ka wazoo

Hoʻokomo maoli ʻia nā Mixins a i ʻole ʻāpana no CSS, e ʻae iā ʻoe e hoʻohui i kahi poloka o ke code i hoʻokahi. Maikaʻi lākou no ka mea kūʻai aku i nā waiwai prefixed e like mebox-shadow , cross-browser gradients, font stacks, a me nā mea hou aku. Aia ma lalo kahi laʻana o nā mixins i hoʻokomo ʻia me Bootstrap.

Nā waihona kikokikona

#kino {
  . pōkole ( @kaumaha : maʻamau , @nui : 14px , @lineHeight : 20px ) {     
    font - nui : @ka nui ; 
    font - kaumaha : @kaumaha ; 
    laina - kiekie : @lineHeight ; 
  }
  . sans - serif ( @kaumaha : maʻamau , @nui : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - nui : @ka nui ; 
    font - kaumaha : @kaumaha ; 
    laina - kiekie : @lineHeight ; 
  }
  . serif ( @kaumaha : maʻamau , @nui : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Manawa , sans - serif ;     
    font - nui : @ka nui ; 
    font - kaumaha : @kaumaha ; 
    laina - kiekie : @lineHeight ; 
  }
  . monospace ( @kaumaha : maʻamau , @nui : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    font - nui : @ka nui ; 
    font - kaumaha : @kaumaha ; 
    laina - kiekie : @lineHeight ; 
  }
}

Nā laulima

#gradient {
  . paepae ( @startColor : #555, @endColor: #333) { 
    hope - kala : @endColor ; 
    hope - hana hou : hana hou - x ;
    kāʻei kua - kiʻi : - khtml - gradient ( linear , left top , right top , from ( @startColor ), to ( @endColor )); // Naʻi aupuni   
    kāʻei kua - kiʻi : - moz - linear - gradient ( hema , @startColor , @endColor ); // FF 3.6+    
    kāʻei kua - kiʻi : - ms - linear - gradient ( hema , @startColor , @endColor ); // IE10    
    kāʻei kua - kiʻi : - webkit - gradient ( linear , left top , right top , color - stop ( 0 %, @startColor ), kala - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    hope - kiʻi : - webkit - linear - gradient ( hema , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    kāʻei kua - kiʻi : - o - linear - gradient ( hema , @startColor , @endColor ); // ʻOpera 11.10    
    - ms - kānana : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    kānana : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    kāʻei kua - kiʻi : linear - gradient ( hema , @startColor , @endColor ); // Le standard   
  }
  . kū pololei ( @startColor : #555, @endColor: #333) { 
    hope - kala : @endColor ; 
    hope - hana hou : hana hou - x ;
    kāʻei kua - kiʻi : - khtml - gradient ( linear , hema luna , hema lalo , mai ( @startColor ), a ( @endColor )); // Naʻi aupuni   
    hope - kiʻi : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    kāʻei kua - kiʻi : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    hope - kiʻi : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), kala - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    hope - kiʻi : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    kāʻei kua - kiʻi : - o - linear - gradient ( @startColor , @endColor ); // ʻOpera 11.10   
    - ms - kānana : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    kānana : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    hope - kiʻi : linear - gradient ( @startColor , @endColor ); // Ka maʻamau  
  }
  . kuhikuhi ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . kū pololei - ʻekolu - kala ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Nā hana a me ka ʻōnaehana grid

E ʻoluʻolu a hana i kekahi makemakika e hoʻohua i nā mixins maʻalahi a ikaika e like me ka mea ma lalo nei.

// Māmā
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Pūnaehana Grid
. ipu {
  laula : @siteWidth ; 
  palena : 0 kaʻa ;  
  . clearfix ();
}
. kolamu ( @columnSpan : 1 ) {  
  hōʻike : inline ; 
  lana : hema ;
  laula : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  palena - hema : @gridGutterWidth ; 
  &: mua - keiki {
    palena - hema : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  palena - hema : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! mea nui ;          
}