Nyadzɔdzɔ

Le Twitter ƒe ŋkeke gbãtɔwo me la, mɔ̃ɖaŋudɔwɔlawo zãa agbalẽdzraɖoƒe ɖesiaɖe kloe si wonya nyuie tsɔ ɖoa ​​ŋgɔgbe ƒe nudidiwo gbɔ. Bootstrap dze egɔme abe ŋuɖoɖo na kuxi siwo do mo ɖa eye ŋgɔyiyi kabakaba kabakaba le Twitter ƒe Hackweek gbãtɔ me.

To mɔ̃ɖaŋudɔwɔla geɖewo ƒe kpekpeɖeŋu kple nyaŋuɖoɖowo le Twitter dzi la, Bootstrap dzi ɖe edzi ŋutɔ be menye atsyã veviwo koe wòlɔ ɖe eme o, ke boŋ ŋgɔgbe ƒe atsyã ƒe nɔnɔme siwo nya kpɔ wu eye wonɔa anyi didina wu.

Xlẽ nu geɖe le dev.twitter.com ›

Browser ƒe kpekpeɖeŋu

Wodoa Bootstrap kpɔ eye wodoa alɔe le egbegbe web-browser gãwo abe Chrome, Safari, Internet Explorer, kple Firefox ene me.

• Safari yeyetɔ kekeake
• Google Chrome yeyetɔ kekeake
• Firefox ƒe 4+
• Internet dzi Dɔwɔƒe 7+

Nusi le eme

Bootstrap va bliboe kple CSS siwo woƒo ƒu, esiwo womeƒo ƒu o, kple kpɔɖeŋu ƒe nɔnɔmetatawo.

• .less faɛl gbãtɔwo katã
• Woƒo CSS nu ƒu bliboe eye woɖee ɖe vovo
• Kpe styleguide ƒe nuŋlɔɖiwo ɖo
• Kpɔɖeŋu axa ƒe nɔnɔmetata (nu geɖe ava kpuie)

Grid si woɖo ɖi

Grid ɖoɖo gbãtɔ si wona abe Bootstrap ƒe akpa aɖe ene nye 940px kekeme 16-sɔtiwo ƒe grid. Enye 960 grid ɖoɖo xɔŋkɔa ƒe vivi, gake margin/padding bubu si le miame kple ɖusime la mele eme o.

Kpɔɖeŋu grid markup

Abe alesi woɖee fia le afisia ene la, woateŋu awɔ ɖoɖo vevi aɖe kple "sɔti" eve, ɖesiaɖe akeke gɔmeɖoanyi sɔti 16 siwo míeɖe gɔme be wonye míaƒe grid ɖoɖoa ƒe akpa aɖe la ƒe xexlẽme aɖe. Kpɔ kpɔɖeŋu siwo le ete hena tɔtrɔ bubuwo.

<div klass=" fli">
  <div klass = "span6 sɔtiwo" > 
    ...
  </div> ƒe ŋkɔ
  <div klass = "span10 sɔtiwo" > 
    ...
  </div> ƒe ŋkɔ
</div> ƒe ŋkɔ

Woɖo ɖoɖo si wowɔ ɖe ɖoɖo nu

Nugoe ƒe ɖoɖo vevi aɖe si keke 940px, si le titina na nyatakakadzraɖoƒe alo axa ɖesiaɖe kloe.

<ŋutilã>
  <div klass = "nugoe" > 
    ...
  </div> ƒe nyawo
</body>

Lãmetsiwo ƒe ɖoɖowɔwɔ

Tsi alo tsi ƒe axa ƒe ɖoɖo si te ŋu trɔna bɔbɔe kple min- kple max-kekeme kple miame ƒe axadzinu. Enyo ŋutɔ na dɔwɔɖoɖowo.

<ŋutilã>
  <div class = "nugoe-tsi" > 
    <div klass = "axadzinuŋɔŋlɔ" > 
      ...
    </div> ƒe nyawo
    <div klass = "emenyawo" > 
      ...
    </div> ƒe nyawo
  </div> ƒe nyawo
</body>

Tanyawo kple woƒe kɔpi

Agbalẽtata ƒe ɖoɖo si sɔ na wò nyatakakadzraɖoƒewo ƒe ɖoɖowɔwɔ.

h1. Tanya 1 lia

h2. Tanya 2 lia

h3. Tanya 3 lia

h4. Tanya 4 lia

h5. Tanya 5 lia

h6. Tanya 6 lia

Kpɔɖeŋu memama

Nullam quis risus eget urna mollis ƒe atsyɔ̃ɖoɖo vel eu leo. Cum sociis natoque penatibus kple vidzidzi ƒe mɔ̃ gãwo, nascetur ridiculus mus. Nullam id dolor id nibh ultricies ʋuwo ut id elit.

Kpɔɖeŋu tanya Tanya sue aɖe le esi...

Misc. nusiwo le eme

Tete ɖe ame dzi, adrɛswo, & kpukpuiwo zazã

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

Ɣekaɣie woazãe

Ele be woazã gbeteteɖedzidzesiwo ( <strong>kple <em>) atsɔ afia nya alo nyagbe aɖe ƒe vevienyenye alo gbeteteɖedzi bubu ne wotsɔe sɔ kple eƒe kɔpi si ƒo xlãe. Zãe <strong>hena vevienyenye kple gbetete <em>ɖe nuteɖeamedzi dzi.

Te gbe ɖe edzi le memamã aɖe me

Fusce dapibus , tellus ac cursus commodo , tortor mauris ƒe ʋeʋẽ lilili nibh , ut ʋeʋẽ lilili ƒe ʋeʋẽ lilili si bɔbɔ nɔ anyi amet risus. Maecenas faucibus mollis nye lã si woyɔna be mollis si woyɔna be maecenas. Nulla vitae elit libero, si nye lãgbalẽ si nye augue.

De dzesii: Eganyo kokoko be nàzã <b>kple <i>tags le HTML5 me, gake womegava kple atsyã siwo le dzɔdzɔme nu o. <b>woɖoe be wòate gbe ɖe nyawo alo nyagbewo dzi evɔ maɖe vevienyenye bubu aɖeke afia o, evɔ <i>wònye gbe, mɔ̃ɖaŋunyawo, kple bubuawo tɔ koŋ.

Adrɛswo

Wozãa <address>element la hena kadodo ŋuti nyatakakawo na tɔgbui si te ɖe eŋu wu, alo dɔ bliboa. Ale si wòdzenae nye esi:

De dzesii: Ele be fli ɖesiaɖe si le fli me <address>nawu enu kple fli-gbagbã ( <br />) alo woaxatsae ɖe block-level tag (le kpɔɖeŋu me, <p>) me be woaɖo emenyawo nyuie.

Kpuienyawo

Ne èdi kpukpuiwo kple kpukpuiwo la, zã <abbr>dzesideŋkɔ ( <acronym>womeɖe mɔ ɖe eŋu le HTML5 me o ). De nuŋɔŋlɔ kpui la ɖe tag la me eye nàɖo tanya na ŋkɔ bliboa.

Blockquotes ƒe nyawo

<blockquote> <p> <small>

Ale si woayɔ nyawoe

Be nàde blockquote la, xatsa <blockquote>ɖe eŋu <p>eye <small>nàde dzesiwo. Zã <small>element la tsɔ yɔ wò dzɔtsoƒe eye àxɔ em dash —do ŋgɔ nɛ.

Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo ƒe nɔnɔme si nye ante venenatis dapibus posuere velit aliquet.

Ðɔkta Julius Hibbert

Womewɔ ɖoɖo ɖe eŋu o<ul>

• Lorem ipsum dolor nɔ anyi amet
• Consectetur ami ƒe ʋeʋẽ lilili
• Xexlẽdzesi blibo molestie lorem le massa
• Facilisis le pretium nisl ƒe lãgbalẽ me
• Nulla volutpat ƒe lãgbalẽgolo
  • Ƒumelã si woyɔna be iaculis neque
  • Purus sodales ƒe ʋeʋẽ lililiwo
  • Vestibulum laoreet ƒe agbatsɔla sem
  • Ac tristique libero ƒe ʋuʋu le
• Faucibus porta lacus ƒe lãgbalẽgolo si woyɔna be fringilla vel
• Aenean bɔbɔ nɔ anyi amet erat nunc
• Eget porttitor ƒe nyagbɔgblɔ

Womewɔ atsyã aɖeke o<ul.unstyled>

• Lorem ipsum dolor nɔ anyi amet
• Consectetur ami ƒe ʋeʋẽ lilili
• Xexlẽdzesi blibo molestie lorem le massa
• Facilisis le pretium nisl ƒe lãgbalẽ me
• Nulla volutpat ƒe lãgbalẽgolo
  • Ƒumelã si woyɔna be iaculis neque
  • Purus sodales ƒe ʋeʋẽ lililiwo
  • Vestibulum laoreet ƒe agbatsɔla sem
  • Ac tristique libero ƒe ʋuʋu le
• Faucibus porta lacus ƒe lãgbalẽgolo si woyɔna be fringilla vel
• Aenean bɔbɔ nɔ anyi amet erat nunc
• Eget porttitor ƒe nyagbɔgblɔ

Wobia tso esi<ol>

1. Lorem ipsum dolor nɔ anyi amet
2. Consectetur ami ƒe ʋeʋẽ lilili
3. Xexlẽdzesi blibo molestie lorem le massa
4. Facilisis le pretium nisl ƒe lãgbalẽ me
5. Nulla volutpat ƒe lãgbalẽgolo
6. Faucibus porta lacus ƒe lãgbalẽgolo si woyɔna be fringilla vel
7. Aenean bɔbɔ nɔ anyi amet erat nunc
8. Eget porttitor ƒe nyagbɔgblɔ

Nuɖᴐɖᴐdl

Numeɖeɖewo ƒe xexlẽdzesiwo

Numeɖeɖe ƒe xexlẽdzesi sɔ nyuie na nyawo gɔmeɖeɖe.

Euismod ƒe nyawo

Vestibulum id ligula porta felis euismod ƒe ƒunukpeƒe ƒe ƒunukpeƒetetedɔ.

Donec id elit non mi porta gravida le eget metus me.

Malesuada ƒe lãgbalẽ

Etiam porta sem malesuada gã aɖe si woyɔna be euismod.

Kplɔ̃wo tutu

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

Kplɔ̃wo nyo ŋutɔ—na nu geɖe. Gake kplɔ̃ gãwo hiã dzesidede lɔlɔ̃ vi aɖe be woaɖe vi, woate ŋu atrɔ asi le wo ŋu, eye woate ŋu axlẽ wo (le kɔda ƒe ɖoɖo nu). Aɖaŋuɖoɖo ʋɛ aɖewo siwo akpe ɖe ŋuwòe nye esi.

Kpe wò sɔtiwo ƒe tanyawo ɖe <thead>ale si ɖoƒe si woɖo ɖe ɖoɖo nu nanye <thead>> <tr>> <th>me ɣesiaɣi.

Abe alesi wòle le sɔtiwo ƒe tanyawo gome ene la, ele be woaxatsa wò kplɔ̃a ƒe ŋutilã me nyawo katã ɖe a me <tbody>ale be wò ɖoɖowo nanye <tbody>> <tr>> <td>.

Kpɔɖeŋu: Tabla ƒe atsyã siwo woɖo ɖi

Woawɔ kplɔ̃wo katã ƒe atsyã le wo ɖokui si kple liƒo veviawo ko be woakpɔ egbɔ be woate ŋu axlẽ wo eye woalé woƒe wɔwɔme me ɖe asi. Mehiã be nàtsɔ klass alo nɔnɔme bubuwo akpe ɖe eŋu o.

<table class="kplɔ̃ si bɔ"> class = "kplɔ̃ si bɔ" >
  ...
</table> ƒe ƒuƒoƒo

Kpɔɖeŋu: Zebra-striped

Na wò kplɔ̃wo nadze tugbe vie to zebra-striping tsɔtsɔ kpee me—ɖeko nàtsɔ .zebra-stripedklass la akpe ɖe eŋu.

De dzesii: Zebra-striping nye ŋgɔyiyi ƒe ŋgɔyiyi si meli na web-browser xoxowo abe IE8 kple esiwo le ete ene o.

<table class="kplɔ̃ si bɔ ƒe zebra-striped"> class = "bɔ-kplɔ̃ zebra-striped" >
...
</table> ƒe ƒuƒoƒo

Kpɔɖeŋu: Zebra-striped w / TableSorter.js

Ne míetsɔ kpɔɖeŋu si do ŋgɔ la, míena míaƒe kplɔ̃wo ƒe viɖe nyona ɖe edzi to ɖoɖowɔwɔ ƒe dɔwɔwɔ nana to jQuery kple Tablesorter ƒe kpeɖeŋutɔ dzi. Zi kɔlam ɖesiaɖe ƒe ta dzi be nàtrɔ alesi woɖoe ɖe ɖoɖo nu.

<script src="js/jquery/jquery.kplɔ̃ɖoɖo.min.js"></ŋɔŋlɔdzesi> src = "js/jbiabia/jbiabia.kplɔ̃ɖoɖo.min.js" ></script>
<ŋɔŋlɔdzesiwo > 
  $ ( dɔwɔwɔ () { . 
    $ ( "table# sortTableKpɔɖeŋu" ). kplɔ̃dziɖoɖowɔla ({ xexlẽdzesiwo ƒe xexlẽdzesi : [[ 1 , 0 ]] });  
  });
</script> ƒe nyawo
<table class = "kplɔ̃ si bɔ ƒe zebra-striped" > 
  ...
</table> ƒe ƒuƒoƒo

Atsyã siwo woɖo ɖi

Wona atsyã gbãtɔwo agbalẽviawo katã be woatsɔ aɖe wo afia le mɔ si woate ŋu axlẽ eye woate ŋu atrɔ asi le wo ŋu nu. Wona atsyãwo na nuŋɔŋlɔwo dede, xexlẽdzesi siwo nàtia, nuŋɔŋlɔ ƒe teƒewo, radio ƒe abɔtawo kple dzesideɖakawo, kple abɔtawo.

Agbalẽvi siwo woƒo ƒu ɖe wo nɔewo dzi

Tsɔ kpe .form-stackedɖe wò agbalẽvia ƒe HTML ŋu eye dzesiwo anɔ woƒe agblewo tame tsɔ wu be woanɔ woƒe miame. Esia wɔa dɔ nyuie ŋutɔ ne wò agbalẽviwo le kpuie alo sɔti eve le asiwò na nyawo tsɔtsɔ de eme na agbalẽvi siwo kpekpe wu.

Abɔtawo ƒe ƒuƒoƒo

Abe ɖoɖo ene la, wozãa abɔtawo na nuwɔna esime wozãa kadodowo na nuwo. Le kpɔɖeŋu me, "Download" ateŋu anye abɔta eye "dɔwɔwɔ nyitsɔ laa" ateŋu anye kadodo.

Abɔtawo katã woɖo ɖi na atsyã si nye ɣie si me kɔ, gake .primaryklass blɔ aɖe li. Gakpe ɖe eŋu la, wò ŋutɔ wò atsyãwo ʋuʋu le bɔbɔe peasy.

Kpɔɖeŋu ƒe abɔtawo

Woate ŋu awɔ abɔta ƒe atsyãwo ŋudɔ ɖe nusianu ŋu kple esi .btnwozã. Zi geɖe la, àdi be yeawɔ esiawo ŋudɔ ɖe <a>, <button>, kple tiatia <input>ƒe akpawo ko dzi. Ale si wòdzenae nye esi:

Trɔ asi le lolomewo ŋu

Ðe nèdi be yeakpɔ abɔta siwo lolo wu alo esiwo le sue wua? Miwɔe ɖe edzi!

Nuwɔametɔ ƒe nɔnɔme

Le abɔta siwo mele dɔ wɔm o alo esiwo dɔwɔnua wɔ nuwɔametɔwo le susu aɖe ta la, zã nɔnɔme si nye nuwɔametɔ. Ema nye .disabledna kadodowo kple :disabledna <button>elements.

Kadodowo

Abɔtawo ƒe ƒuƒoƒo

Nukae nye ema

Míaƒe topbar nye bar si woɖo ɖi si me nyatakakadzraɖoƒe aɖe ƒe dzesi alo ŋkɔ, mɔfiame gbãtɔ, kple nyatakakadzraɖoƒea ƒe agbalẽvi le.

Woate ŋu atrɔ asi le eŋu

Nusiwo katã le eme, kple topbar bliboa hã, nye tiatia. Àte ŋu atiae be yeade dzesidenu/ŋkɔ, nav, didi, kple nav evelia—alo esiawo ƒe ƒuƒoƒo ɖesiaɖe.

Nusiwo woatsɔ aɖo anyi hã le eme

Abe mɔfiame vevitɔa ƒe akpa aɖe ene la, míetsɔ ŋutete si le asiwò be nàtsɔ nusiwo le tsia dzi akpe ɖe wò mɔfiame ŋu la de eme. Kpɔ nav evelia si le etame (si woɖo ɖe ɖusime) be nàkpɔ alesi wowɔe.

Tabs kple atikekuiwo

Wɔ evelia ƒe mɔfiame bɔbɔe aɖe si me a <ul>. Trɔ asi le tab alo atikekuiwo dome to klass si sɔ la tsɔtsɔ kpee me.

Enyo ŋutɔ na nyatakakawo ƒe akpa suewo abe míaƒe akɔnta ƒe ɖoɖowo ƒe axawo kple zãla ƒe ɣeyiɣikɔntabubuwo na tɔtrɔ le axa siwo ƒe nyawo sɔ kple wo nɔewo dome. Woate ŋu akpɔe le tabbed alo pill ƒe atsyãwo me.

• Aƒeme
• Ŋuti nya
• Gbedasiwo
• Ðoɖowo
• Kadodo

<ul klass="tabs"> klass = "tabs" >
  <li klass = "dɔwɔwɔ" ><a href = "#" > Aƒe </a></li>  
  <li><a href = "#" > Nyatakakawo </a></li> 
  <li><a href = "#" > Gbedasiwo </a></li> 
  <li><a href = "#" > Ðoɖowo </a></li> 
  <li><a href = "#" > Kadodo </a></li> 
</ul> ƒe nyawo

• Aƒeme
• Ŋuti nya
• Gbedasiwo
• Ðoɖowo
• Kadodo

<ul klass="atikewo"> klass = "atikekuiwo" >
  <li klass = "dɔwɔwɔ" ><a href = "#" > Aƒe </a></li>  
  <li><a href = "#" > Nyatakakawo </a></li> 
  <li><a href = "#" > Gbedasiwo </a></li> 
  <li><a href = "#" > Ðoɖowo </a></li> 
  <li><a href = "#" > Kadodo </a></li> 
</ul> ƒe nyawo

Axawo dzi nɔnɔ

Ultra bɔbɔe kple minimally atsyã axa ʋãme tso Rdio. Block gã la sesẽ be woato eŋu, woate ŋu atrɔ asi le eŋu bɔbɔe, eye wònaa teƒe gã siwo woate ŋu akli nu le.

<div klass="axawo ƒe xexlẽdzesiwo"> class = "axadzinɔnɔ" >
  <ul> ƒe nyawo
    <li klass = "do ŋgɔ na nuwɔametɔ" ><a href = "#" > ← Do ŋgɔ </a></li>  
    <li klass = "dɔwɔ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 = "si kplɔe ɖo" ><a href = "#" > Nusi kplɔe ɖo → </a></li> ƒe nyawo  
  </ul> ƒe nyawo
</div> ƒe nyawo

Nuxlɔ̃ame veviwo

Gbedasi siwo le fli ɖeka dzi hena nuwɔna aɖe ƒe kpododonu, kpododonu si ate ŋu adzɔ, alo dzidzedzekpɔkpɔ dzi ɖeɖe kpɔtɔ. Eɖea vi ŋutɔ na agbalẽviwo.

Xɔ gbedasiwo

Le gbedasi siwo hiã numeɖeɖe vi aɖe gome la, memamawo ƒe atsyã ŋuti nuxlɔ̃amewo le mía si. Esiawo sɔ nyuie na vodada ƒe gbedasi didiwo ƒe bubbling, nuxlɔ̃ame na ezãla tso afɔɖeɖe aɖe si wole lalam ŋu, alo nyatakakawo ɖeɖefia ko be woate gbe ɖe edzi geɖe wu le axaa dzi.

Modalwo ƒe ɖoɖowo

Modals—dialogs alo lightboxes—nyo ŋutɔ na nya siwo ƒo xlãe ƒe nuwɔnawo le nɔnɔme siwo me wòle vevie be woalé megbenyawo me ɖe asi.

Dɔwɔnu Ŋuti Aɖaŋuɖoɖowo

Twipsies nye super viɖenu na kpekpeɖeŋu nana zãla tɔtɔ kple wo fiafia mɔ nyuitɔ.

Popovers ƒe amewo

Zã popovers nàtsɔ ana nyatakaka siwo le ete la axa aɖe evɔ màkpɔ ŋusẽ ɖe ɖoɖowɔwɔ dzi o.

Wotu Bootstrap kple Preboot , si nye mixins kple tɔtrɔwo ƒe ƒuƒoƒo si woate ŋu azã ɖekae kple Less , si nye CSS ƒe ŋgɔdonya hena nyatakakadzraɖoƒe ƒe ŋgɔyiyi kabakaba kple bɔbɔe.

Kpɔ alesi míezã Preboot le Bootstrap me kple alesi nàte ŋu awɔ eŋudɔe ne ètiae be yeawɔ Less le wò dɔ si gbɔna me.

Ale si woazãe

Zã tiatia sia nàtsɔ awɔ Bootstrap ƒe Less tɔtrɔwo, mixins, kple nesting le CSS me ŋudɔ bliboe to javascript dzi le wò browser me.

<link rel="atsyãgbalẽ/less" href="less/bootstrap.less" media="wo katã" /> rel = "atsyãgbalẽ / sue" href = "less/bootstrap.less" media = "wo katã" />   
<script src = "js/less-1.0.41.min.js" ></ŋɔŋlɔdzesi> 

Mèle sesem le ɖokuiwò me be .js ƒe kuxia gbɔ kpɔnua le oa? Te Less Mac dɔwɔnua kpɔ alo zã Node.js nàtsɔ aƒo wo nu ƒu ne èle wò kɔpi la zãm.

Nusi le eme

Nusiwo le Twitter Bootstrap me abe Bootstrap ƒe akpa aɖe ene ƒe nu vevi aɖewoe nye esi. Ta yi Bootstrap nyatakakadzraɖoƒea alo Github dɔa ƒe axa dzi be nàwɔ eƒe kɔpi eye nàsrɔ̃ nu geɖe.

Amadede ƒe tɔtrɔwo

Variables le Less me sɔ nyuie na beléle na wò CSS taɖuame manɔmee kple asitɔtrɔ le eŋu. Ne èdi be yeatrɔ amadede ƒe asixɔxɔ alo asixɔxɔ si nèzãna enuenu la, trɔ asi le eŋu le teƒe ɖeka eye nàɖoe.

// Kadodowo
@kadodo ƒe Amadede : #8b59c2;         
@kadodo ƒe AmadedeHover :     do viviti ( @kadodo ƒe Amadede , 10 ); 
// Gbe ɣiwo
@ameyibɔ : #000;             
@grayDark :           kekeli ( @ameyibɔ , 25 %); 
@gray :               kekeli ( @black , 50 %); 
@grayLight :          kekeli ( @ameyibɔ , 70 %); 
@grayLighter :        kekeli ( @ameyibɔ , 90 %); 
@yevu : #fff;             
// Gbeɖiɖi ƒe Amadedewo
@blue : #08b5fb ƒe ƒuƒoƒo;              
@amadede dzẽ : #46a546;             
@dzẽ : # 9d261d;               
@yellow : # ffc40d ƒe ƒuƒoƒo;            
@aŋutiɖiɖi : #f89406;            
@pink : # c3325f ƒe ƒuƒoƒo;              
@aɖabɛ : #7a43b6;            
// Gɔmedzedze
@ gɔmedzedze : 20px ;          

Nyaŋuɖoɖo

Less hã naa nyaŋuɖoɖo ƒe atsyã bubu tsɔ kpe ɖe CSS ƒe /* ... */nyagɔmeɖegbalẽ si sɔ ŋu.

// Esia nye nyaŋuɖoɖo
/* Esia hã nye nyaŋuɖoɖo */

Mixins na wazoo la

Mixins nye nusiwo le eme alo akpa aɖewo koŋ na CSS, si na be nàte ŋu aƒo kɔda ƒe ƒuƒoƒo aɖe nu ƒu ɖekae wòazu ɖeka. Wonyo ŋutɔ na nudzrala ƒe ŋgɔdonyawo ƒe nɔnɔmewo abe box-shadow, cross-browser gradients, font stacks, kple bubuwo. Mixin siwo le Bootstrap me ƒe kpɔɖeŋu aɖe le ete.

Ŋɔŋlɔdzesiwo ƒe ƒuƒoƒo

#ŋɔŋlɔdzesi { .
  . nuŋɔŋlɔ kpui ( @kpekpeme : normal , @lolome : 14px , @lineHeight : 20px ) {     
    ŋɔŋlɔdzesi - lolome : @lolome ; 
    font - kpekpeme : @ kpekpeme ; 
    fli - kɔkɔme : @fli ƒe kɔkɔme ; 
  } .
  . sans - serif ( @kpekpeme : normal , @lolome : 14px , @lineHeight : 20px ) {     
    ŋɔŋlɔdzesi - ƒome : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    ŋɔŋlɔdzesi - lolome : @lolome ; 
    font - kpekpeme : @ kpekpeme ; 
    fli - kɔkɔme : @fli ƒe kɔkɔme ; 
  } .
  . serif ( @kpekpeme : normal , @lolome : 14px , @lineHeight : 20px ) {     
    ŋɔŋlɔdzesi - ƒome : "Georgia" , Times New Roman , Ɣeyiɣiwo , sans - serif ;     
    ŋɔŋlɔdzesi - lolome : @lolome ; 
    font - kpekpeme : @ kpekpeme ; 
    fli - kɔkɔme : @fli ƒe kɔkɔme ; 
  } .
  . monospace ( @kpekpeme : normal , @lolome : 12px , @lineHeight : 20px ) {     
    ŋɔŋlɔdzesi - ƒome : "Monaco" , Courier Yeye , teƒe ɖeka ;   
    ŋɔŋlɔdzesi - lolome : @lolome ; 
    font - kpekpeme : @ kpekpeme ; 
    fli - kɔkɔme : @fli ƒe kɔkɔme ; 
  } .
} .

Nusiwo wotsɔna tsia tre ɖe wo nɔewo ŋu

#gradient { .
  . horizontal ( @gɔmedzedzeAmadede : #555, @nuwuwuAmadede: #333) { 
    megbenyawo ƒe amadede : @endColor ; 
    megbenyawo - gbugbɔgagblɔ : gbugbɔgagblɔ - x ;
    megbe - nɔnɔmetata : - khtml - gradient ( fli , miame tame , ɖusi tame , tso ( @startColor ), va ɖo ( @endColor )); // Konqueror ƒe nya   
    megbe - nɔnɔmetata : -moz - linear - gradient ( miame , @ gɔmedzedzeAmadede , @nuwuwuAmadede ) ; // FF 3.6+ ƒe xexlẽme    
    megbe - nɔnɔmetata : -ms - linear - gradient ( miame , @ gɔmedzedzeAmadede , @nuwuwuAmadede ) ; // IE10 ƒe ƒuƒoƒo    
    megbe - nɔnɔmetata : - webkit - gradient ( fli , miame tame , ɖusi tame , amadede - tɔ ( 0 %, @startColor ), amadede - tɔ ( 100 %, @endColor )); // Safari 4+, Krom 2+    
    megbe - nɔnɔmetata : -webkit - linear - gradient ( miame , @ gɔmedzedzeAmadede , @nuwuwuAmadede ) ; // Safari 5.1+, Chrome 10+    
    megbe - nɔnɔmetata : -o - linear - gradient ( miame , @ gɔmedzedzeAmadede , @nuwuwuAmadede ) ; // Opera ƒe 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(gɔmedzedzeAmadede='%d', nuwuwuAmadede='%d', NuwuwuAmadede ƒe Ƒomevi=1)" , @ gɔmedzedzeAmadede , @nuwuwuAmadede ); // IE8+ ƒe ƒuƒoƒo  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(gɔmedzedzeAmadede='%d', nuwuwuAmadede='%d', NuwuwuAmadede ƒe Ƒomevi=1)" , @ gɔmedzedzeAmadede , @nuwuwuAmadede )); // IE6 & IE7 ƒe ƒuƒoƒo 
    megbe - nɔnɔmetata : fli - dzidzenu ( miame , @ gɔmedzedzeAmadede , @nuwuwuAmadede ); // Le dzidzenu   
  } .
  . vertical ( @gɔmedzedzeAmadede : #555, @nuwuwuAmadede: #333) { 
    megbenyawo ƒe amadede : @endColor ; 
    megbenyawo - gbugbɔgagblɔ : gbugbɔgagblɔ - x ;
    megbe - nɔnɔmetata : - khtml - gradient ( fli , miame tame , miame ete , tso ( @startColor ), va ɖo ( @endColor )); // Konqueror ƒe nya   
    megbe - nɔnɔmetata : -moz - linear - gradient ( @gɔmedzedzeAmadede , @nuwuwuAmadede ) ; // FF 3.6+ ƒe xexlẽme   
    megbe - nɔnɔmetata : -ms - linear - gradient ( @ gɔmedzedzeAmadede , @nuwuwuAmadede ) ; // IE10 ƒe ƒuƒoƒo   
    megbe - nɔnɔmetata : - webkit - gradient ( fli , miame tame , miame ete , amadede - tɔ ( 0 %, @startColor ), amadede - tɔ ( 100 %, @endColor )); // Safari 4+, Krom 2+    
    megbe - nɔnɔmetata : - webkit - linear - gradient ( @ gɔmedzedzeAmadede , @nuwuwuAmadede ); // Safari 5.1+, Chrome 10+   
    megbe - nɔnɔmetata : - o - fli - gradient ( @startColor , @endColor ); // Opera ƒe 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(gɔmedzedzeAmadede='%d', nuwuwuAmadede='%d', NuwuwuAmadede ƒe Ƒomevi=0)" , @ gɔmedzedzeAmadede , @nuwuwuAmadede ); // IE8+ ƒe ƒuƒoƒo  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(gɔmedzedzeAmadede='%d', nuwuwuAmadede='%d', NuwuwuAmadede ƒe Ƒomevi=0)" , @ gɔmedzedzeAmadede , @nuwuwuAmadede )); // IE6 & IE7 ƒe ƒuƒoƒo 
    megbe - nɔnɔmetata : fli - dzidzenu ( @gɔmedzedzeAmadede , @nuwuwuAmadede ) ; // Dzidzenu la  
  } .
  . mɔfiame ( @gɔmedzedzeAmadede : #555, @nuwuwuAmadede: #333, @deg: 45deg) { 
    ...
  } .
  . tsitrenu - etɔ̃ - amadedewo ( @gɔmedzedzeAmadede : #00b3ee, @midAmadede: #7a43b6, @amadedeTɔtrɔ: 0.5, @nuwuwuAmadede: #c3325f) { 
    ...
  } .
} .

Dɔwɔwɔwo kple grid ɖoɖo

Na fancy eye nàwɔ akɔntabubu aɖewo be nàwɔ mixins siwo te ŋu trɔna bɔbɔe eye ŋusẽ le wo ŋu abe esi le ete ene.

// Griditude ƒe ƒuƒoƒo
@gridKɔtiwo : 16 ;       
@gridSɔti ƒe Kekeme : 40px ;   
@gridGutter ƒe kekeme : 20px ;   
// Grid ƒe Ðoɖowɔɖi
. nugoe me tɔ { .
  kekeme : @site ƒe kekeme ; 
  margin : 0 le eɖokui si ;  
  . ɖɔɖɔɖo si me kɔ ();
} .
. sɔtiwo ( @columnSpan : 1 ) { .  
  ɖeɖefia : le fli me ; 
  float : miame ;
  kekeme : ( @gridKɔti ƒe Kekeme * @sɔti ƒe Kekeme ) + ( @gridGutterKekeme * ( @ sɔti ƒe Kekeme - 1 ));         
  margin - miame : @gridGutter ƒe kekeme ; 
  &: gbãtɔ - vi { .
    margin - miame : 0 ; 
  } .
} .
. offset ( @kɔlamOffset : 1 ) { .  
  margin - leame : ( @gridKɔti ƒe Kekeme * @sɔti ƒe Kpekpeme ) + ( @gridGutterKekeme * ( @sɔti ƒe Kpeɖodzi - 1 )) ! vevi aɖe ;          
} .