Itan

Ni awọn ọjọ iṣaaju ti Twitter, awọn onimọ-ẹrọ lo fere eyikeyi ile-ikawe ti wọn faramọ lati pade awọn ibeere ipari-iwaju. Bootstrap bẹrẹ bi idahun si awọn italaya ti o gbekalẹ ati idagbasoke ni iyara ni iyara lakoko Hackweek akọkọ ti Twitter.

Pẹlu iranlọwọ ati awọn esi ti ọpọlọpọ awọn onimọ-ẹrọ ni Twitter, Bootstrap ti dagba ni pataki lati yika kii ṣe awọn aza ipilẹ nikan, ṣugbọn diẹ sii yangan ati awọn ilana apẹrẹ iwaju-iduro to tọ.

Ka diẹ sii lori dev.twitter.com ›

Atilẹyin aṣawakiri

Bootstrap jẹ idanwo ati atilẹyin ni awọn aṣawakiri ode oni pataki bi Chrome, Safari, Internet Explorer, ati Firefox.

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

Ohun ti o wa ninu

Bootstrap wa ni pipe pẹlu CSS ti a kojọ, ti ko ṣajọpọ, ati awọn awoṣe apẹẹrẹ.

• Gbogbo atilẹba .kere awọn faili
• Ti ṣajọ ni kikun ati iwọntunwọnsi CSS
• Awọn iwe-itọsọna aṣa pipe
• Awoṣe oju-iwe apẹẹrẹ (diẹ sii lati wa laipẹ)

akoj aiyipada

Eto akoj aiyipada ti a pese gẹgẹ bi apakan Bootstrap jẹ akoj 16-iwe giga 940px. O jẹ adun ti eto akoj 960 olokiki, ṣugbọn laisi ala afikun / padding ni apa osi ati awọn ẹgbẹ ọtun.

Apeere akoj isamisi

Gẹgẹbi a ṣe han nibi, ipilẹ ipilẹ le ṣee ṣẹda pẹlu “awọn ọwọn” meji, ọkọọkan ti o ni nọmba kan ti awọn ọwọn ipilẹ 16 ti a ṣalaye gẹgẹbi apakan ti eto akoj wa. Wo awọn apẹẹrẹ ni isalẹ fun awọn iyatọ diẹ sii.

<div kilasi = "kana" > 
  <div kilasi = "span6 ọwọn" > 
    ...
  </div>
  <div kilasi = "span10 ọwọn" > 
    ...
  </div>
</div>

Ifilelẹ ti o wa titi

Aiyipada ati irọrun 940px jakejado, ifilelẹ aarin fun o kan nipa oju opo wẹẹbu eyikeyi tabi oju-iwe ti a pese nipasẹ ẹyọkan <div.container>.

<ara>
  <div kilasi = "apoti" > 
    ...
  </div>
</ ara>

Ifilelẹ omi

Omiiran, ọna oju-iwe ito rirọ pẹlu min- ati awọn iwọn ti o pọju ati ọpa apa osi kan. Nla fun awọn lw ati awọn docs.

<ara>
  <div class = "container-fluid" > 
    <div kilasi = "apagbe ẹgbẹ" > 
      ...
    </div>
    <div class = "akoonu" > 
      ...
    </div>
  </div>
</ ara>

Awọn akọle & daakọ

Aṣeṣe aṣawakiri aṣa fun tito awọn oju-iwe wẹẹbu rẹ.

Gbogbo akoj afọwọṣe da lori awọn oniyipada Kere meji ninu faili preboot.less wa: @basefontati @baseline. Ni igba akọkọ ti ni awọn mimọ-iwọn font lo jakejado ati awọn keji ni awọn mimọ ila-giga.

A nlo awọn oniyipada wọnyẹn, ati awọn iṣiro diẹ, lati ṣẹda awọn ala, awọn paddings, ati awọn giga laini ti gbogbo iru wa ati diẹ sii.

h1. Akọle 1

h2. Akole 2

h3. Akole 3

h4. Akole 4

h5. Akole 5

h6. Akole 6

Apeere ìpínrọ

Nullam quis risus eget urna mollis ornare vel eu leo. Bi o ṣe le jẹ penatibus ati magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Akọle apẹẹrẹ Ni akọle-ipin…

Oriṣiriṣi. eroja

Lilo tcnu, awọn adirẹsi, & awọn kuru

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

Nigbati lati lo

O yẹ ki o lo awọn ami itọkasi ( <strong>ati <em>) lati ṣe afihan pataki afikun tabi tcnu ti ọrọ tabi gbolohun kan ni ibatan si ẹda agbegbe rẹ. Lo <strong>fun pataki ati <em>fun aapọn aapọn .

Tcnu ni a ìpínrọ

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.

Akiyesi: O tun dara lati lo <b>ati <i>awọn taagi ni HTML5 ati pe wọn ko ni lati ṣe ara igboya ati italic, lẹsẹsẹ (botilẹjẹpe ti ẹya itumọ diẹ sii, lo). <b>Itumọ lati ṣe afihan awọn ọrọ tabi awọn gbolohun ọrọ laisi sisọ pataki pataki, lakoko <i>ti o jẹ pupọ julọ fun ohun, awọn ọrọ imọ-ẹrọ, ati bẹbẹ lọ.

Awọn adirẹsi

A <address>lo eroja naa fun alaye olubasọrọ fun baba ti o sunmọ, tabi gbogbo ara iṣẹ. Eyi ni bii o ṣe ri:

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

Akiyesi: Laini kọọkan ninu ohun <address>gbọdọ pari pẹlu fifọ laini kan ( <br />) tabi ti a we sinu aami-ipele idina (fun apẹẹrẹ, <p>) lati ṣeto akoonu daradara.

Awọn kukuru

Fun awọn kuru ati awọn acronyms, lo <abbr>tag ( <acronym>is deprecated in HTML5 ). Fi fọọmu kukuru sinu tag ati ṣeto akọle fun orukọ pipe.

Blockquotes

<blockquote> <p> <small>

Bawo ni lati sọ

Lati ni blockquote kan, yipo <blockquote>ni ayika <p>ati <small>awọn aami. Lo <small>eroja lati tọka orisun rẹ ati pe iwọ yoo gba dash em —ṣaaju rẹ.

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

Dokita Julius Hibbert

Ti ko paṣẹ<ul>

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

Ti ko ni aṣa<ul.unstyled>

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

Ti paṣẹ<ol>

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

Apejuwedl

Awọn akojọ apejuwe

Akojọ apejuwe jẹ pipe fun asọye awọn ofin.

Euismod

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

Donec id elit ti kii mi porta gravida ati eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Awọn tabili ile

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

Awọn tabili jẹ nla-fun ọpọlọpọ awọn nkan. Awọn tabili nla, sibẹsibẹ, nilo diẹ ti ifẹ isamisi lati wulo, iwọn, ati kika (ni ipele koodu). Eyi ni awọn imọran diẹ lati ṣe iranlọwọ.

Fi ipari si awọn akọsori ọwọn rẹ nigbagbogbo ni <thead>iru awọn ilana jẹ <thead>> <tr>> <th>.

Iru si awọn akọle ọwọn, gbogbo akoonu ara tabili rẹ yẹ ki o wa ni titan ni kan <tbody>ki awọn ilana rẹ jẹ <tbody>> <tr>> <td>.

Apeere: Awọn ara tabili aiyipada

Gbogbo awọn tabili yoo jẹ aṣa laifọwọyi pẹlu awọn aala pataki nikan lati rii daju kika ati ṣetọju eto. Ko si iwulo lati ṣafikun awọn kilasi afikun tabi awọn abuda.

#	Orukọ akọkọ	Oruko idile	Ede
1	Diẹ ninu awọn	Ọkan	English
2	Joe	Sixpack	English
3	Stu	Denti	Koodu

<tabili>
  ...
</tabili>

Apeere: Abila-la

Gba igbadun diẹ pẹlu awọn tabili rẹ nipa fifi abila-striping kun-kan ṣafikun .zebra-stripedkilasi naa.

#	Orukọ akọkọ	Oruko idile	Ede
1	Diẹ ninu awọn	Ọkan	English
2	Joe	Sixpack	English
3	Stu	Denti	Koodu

Akiyesi: Zebra-striping jẹ imudara ilọsiwaju ti ko si fun awọn aṣawakiri agbalagba bi IE8 ati ni isalẹ.

<tabili kilasi = "Abila-striped" > 
...
</tabili>

Apeere: Abila-dibo w/ TableSorter.js

Gbigba apẹẹrẹ ti tẹlẹ, a mu iwulo ti awọn tabili wa pọ si nipa ipese iṣẹ ṣiṣe titọ nipasẹ jQuery ati ohun itanna Tablesorter . Tẹ akọsori ọwọn eyikeyi lati yi iru naa pada.

#	Orukọ akọkọ	Oruko idile	Ede
1	Tirẹ	Ọkan	English
2	Joe	Sixpack	English
3	Stu	Denti	Koodu

<script src = "js/jquery/jquery.tablesorter.min.js" </script> 
<akosile > 
  $ ( iṣẹ () { 
    $ ( "tabili# tooTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<tabili kilasi = "Abila-striped" > 
  ...
</tabili>

Awọn ara aiyipada

Gbogbo awọn fọọmu ni a fun ni awọn aza aiyipada lati ṣafihan wọn ni ọna kika ati iwọn. Awọn aṣa ti pese fun awọn igbewọle ọrọ, yan awọn atokọ, awọn agbegbe ọrọ, awọn bọtini redio ati awọn apoti ayẹwo, ati awọn bọtini.

Àlàyé fọọmu apẹẹrẹ

Iṣawọle X-Nla

Yan

1 2 3 4 5

Yan

1 2 3 4 5

Input ti ko ṣe atunṣe

Diẹ ninu Iye Nibi

Iṣagbewọle alaabo

Iṣawọle X-Nla

Kekere snippet ti ọrọ iranlọwọ

Àlàyé fọọmu apẹẹrẹ

Ọrọ ti a ti ṣetan

@

Apoti ti a ti ṣetan

Apoti Ayẹwo ti a fikun

Iṣagbewọle faili

Àlàyé fọọmu apẹẹrẹ

Akojọ ti awọn aṣayan

• Aṣayan ọkan ni eyi ati iyẹn — rii daju lati ṣafikun idi ti o fi dara
• Aṣayan keji tun le ṣayẹwo ati ki o wa ninu awọn abajade fọọmu
• Aṣayan mẹta le-bẹẹni, o gboju rẹ-tun ṣayẹwo ati ki o wa ninu awọn abajade fọọmu
• Aṣayan mẹrin ko le ṣayẹwo bi o ti jẹ alaabo.

Akiyesi: Awọn aami yi gbogbo awọn aṣayan fun awọn agbegbe tẹ ti o tobi pupọ ati fọọmu lilo diẹ sii.

Ọjọ Ibiti

si Gbogbo awọn akoko ni a fihan bi Aago Standard Pacific (GMT -08:00).

Agbegbe ọrọ

Àkọsílẹ ọrọ iranlọwọ lati ṣe apejuwe aaye loke ti o ba nilo.

Akojọ ti awọn aṣayan

• Aṣayan ọkan ni eyi ati iyẹn — rii daju lati ṣafikun idi ti o fi dara
• Aṣayan keji le jẹ nkan miiran ati yiyan yoo yọ awọn aṣayan 1 kuro

  Fagilee

Awọn fọọmu tolera

Ṣafikun .form-stackedsi HTML fọọmu rẹ ati pe iwọ yoo ni awọn akole lori oke awọn aaye wọn dipo si apa osi wọn. Eyi ṣiṣẹ nla ti awọn fọọmu rẹ ba kuru tabi o ni awọn ọwọn meji ti awọn igbewọle fun awọn fọọmu wuwo.

Àlàyé fọọmu apẹẹrẹ

Iṣawọle X-Nla

Yan

1 2 3 4 5

Àlàyé fọọmu apẹẹrẹ

Iṣawọle X-Nla

Kekere snippet ti ọrọ iranlọwọ

Akojọ ti awọn aṣayan

• Aṣayan ọkan ni eyi ati iyẹn — rii daju lati ṣafikun idi ti o fi dara
• Aṣayan keji tun le ṣayẹwo ati ki o wa ninu awọn abajade fọọmu

Akiyesi: Awọn aami yi gbogbo awọn aṣayan fun awọn agbegbe tẹ ti o tobi pupọ ati fọọmu lilo diẹ sii.

Fipamọ awọn iyipada  Fagilee

Awọn bọtini

Gẹgẹbi apejọ kan, awọn bọtini lo fun awọn iṣe lakoko ti a lo awọn ọna asopọ fun awọn nkan. Fun apẹẹrẹ, “Download” le jẹ bọtini kan ati pe “iṣẹ ṣiṣe aipẹ” le jẹ ọna asopọ kan.

Gbogbo awọn bọtini aiyipada si ara grẹy ina, ṣugbọn nọmba awọn iṣẹ ṣiṣe le ṣee lo fun awọn aza awọ oriṣiriṣi. Awọn kilasi wọnyi pẹlu kilasi buluu .primary, kilasi ina-bulu .info, kilasi alawọ ewe .success, ati kilasi pupa .dangerkan. Pẹlupẹlu, yiyi awọn aṣa tirẹ jẹ peasy rọrun.

Awọn bọtini apẹẹrẹ

Awọn aza bọtini le ṣee lo si ohunkohun pẹlu ohun .btnelo. Ni deede iwọ yoo fẹ lati lo awọn wọnyi si <a>, <button>, ati yan <input>awọn eroja. Eyi ni bii o ṣe ri:

Awọn iwọn omiiran

Fancy tobi tabi kere bọtini? Wa ninu rẹ!

Ipo alaabo

Fun awọn bọtini ti ko ṣiṣẹ tabi ti wa ni alaabo nipasẹ app fun idi kan tabi omiiran, lo ipo alaabo. Iyẹn jẹ .disabledfun awọn ọna asopọ ati :disabledfun <button>awọn eroja.

Awọn ọna asopọ

Awọn bọtini

Kini o jẹ

Topbar wa jẹ ọpa ti o wa titi ti o ṣe ile aami oju opo wẹẹbu kan tabi orukọ, lilọ kiri akọkọ, ati fọọmu wiwa.

asefara

Gbogbo awọn eroja laarin, ati gbogbo topbar bi daradara, jẹ iyan. O le yan lati ṣafikun aami/orukọ, nav, wiwa, ati nav keji — tabi eyikeyi apapo iyẹn.

Sisọ silẹ pẹlu

Gẹgẹbi apakan ti lilọ kiri akọkọ, a ti ṣafikun agbara fun ọ lati ṣafikun awọn silẹ si nav rẹ. Ṣayẹwo jade awọn nav secondary loke (ọtun deedee) lati ri bi o ti ṣe.

Awọn taabu ati awọn oogun

Ṣẹda lilọ kiri ti o rọrun pẹlu kan <ul>. Yipada laarin awọn taabu tabi awọn oogun nipa fifi kilasi ti o yẹ kun.

Nla fun awọn apakan apakan ti akoonu bii awọn oju-iwe eto akọọlẹ wa ati awọn akoko olumulo fun yiyi laarin awọn oju-iwe ti akoonu bii. Wa ni tabbed tabi egbogi aza.

• Ile
• Profaili
• Awọn ifiranṣẹ
• Ètò
• Olubasọrọ
• Faa silẹ
  • Atẹle ọna asopọ
  • Nkankan miran nibi
  • Ọna asopọ miiran

<ul kilasi = "awọn taabu" > 
  <li class = "lọwọ" ><a href = "#" > Ile </a></li>  
  <li><a href = "#" > Profaili </a></li> 
  <li><a href = "#" > Awọn ifiranṣẹ </a></li> 
  <li><a href = "#" > Eto </a></li> 
  <li><a href = "#" > Olubasọrọ </a></li> 
</ul>

• Ile
• Profaili
• Awọn ifiranṣẹ
• Ètò
• Olubasọrọ

<ul kilasi = "awọn ìşọmọbí" > 
  <li class = "lọwọ" ><a href = "#" > Ile </a></li>  
  <li><a href = "#" > Profaili </a></li> 
  <li><a href = "#" > Awọn ifiranṣẹ </a></li> 
  <li><a href = "#" > Eto </a></li> 
  <li><a href = "#" > Olubasọrọ </a></li> 
</ul>

Oju-iwe

Ultra simplistic ati pagination ara ni iwonba atilẹyin nipasẹ Rdio. Bulọọki nla naa nira lati padanu, ni irọrun iwọn, ati pese awọn agbegbe tẹ nla.

<div class = "pagination" > 
  <ul>
    <li class = "tẹlẹ alaabo" ><a href = "#" > ← Ti tẹlẹ </a></li>  
    <li class = "lọwọ" ><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 = "tókàn" ><a href = "#" > Next → </a></li>  
  </ul>
</div>

Awọn itaniji ipilẹ

div.alert-message

Awọn ifiranšẹ laini kan fun iṣafihan ikuna, ikuna ti o ṣeeṣe, tabi aṣeyọri ti iṣe. Paapa wulo fun awọn fọọmu.

Dina awọn ifiranṣẹ

div.alert-message.block-message

Fun awọn ifiranṣẹ ti o nilo alaye diẹ, a ni awọn titaniji ara paragira. Iwọnyi jẹ pipe fun sisọ awọn ifiranṣẹ aṣiṣe gigun gun, ikilọ olumulo kan ti iṣe isunmọ, tabi ṣafihan alaye kan fun tcnu diẹ sii lori oju-iwe naa.

Awọn awoṣe

Modals-awọn ibaraẹnisọrọ tabi awọn apoti ina-jẹ nla fun awọn iṣe ọrọ-ọrọ ni awọn ipo nibiti o ṣe pataki ki o wa ni itọju ipo isale.

Irinṣẹ Italolobo

Twipsies wulo pupọ fun iranlọwọ olumulo ti o ni idamu ati tọka si ọna ti o tọ.

Popovers

Lo awọn agbejade lati pese alaye abẹlẹ si oju-iwe kan lai ni ipa lori ifilelẹ.

Bootstrap was built with Preboot , ohun-ìmọ-orisun pack ti mixins ati oniyipada lati ṣee lo ni apapo pẹlu Kere , a CSS preprocessor fun yiyara ati ki o rọrun idagbasoke ayelujara.

Ṣayẹwo bii a ṣe lo Preboot ni Bootstrap ati bii o ṣe le lo o yẹ ki o yan lati ṣiṣẹ Kere lori iṣẹ akanṣe atẹle rẹ.

Bawo ni lati lo

Lo aṣayan yii lati lo kikun Bootstrap ká Kere oniyipada, mixins, ati itẹ-ẹiyẹ ni CSS nipasẹ JavaScript ninu rẹ browser.

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

Ko rilara ojutu .js? Gbiyanju ohun elo Mac Kere tabi lo Node.js lati ṣajọ nigbati o ba ran koodu rẹ lọ.

Ohun ti o wa ninu

Eyi ni diẹ ninu awọn ifojusi ohun ti o wa ninu Bootstrap Twitter gẹgẹbi apakan ti Bootstrap. Ori si oju opo wẹẹbu Bootstrap tabi oju-iwe iṣẹ akanṣe Github lati ṣe igbasilẹ ati kọ ẹkọ diẹ sii.

Awọn oniyipada

Awọn oniyipada ni Kere jẹ pipe fun mimu ati mimu dojuiwọn orififo CSS rẹ ọfẹ. Nigbati o ba fẹ yi iye awọ pada tabi iye ti a lo nigbagbogbo, ṣe imudojuiwọn ni aaye kan ati pe o ti ṣeto.

// Awọn ọna asopọ
@linkColor : # 8b59c2;         
@linkColorHover :     ṣokunkun ( @linkColor , 10 ); 
 
// Grẹy
@dudu : #000;             
@grayDark : fẹẹrẹfẹ (           @black , 25 %); 
@grẹy :               fẹẹrẹfẹ ( @ dudu , 50 %); 
@grayLight :          fẹẹrẹfẹ ( @ dudu , 70 %); 
@grayLighter :        fẹẹrẹfẹ ( @ dudu , 90 %); 
@funfun : #fff;             
 
// Awọn awọ Asẹnti
@bulu : #08b5fb;              
@ewe : #46a546;             
@pupa : #9d261d;               
@ofeefee : #ffc40d;            
@osan : #f89406;            
@pinu : #c3325f;              
@eleyi ti : #7a43b6;            
 
// Ipilẹ akoj
@basunt : ​​13px ;          
@ipese : 18px ;          

Ọrọ sisọ

Kere tun pese ọna asọye miiran ni afikun si /* ... */sintasi deede CSS.

// Eleyi jẹ a ọrọìwòye
/* Eyi tun jẹ asọye */

Dapọ soke awọn wazoo

Mixins jẹ ipilẹ pẹlu tabi awọn apakan fun CSS, gbigba ọ laaye lati ṣajọpọ koodu bulọọki kan sinu ọkan. Wọn jẹ nla fun awọn ohun-ini iṣaju ataja bii box-shadow, awọn gradients aṣawakiri-kiri, awọn akopọ fonti, ati diẹ sii. Ni isalẹ ni apẹẹrẹ ti awọn mixins ti o wa pẹlu Bootstrap.

Awọn akopọ Font

# font {
  . shorthand ( @ iwuwo : deede , @ iwọn : 14px , @lineHeight : 20px ) {     
    font - iwọn : @ iwọn ; 
    font - iwuwo : @ iwuwo ; 
    ila - iga : @lineHeight ; 
  }
  . sans - serif ( @ iwuwo : deede , @ iwọn : 14px , @lineHeight : 20px ) {     
    font - idile : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    font - iwọn : @ iwọn ; 
    font - iwuwo : @ iwuwo ; 
    ila - iga : @lineHeight ; 
  }
  . serif ( @ iwuwo : deede , @ iwọn : 14px , @lineHeight : 20px ) {     
    font - idile : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - iwọn : @ iwọn ; 
    font - iwuwo : @ iwuwo ; 
    ila - iga : @lineHeight ; 
  }
  . monospace ( @weight : deede , @ iwọn : 12px , @lineHeight : 20px ) {     
    font - idile : "Monaco" , Oluranse Titun , monospace ;   
    font - iwọn : @ iwọn ; 
    font - iwuwo : @ iwuwo ; 
    ila - iga : @lineHeight ; 
  }
}

Gidiẹdi

#giradient {
  . petele ( @startColor : #555, @endColor: #333) { 
    abẹlẹ - awọ : @endColor ; 
    abẹlẹ - tun : tun - x ;
    abẹlẹ - aworan : - khtml - gradient ( laini , oke osi , oke ọtun , lati ( @startColor ), si ( @endColor )); // Konqueror   
    abẹlẹ - aworan : - moz - linear - gradient ( osi , @startColor , @endColor ); // FF 3.6+    
    abẹlẹ - aworan : - ms - linear - gradient ( osi , @startColor , @endColor ); // IE10    
    abẹlẹ - aworan : - webkit - gradient ( laini , oke osi , oke ọtun , awọ - Duro ( 0 % , @startColor ), awọ - Duro ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    abẹlẹ - aworan : - webkit - linear - gradient ( osi , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    abẹlẹ - aworan : - o - linear - gradient ( osi , @startColor , @endColor ); // Opera 11.10    
    abẹlẹ - aworan : laini - gradient ( osi , @startColor , @endColor ); // Le bošewa   
  }
  . inaro ( @startColor : #555, @endColor: #333) { 
    abẹlẹ - awọ : @endColor ; 
    abẹlẹ - tun : tun - x ;
    abẹlẹ - aworan : - khtml - gradient ( laini , oke osi , isalẹ osi , lati ( @startColor ), si ( @endColor )); // Konqueror   
    abẹlẹ - aworan : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    abẹlẹ - aworan : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    abẹlẹ - aworan : - webkit - gradient ( laini , oke osi , isalẹ osi , awọ - Duro ( 0 % , @startColor ), awọ - Duro ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    abẹlẹ - aworan : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    abẹlẹ - aworan : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    abẹlẹ - aworan : laini - gradient ( @startColor , @endColor ); // Awọn bošewa  
  }
  . itọnisọna ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . inaro - mẹta - awọn awọ ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

Mosi ati akoj eto

Gba fanimọra ki o ṣe awọn iṣiro diẹ lati ṣe ina rọ ati awọn alapọpọ ti o lagbara bii eyiti o wa ni isalẹ.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Akoj System
. apoti {
  igboro : @siteWidth ; 
  ala : 0 laifọwọyi ;  
  . clearfix ();
}
. awọn ọwọn ( @columnSpan : 1 ) {  
  iwọn : ( @ gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. aiṣedeede ( @columnOffset : 1 ) {  
  ala - osi : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}