Histori

Mehleng ya peleng ya Twitter, baentšeneare ba be ba diriša mo e nyakilego go ba bokgobapuku le ge e le bofe bjo ba bego ba bo tlwaetše go fihlelela dinyakwa tša mafelelo a ka pele. Bootstrap e thomile bjalo ka karabo ya ditlhohlo tšeo di tšweleditšwego gomme tlhabollo e ile ya akgofiša ka pela nakong ya Hackweek ya mathomo ya Twitter.

Ka thušo le ditshwaelo tša baentšeneare ba bantši go Twitter, Bootstrap e gotše kudu go akaretša e sego fela mekgwa ya motheo, eupša dipaterone tša go hlama tša mafelelo a ka pele tše dibotse kudu le tše di swarelelago.

Bala ka botlalo go dev.twitter.com ›

Thekgo ya sephephediši

Bootstrap e lekwa le go thekgwa ka go diphensele tše kgolo tša sebjalebjale tša go swana le Chrome, Safari, Internet Explorer, le Firefox.

• Safari ya moragorago
• Google Chrome ya moragorago
• Firefox 4+ e le
• Mohlophisi wa Inthanete 7+

Seo se akareditšwego

Bootstrap e tla e feletše ka CSS e kgobokeditšwego, e sa kgoboketšwago, le dithempleite tša mohlala.

• All pele .less difaele
• CSS e kgobokeditšwego ka botlalo le go fokotšwa
• Ditokomane tša styleguide tše di feletšego
• Mohlala wa thempleite ya letlakala (tše dingwe di tla tla kgauswinyane)

Keriti ya kamehla

Tshepedišo ya keriti ya go se fetoge yeo e filwego bjalo ka karolo ya Bootstrap ke keriti ya dikholomo tše 16 tša bophara bja 940px. Ke tatso ya tshepedišo ya keriti ya 960 ye e tumilego, eupša ntle le mošito wa tlaleletšo/padding ka mahlakoreng a nngele le a go ja.

Mohlala wa go swaya keriti

Bjalo ka ge go bontšhitšwe mo, peakanyo ya motheo e ka hlolwa ka "dikholomo" tše pedi, ye nngwe le ye nngwe e akaretša palo ya dikholomo tše 16 tša motheo tšeo re di hlalošitšego bjalo ka karolo ya tshepedišo ya rena ya keriti. Bona mehlala ye e lego ka mo tlase bakeng sa diphetogo tše dingwe.

<div sehlopha="mothaladi">
  <div sehlophamo = "span6 dikholomo" > 
    ...
  </div> e
  <div dikholomo = "span10" > 
    ...
  </div> e
</div> e

Peakanyo ye e sa fetogego

Peakanyo ya motheo ya setshelo sa bophara bja 940px, se se tsepamego bakeng sa mo e ka bago sebaka sefe goba sefe goba letlakala.

<mmele>
  <div sehlopha = "setshelo" > 
    ...
  </div> e
</mmele>

Peakanyo ya seela

Sebopego sa letlakala la seela goba seela se se fetofetogago ka bophara bja min- le max le sidebar ya letsogong le letshadi. E kgolo bakeng sa ditiriso tse dingwe.

<mmele>
  <div sehlopha = "setshelo-seela" > 
    <div sehlopha = "sidebar" > 
      ...
    </div> e
    <div sehlopha = "diteng" > 
      ...
    </div> e
  </div> e
</mmele>

Dihlogo le khopi

Tatelano ya maemo ya go thaepa ya go rulaganya matlakala a gago a wepe.

h1. Hlogo ya 1

h2. Hlogo ya 2

h3. Hlogo ya 3

h4. Hlogo ya 4

h5. Hlogo ya 5

h6. Hlogo ya 6

Mohlala wa temana

Nullam quis risus eget urna mollis e kgabišitšwego vel eu leo. Cum sociis natoque penatibus le magnis dis pelego montes, nascetur ya go segiša mus. Nullam id dolor id nibh dikoloi tša dikoloi ut id elit.

Mohlala wa hlogo E na le hlogo ya ka fasana...

Misc. dielemente

Go šomiša kgatelelo, diaterese, & dikgutsufatšo

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

O swanetše go diriša neng

Dithepo tša kgatelelo ( <strong>le <em>) di swanetše go šomišwa go laetša bohlokwa bjo bo oketšegilego goba kgatelelo ya lentšu goba polelwana ge e bapetšwa le khopi yeo e e dikologilego. Diriša <strong>bakeng sa bohlokwa le <em>bakeng sa go gatelela kgateletšego .

Kgatelelo serapeng

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa feela dula amet risus. Maecenas faucibus mollis ya go ba le sebopego sa magareng. Nulla vitae elit libero, e lego pharetra e lego augue.

Ela hloko: Go sa dutše go lokile go šomiša <b>le <i>dithepo ka go HTML5, eupša ga di sa tla le mekgwa ya tlhago. <b>e reretšwe go tšweletša mantšu goba dipolelwana ntle le go fetišetša bohlokwa bja tlaleletšo, mola <i>bontši e le ya lentšu, mareo a sethekniki, bjalobjalo.

Diaterese

Elemente <address>e šomišwa go tshedimošo ya kgokagano ya rakgolokhukhu wa yona wa kgauswi, goba mmele ka moka wa mošomo. Ke kamoo e lebelegago ka gona:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, C. A. 94107
P: (123) 456-7890. Ke nyaka go nyoba nnywana ya mosadi waka

Ela hloko: Mothaladi wo mongwe le wo mongwe ka go o <address>swanetše go felela ka go kgaotša mothaladi ( <br />) goba o phuthelwe ka leswao la maemo a boloko (mohlala, <p>) go rulaganya diteng gabotse.

Dikhutsofatšo

Bakeng sa dikgutsufatšo le diakhronimi, diriša <abbr>tag ( <acronym>e tlogetšwe go HTML5 ). Bea foromo ya mongwalokopana ka gare ga thepo gomme o beakantše thaetlele ya leina le le feletšego.

Ditsopolwa tša go thibela

<blockquote> <p> <small>

Tsela ya go tsopola

Go akaretša setsopolwa sa go thibela, phuthela <blockquote>go dikologa <p>le <small>dithepo. Šomiša <small>elemente go tsopola mothopo wa gago gomme o tla hwetša em dash —pele ga yona.

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante venenatis dapibus posuere velit aliquet.

Ngaka Julius Hibbert o ile a hlokomela

E sa laelwago<ul>

• Lorem ipsum dolor dula amet
• Consectetur adipiscing ya maemo a godimo
• Palo e feletseng molestie lorem ka massa
• Facilisis ka pretium nisl aliquet
• Nulla volutpat aliquam ya go swana le yona
  • Phasellus iaculis ya go swana le yona
  • Purus sodales di-ultricies
  • Vestibulum laoreet ya go rwala dithoto sem
  • A k tristique libero volutpat ka
• Faucibus porta lacus e le 'ngoe e le 'ngoe
• Aenean dula amet erat nunc
• Eget porttitor lorem ya go rwala dilo

E sa setaele<ul.unstyled>

• Lorem ipsum dolor dula amet
• Consectetur adipiscing ya maemo a godimo
• Palo e feletseng molestie lorem ka massa
• Facilisis ka pretium nisl aliquet
• Nulla volutpat aliquam ya go swana le yona
  • Phasellus iaculis ya go swana le yona
  • Purus sodales di-ultricies
  • Vestibulum laoreet ya go rwala dithoto sem
  • A k tristique libero volutpat ka
• Faucibus porta lacus e le 'ngoe e le 'ngoe
• Aenean dula amet erat nunc
• Eget porttitor lorem ya go rwala dilo

E laetšwe<ol>

1. Lorem ipsum dolor dula amet
2. Consectetur adipiscing ya maemo a godimo
3. Palo e feletseng molestie lorem ka massa
4. Facilisis ka pretium nisl aliquet
5. Nulla volutpat aliquam ya go swana le yona
6. Faucibus porta lacus e le 'ngoe e le 'ngoe
7. Aenean dula amet erat nunc
8. Eget porttitor lorem ya go rwala dilo

Tlhalošodl

Mananeo a tlhaloso

Lenaneo la tlhalošo le phethagetše bakeng sa go hlaloša mareo.

Euismod

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

Donec id elit e seng mi porta gravida ka eget metus.

Malesuada porta ya go tswalela

Etiam porta sem malesuada ea mollis euismod.

Go aga ditafola

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

Ditafola ke tše kgolo—bakeng sa dilo tše dintši. Ditafole tše kgolo, le ge go le bjalo, di nyaka go se nene ga lerato la go swaya gore di be le mohola, di ka lekanywago le go balega (boemong bja khoutu). Maele a mmalwa a go thuša ke a.

Ka mehla phuthela dihlogo tša gago tša dikholomo ka mokgwa wo e <thead>lego gore tatelano ya maemo e be <thead>> <tr>> <th>.

Go swana le dihlogo tša dikholomo, diteng ka moka tša mmele wa tafola ya gago di swanetše go phuthelwa ka a <tbody>gore tatelano ya gago e be <tbody>> <tr>> <td>.

Mohlala: Ditaele tša tafola tša maitirelo

Ditafola ka moka di tla bewa setaele ka go iketla ka mellwane ye bohlokwa fela go netefatša go balega le go hlokomela sebopego. Ga go nyakege gore o oketše diklase tše oketšegilego goba dika.

# .	Leina	Sefane	Polelo
1.	Dingwe	Tee	Seisimane
2.	Joe o ile a	Sephuthelwana sa Sixpack	Seisimane
3.	Stu	Dent	Khoutu ya

<tafola sehlopha="tafole-tlwaelehileng"> sehlopha = "tafole-tlwaelehileng" >
  ...
</tafola>

Mohlala: Zebra-striped

Hwetša go se nene go makatša ka ditafola tša gago ka go oketša zebra-striping—e no oketša .zebra-stripedklase.

# .	Leina	Sefane	Polelo
1.	Dingwe	Tee	Seisimane
2.	Joe o ile a	Sephuthelwana sa Sixpack	Seisimane
3.	Stu	Dent	Khoutu ya

Ela hloko: Zebra-striping ke kaonafatšo ye e tšwelago pele yeo e sa hwetšagalego go diphensele tša kgale tša go swana le IE8 le ka fase.

<tafole sehlopha="tafole-tlwaelehileng zebra-striped"> sehlopha = "tlwaelehileng-tafole zebra-methalo" >
...
</tafola>

Mohlala: Zebra-methalo w / TableSorter.js

Ge re tšea mohlala wa peleng, re kaonafatša mohola wa ditafola tša rena ka go fa mošomo wa go hlopha ka jQuery le plugin ya Tablesorter . Klika hlogo ya kholomo efe goba efe go fetoa hlopha.

# .	Leina	Sefane	Polelo
1.	A gago	Tee	Seisimane
2.	Joe o ile a	Sephuthelwana sa Sixpack	Seisimane
3.	Stu	Dent	Khoutu ya

<script src="js/jquery/jquery.sehlophiši sa tafola.min.js"></script> src = "js / jquery / jquery.sehlophisi sa tafole.min.js" ></script>
<sengwalwa > 
  $ ( mosebetsi () { . 
    $ ( "tafola # hlophaMohlala wa Tafole" ). tablesorter ({ Lenaneo la go hlopha : [[ 1 , 0 ]] });  
  });
</script>
<tafole sehlopha = "tlwaelehileng-tafole zebra-striped" > 
  ...
</tafola>

Ditaele tša go se fetoge

Diforomo ka moka di fiwa mekgwa ya go se fetoge go di tšweletša ka tsela ye e balegago le ye e ka lekanywago. Ditaele di fiwa bakeng sa ditseno ta sengwalwa, mananeo a go kgetha, mafelo a sengwalwa, dikonope ta radio le mapokisi a go hlahloba, le dikonope.

Mohlala foromo tšōmo

X-Tsenyo e Kgolo

Kgetha

1. 2. 3. 4. 5. 5.

Kgetha

1. 2. 3. 4. 5. 5.

Tsenyo yeo e sa Rulaganyetšwago

Ba Bangwe ba Boleng Mo

Tsenyo ye e golofetšego

X-Tsenyo e Kgolo

Seripa se sennyane sa sengwalwa sa thušo

Mohlala foromo tšōmo

Sengwalwa se se Tšeletšwego Pele

@

Lepokisi la go Hlahloba leo le Etilwego Pele

Lepokisi la go hlahloba leo le tlaleleditšwego

Tsenyo ya Faele

Mohlala foromo tšōmo

Lenaneo la Dikgetho

• Kgetho ya pele ke ye le yeo—kgonthišetša gore o akaretša lebaka leo ka lona e lego e kgolo
• Kgetho ya bobedi le yona e ka hlahlobja le go akaretšwa dipoelong tša foromo
• Kgetho ya boraro e ka—ee, o ile wa e phopholetša—le yona e ka hlahlobja gomme ya akaretšwa dipoelong tša foromo
• Kgetho ya bone e ka se hlahlobje ka ge e šitišitšwe.

Ela hloko: Dileibole di dikologa dikgetho ka moka tša mafelo a go klika a magolo kudu le foromo ye e šomišegago kudu.

Mokgwa wa Letšatšikgwedi

go Dinako tsohle di bontšitsoe e le Pacific Standard Time (GMT -08:00).

Lefelo la sengwalwa

Thibelo ya sengwalwa sa thušo go hlaloša tšhemo ye e lego ka godimo ge go nyakega.

Lenaneo la Dikgetho

• Kgetho ya pele ke ye le yeo—kgonthišetša gore o akaretša lebaka leo ka lona e lego e kgolo
• Kgetho ya bobedi le yona e ka hlahlobja le go akaretšwa dipoelong tša foromo

Boloka Diphetogo  Khansela

Diforomo tše di kgobokeditšwego

Oketša .form-stackedgo HTML ya foromo ya gago gomme o tla ba le dileibole godimo ga mafelo a bona go e na le go ba ka go la nngele la bona. Se se šoma gabotse ge e le gore diforomo tša gago di le kopana goba o na le dikholomo tše pedi tša ditseno tša diforomo tše boima.

Mohlala foromo tšōmo

X-Tsenyo e Kgolo

Kgetha

1. 2. 3. 4. 5. 5.

Mohlala foromo tšōmo

X-Tsenyo e Kgolo

Seripa se sennyane sa sengwalwa sa thušo

Lenaneo la Dikgetho

• Kgetho ya pele ke ye le yeo—kgonthišetša gore o akaretša lebaka leo ka lona e lego e kgolo
• Kgetho ya bobedi le yona e ka hlahlobja le go akaretšwa dipoelong tša foromo

Ela hloko: Dileibole di dikologa dikgetho ka moka tša mafelo a go klika a magolo kudu le foromo ye e šomišegago kudu.

Boloka Diphetogo  Khansela

Dikonope

Bjalo ka kopano, dikonope di šomišwa go ditiro mola dikgokagano di šomišwa go dilo. Go fa mohlala, "Download" e ka ba konope gomme "mošomo wa morago bjale" e ka ba kgokagano.

Dikonope ka moka tša go se fetoge go setaele sa bohlokwa bjo bo bofefo, eupša sehlopha sa mmala wo mopududu .primaryse a hwetšagala. Plus, go kgokološa mekgwa ya gago go bonolo peasy.

Dikonope tša mohlala

Button mekgwa ya tshebetso ka sebediswa ho leha e le efe le .btnsebediswa. Ka tlwaelo o tla nyaka go diriša tše go fela <a>, <button>, le go kgetha <input>dielemente. Ke kamoo e lebelegago ka gona:

Bogolo bjo bo fapanego

Fancy dikonope tše kgolo goba tše nnyane? Eba le go yona!

Boemo bjo bo golofetšego

Bakeng sa dikonope tšeo di sa šomego goba tšeo di šitišitšwego ke tirišo ka lebaka le lengwe goba le lengwe, diriša boemo bjo bo golofetšego. Seo ke .disabledsa dikgokagano le :disabledsa <button>dielemente.

Dikgokagano

Dikonope

Ke eng

Topbar ya rena ke baara ye e sa fetogego yeo e nago le leswao goba leina la weposaete, go sepelasepela ga mathomo le foromo ya go nyaka.

E ka fetošwa

Dielemente ka moka ka gare, le topbar ka moka gape, ke tša boikgethelo. O ka kgetha go akaretša leswao/leina, nav, nyakišišo le nav ya bobedi—goba kopanyo le ge e le efe ya seo.

Di-dropdown di akareditšwe

Bjalo ka karolo ya go sepelasepela mo gogolo, re akaretša bokgoni bja gore o oketše dilo tše di theogago go nav ya gago. Lekola nav ya bobedi ka godimo (e logagane ka go le letona) go bona gore e dirwa bjang.

Dithepo le dipilisi

Hlama go sepelasepela ga bobedi mo go bonolo ka <ul>. Swap magareng ga dithepo goba dipilisi ka go oketša sehlopha sa maleba.

E kgolo bakeng sa dikarolo tše nnyane tša diteng go swana le matlakala a rena a dipeakanyo tša akhaonto le mela ya nako ya mosediriši bakeng sa go fetoša magareng ga matlakala a diteng tše di swanago. E hwetšagala ka mekgwa ya dithepo goba ya dipilisi.

• Gae
• Phorofaele
• Melaetša
• Dipeakanyo
• Kgokaganyo

<ul sehlopha="dithepo"> sehlopha = "dithepo" >
  <li sehlopha = "mafolofolo" ><a href = "#" > Gae </a></li>  
  <li><a href = "#" > Profaele </a></li> 
  <li><a href = "#" > Melaetša </a></li> 
  <li><a href = "#" > Dipeakanyo </a></li> 
  <li><a href = "#" > Ikgokaganye le </a></li> 
</ul>

• Gae
• Phorofaele
• Melaetša
• Dipeakanyo
• Kgokaganyo

<ul sehlopha="dipilisi"> sehlopha = "dipilisi" >
  <li sehlopha = "mafolofolo" ><a href = "#" > Gae </a></li>  
  <li><a href = "#" > Profaele </a></li> 
  <li><a href = "#" > Melaetša </a></li> 
  <li><a href = "#" > Dipeakanyo </a></li> 
  <li><a href = "#" > Ikgokaganye le </a></li> 
</ul>

Go ngwala matlakala

Ultra bonolo le bonyane setaele pagination bululetsoeng ke Rdio. Bloko e kgolo e thata go e foša, e ka lekanywa gabonolo, gomme e nea mafelo a magolo a go kgotla.

<div sehlopha="letlakala"> sehlopha = "matlakala" >
  <ul>
    <li class = "pele e golofetše" ><a href = "#" > ← Peleng </a></li>  
    <li sehlopha = "mafolofolo" ><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 = "e latelang" ><a href = "#" > E latelang → </a></li> e  
  </ul>
</div> e

Ditemošo tša motheo

Melaetša ya mothaladi o tee bakeng sa go tšweletša go palelwa, go palelwa mo go ka bago gona goba katlego ya tiro. Kudu-kudu e nago le mohola bakeng sa diforomo.

Thibela melaetša

Bakeng sa melaetša yeo e nyakago tlhalošo ye nnyane, re na le ditemošo tša setaele sa temana. Tše di phethagetše bakeng sa go bubbling godimo ga melaetša e metelele ya phošo, go lemoša modiriši ka tiro yeo e sa emetšego, goba go fo tšweletša tsebišo bakeng sa go gatelela kudu letlakaleng.

Di-modal

Di-modal—dipoledišano goba mapokisi a seetša—di botse kudu bakeng sa ditiro tša seemo maemong ao go ona go lego bohlokwa gore seemo sa morago se hlokomelwe.

Dikeletšo tša Sedirišwa

Twipsies ke super molemo bakeng sa thusa mosebedisi ferekane le ho ba supa ka tsela e nepahetseng.

Dipopovers

Šomiša dipopo go fa tshedimošo ya sengwalwa sa ka fase go letlakala ntle le go ama peakanyo.

Bootstrap e ile ya agwa ka Preboot , e lego sephuthelwana sa mohlodi wo o bulegilego sa mixins le diphetogo tšeo di tlago go dirišwa ka kopanelo le Less , e lego preprocessor ya CSS bakeng sa tlhabollo ya wepe ya ka pela le e bonolo.

Lekola ka moo re šomišitšego Preboot ka go Bootstrap le gore o ka e šomiša bjang ge o ka kgetha go sepetša Less go projeke ya gago ye e latelago.

Tsela ya go e diriša

Šomiša kgetho ye go diriša ka botlalo diphetogo tša Less tša Bootstrap, mixins, le go bea dihlaga ka go CSS ka javascript go sephephediši sa gago.

<link rel="letlakala la setaele/ka tlase" href="ka tlase/bootstrap.less" media="tšohle" /> rel = "letlakala la setaele / ka tlase" href = "ka tlase / bootstrap.less" mecha ea litaba = "kaofela" />   
<script src = "js / ka tlase-1.0.41.min.js" ></script> 

Ga o kwe tharollo ya .js? Leka tirišo ya Less Mac goba o šomiše Node.js go kgoboketša ge o tsenya khoutu ya gago.

Seo se akareditšwego

Ke tše dingwe tša dintlha tše kgolo tša seo se akaretšwago go Twitter Bootstrap bjalo ka karolo ya Bootstrap. Hlogo godimo go weposaete ya Bootstrap goba letlakala la projeke ya Github go taonelouta le go ithuta ka botlalo.

Diphetogo tša mebala

Diphetogo ka Ka fase di phethagetše bakeng sa go hlokomela le go mpshafatša CSS ya gago ya go opša ke hlogo ntle le go opša ke hlogo. Ge o nyaka go fetoša boleng bja mmala goba boleng bjo bo šomišwago gantši, bo mpshafatše lefelong le tee gomme o beakantšwe.

// Dikgokagano
@KgokaganoMmala : #8b59c2;         
@KgokaganoMmalaHover :     fifala ( @kgokaganyoMmala , 10 ); 
// Diputswa
@ e ntsho : # 000;             
@ bohloohoDark :           bobebe ( @ botsho , 25 %); 
@ bohlooho :               bobebe ( @ botsho , 50 %); 
@ bohloohoLight :          bobebe ( @ botsho , 70 %); 
@ bohloohoLighter :        bobebe ( @ botsho , 90 %); 
@ bošweu : #fff ;             
// Mebala ya Accent
@ botalalerata : # 08b5fb;              
@ botala : # 46a546;             
@ khubelu : # 9d261d;               
@ mosehla : # ffc40d;            
@ mmala wa namune : # f89406;            
@ e pinki : # c3325f;              
@ bo pherese : # 7a43b6;            
// Motheo wa motheo
@motheo : 20px ;          

Go swaya diphošo

Less e fana gape ka mokgwa o mongwe wa go swaya diphošo go tlaleletša go polelo ya go tlwaelega ya CSS /* ... */.

// Ye ke tshwaelo
/* Ye le yona ke tshwaelo */

Mixins godimo ga wazoo

Mixins ge e le gabotse ke di akaretša goba dikarolo tša CSS, di go dumelela go kopanya boloko ya khoutu go ba e tee. They’re great for morekisi prefixed thepa joaloka box-shadow, sefapano-browser gradients, fonte mekgobo, le ho feta. Ka tlase ke sampole ya di-mixin tšeo di akaretšwago le Bootstrap.

Mekgobo ya difonte

# fonte { .
  . shorthand ( @boima : tloaelehileng , @boholo : 14px , @lineHeight : 20px ) {     
    fonte - boholo : @boholo ; 
    fonte - boima : @boima ; 
    mola - bophagamo : @lineHeight ; 
  } .
  . sans - serif ( @boima : tloaelehileng , @boholo : 14px , @lineHeight : 20px ) {     
    fonte - lelapa : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    fonte - boholo : @boholo ; 
    fonte - boima : @boima ; 
    mola - bophagamo : @lineHeight ; 
  } .
  . serif ( @boima : tloaelehileng , @boholo : 14px , @lineBophahamo : 20px ) {     
    fonte - lelapa : "Georgia" , Times New Roman , Nako , sans - serif ;     
    fonte - boholo : @boholo ; 
    fonte - boima : @boima ; 
    mola - bophagamo : @lineHeight ; 
  } .
  . monospace ( @boima : tloaelehileng , @boholo : 12px , @lineHeight : 20px ) {     
    fonte - lelapa : "Monaco" , Motsamaisi New , sebaka se le seng ;   
    fonte - boholo : @boholo ; 
    fonte - boima : @boima ; 
    mola - bophagamo : @lineHeight ; 
  } .
} .

Dikelo tša go sepelelana

# gradient { .
  . tshekaletseng ( @Mmala oa ho qala : #555, @Mmala oa bofelo: #333) { 
mmala wa     bokamorago : @endColor ; 
    bokamorago - boeletša : boeletša - x ;
    bokamorao - setšoantšo : - khtml - gradient ( linear , letšehali holimo , ho le letona holimo , ho tloha ( @startColor ), ho ( @endColor )); // Monyakišiši   
    bokamorago - seswantšho : - moz - linear - gradient ( ka go le letshadi , @startColor , @endColor ); // FF 3,6 +    
    bokamorago - seswantšho : - ms - linear - gradient ( ka go le letshadi , @startColor , @endColor ); // IE10    
    bokamorao - setšoantšo : - webkit - gradient ( linear , holim'a le letšehali , holimo ho le letona , mmala - ema ( 0 %, @startColor ), mmala - ema ( 100 %, @endColor )); // Safari 4+, Krome 2+    
    bokamorago - seswantšho : - webkit - linear - gradient ( ka go le letshadi , @startColor , @endColor ); // Safari 5.1+, Krom 10+    
    bokamorago - seswantšho : - o - linear - gradient ( ka go le letshadi , @startColor , @endColor ); // Opera 11.10    
    - ms - filtara : %( "progid:DXImageTransform.Microsoft.gradient (qalaMmala = '% d', mafelelo Mmala = '% d', Mofuta wa Gradient = 1)" , @ Qala Mmala , @ mafelelo Mmala ); // IE8 +  
    filtara : e (% ( "progid: DXImageTransform.Microsoft.gradient (qalaMmala = '% d', mafelelo Mmala = '% d', Mofuta wa Gradient = 1)" , @ Qala Mmala , @ bofelo Mmala )); // IE6 & IE7 
    bokamorago- seswantšho : linear - gradient ( ka go le letshadi , @startColor , @endColor ); // Le maemo a   
  } .
  . paatsepama ( @Mmala oa ho qala : #555, @Mmala oa bofelo: #333) { 
mmala wa     bokamorago : @endColor ; 
    bokamorago - boeletša : boeletša - x ;
    bokamorao - setšoantšo : - khtml - gradient ( linear , letšehali holimo , letšehali tlase , ho tloha ( @startColor ), ho ( @endColor )); // Monyakišiši   
    bokamorao - setšoantšo : - moz - linear - gradient ( @ Qala Mmala , @ mafelelo Mmala ); // FF 3,6 +   
    bokamorago - seswantšho : - ms - linear - gradient ( @ Mmala wa go thoma , @ Mmala wa mafelelo ); // IE10   
    bokamorao - setšoantšo : - webkit - gradient ( linear , letšehali holimo , letšehali tlase , mmala - ema ( 0 %, @startColor ), mmala - ema ( 100 %, @endColor )); // Safari 4+, Krome 2+    
    bokamorago - seswantšho : - webkit - linear - gradient ( @ Mmala wa go thoma , @ Mmala wa mafelelo ); // Safari 5.1+, Krom 10+   
    bokamorao - setšoantšo : - o - linear - gradient ( @ Qala Mmala , @ mafelelo Mmala ); // Opera 11.10   
    - ms - filtara : %( "progid:DXImageTransform.Microsoft.gradient (qalaMmala = '% d', mafeleloMmala = '% d', Mofuta wa Gradient = 0)" , @QalaMmala , @qetellongMmala ); // IE8 +  
    filtara : e (% ( "progid: DXImageTransform.Microsoft.gradient (qalaMmala = '% d', mafelelo Mmala = '% d', Mofuta wa Gradient = 0)" , @ Qala Mmala , @ mafelelo Mmala )); // IE6 & IE7 
    bokamorao - setšoantšo : linear - gradient ( @ Qala Mmala , @ mafelelo Mmala ); // Maemo a  
  } .
  . tlhahlo ( @ Mmala wa go thoma : # 555, @ Mmala wa mafelelo: # 333, @ deg: 45deg) { 
    ...
  } .
  . paatsepama - tse tharo - mebala ( @ qala Mmala : # 00b3ee, @ Mmala o bohareng: # 7a43b6, @ mmalaEma: 0.5, @ Mmala oa bofelo: # c3325f) { 
    ...
  } .
} .

Mešomo le tshepedišo ya keriti

Fumana majabajaba le phetha ba bang ba dipalo ho hlahisa tenyetsehang le matla mixins joaloka e mong ka tlase.

// Griditude ya go ba le selo
@gridDikholomo : 16 ;       
@gridBophara bja Kholomo : 40px ;   
@gridBophara ba Sethiba : 20px ;   
// Tshepedišo ya Keriti
. setshelo { .
go :   @SebakaBophara ; 
  moedi : 0 e š etlehile ; 
  . hlaki š a ();
} . 
. dikholomo ( @kholomoSpan : 1 ) { .  
  pont š ho : ka gare ga mothaladi ;
  phaphametse : le a š ehali ;
go : ( @ keritiKholomoBophara   * @kholomoSpan ) + ( @gridKholomoBophara * ( @kholomoSpan - 1 ) );         
  moedi - ka ya le letshadi : @gridGutterWidth ; 
  &: ngwana wa pele { . 
    mo š ito - le letshadi : 0 ; 
  } . 
} . 
. offset (@ kholomoOffset : 1 ) { .   
  margin - left : ( @Bophara bja Kholomo ya keriti * @Offset ya kholomo ) + ( @Bophara bja Gutter ya keriti * ( @Offset ya kholomo - 1 )) ! go ya ;       
} .