Kpɔɖeŋu siwo dze egɔme kaba

Èhiã template aɖewo siwo wowɔna kabakabaa? Kpɔ kpɔɖeŋu vevi siawo siwo míeƒo ƒu la ɖa:

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 ƒe hatsotso = "span6" > 
    ...
  </div> ƒe nyawo
  <div ƒe hatsotso = "span10" > 
    ...
  </div> ƒe nyawo
</div> ƒe nyawo

Atɔwɔwɔ ƒe sɔtiwo

Nest wò nyatakakawo ne ele be nàwɔ to a .rowle kɔlam si li xoxo me.

Kpɔɖeŋu si nye sɔti siwo wotsɔ ƒo ƒui

<div klass = "fli" > 
  <div ƒe hatsotso = "span12" > 
    Dzidzenu 1 lia le sɔti me
    <div klass = "fli" > 
      <div ƒe hatsotso = "span6" > 
        Dzidzenu 2 lia
      </div> ƒe nyawo
      <div ƒe hatsotso = "span6" > 
        Dzidzenu 2 lia
      </div> ƒe nyawo
    </div> ƒe nyawo
  </div> ƒe nyawo
</div> ƒe nyawo

Mia wò ŋutɔ wò grid la

Wotu ɖe Bootstrap me nye tɔtrɔ ʋɛ aɖewo hena asitɔtrɔ le 940px grid ɖoɖo si woɖo ɖi la ŋu. Ne ètrɔ asi le eŋu vie la, àte ŋu atrɔ asi le sɔtiwo ƒe lolome, woƒe tsidzɔƒewo, kple nugoe si me wole ŋu.

Le grid la me

Trɔtrɔ siwo hiã be woatrɔ asi le grid ɖoɖoa ŋu fifia la katã le preboot.less.

Azɔ be woatrɔ asi le eŋu

Trɔtrɔ le grid la ŋu fia be woatrɔ tɔtrɔ etɔ̃awo @grid-*eye woagbugbɔ aƒo Less faɛlwo nu ƒu.

Bootstrap va dzra ɖo be wòakpɔ grid ɖoɖo si me sɔti siwo ade 24 le gbɔ; default la nye 16 ko. Alesi wò grid ƒe tɔtrɔwo adze abe ɖe wowɔ tɔtrɔ ɖe grid si me sɔti 24 le ŋue nye esi.

@gridSɔtiwo : 24 ;       
@gridSɔti ƒe Kekeme : 20px ;   
@gridGutter ƒe kekeme : 20px ;   

Ne wogbugbɔ ƒo ƒu ko la, woaɖo wò ɖe ɖoɖo nu!

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

940px-kekeme, si le titina ƒe ɖoɖo si woɖo ɖi eye wòle bɔbɔe na nyatakakadzraɖoƒe alo axa ɖesiaɖe kloe si ame ɖeka na <div.container>.

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

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

Axa ƒe axa ƒe ɖoɖo bubu si te ŋu trɔna bɔbɔe si ƒe kekeme nye min- kple max kpakple miame ƒe axadzinu. Enyo ŋutɔ na apps kple docs.

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

Tanyawo & kɔpi

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

Wotu nuŋɔŋlɔ ƒe fli bliboa ɖe Less ƒe tɔtrɔ eve dzi le míaƒe preboot.less faɛl la me: @basefontkple @baseline. Gbãtɔ nye gɔmeɖoanyi ŋɔŋlɔdzesi-lolome si wozã le bliboa me eye evelia nye gɔmeɖoanyi fli-kɔkɔme.

Míezãa tɔtrɔ mawo, kple akɔntabubu aɖewo, tsɔ wɔa míaƒe ƒomeviwo katã ƒe margins, paddings, kple line-heights kple bubuwo.

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 be woazã <b>kple <i>tags le HTML5 me eye mehiã be woawɔ woƒe atsyã le bold kple italic me o (togbɔ be ne gɔmesese ƒe akpa aɖe li wu la, zãe hã). <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. Alesi woate ŋu azãe ƒe kpɔɖeŋu evee 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 wòaɖ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

<blɔɖe ƒe nyagbɔgblɔ>
  <p> Lorem ipsum dolor bɔbɔ nɔ anyi amet, consectetur adipiscing elit. Xexlẽdzesi blibo ƒe nɔnɔme si nye ante venenatis dapibus posuere velit aliquet. </p> ƒe nyawo
  <sue> Ðɔkta Julius Hibbert </sue>
</blockquote ƒe nyagbɔgblɔ>

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 tsinyenye ƒe ƒunukpeƒetetedɔ odio sem nec elit.

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.

Sedede

<code> <pre>

Pimp wò code le atsyã me kple tag bɔbɔe eve. Ne èdi be yeawɔ nu dziŋɔ wu gɔ̃ hã to javascript dzi la, tsɔ Google ƒe code prettify agbalẽdzraɖoƒea da ɖe eme eye nèɖoe.

Kɔdaɖoɖowo ɖeɖefia

Woateŋu aɖe kɔda, blocks of alo snippets ko le fli me, afia kple atsyã to babla ɖe tag nyuitɔ me ko me. Le kɔda ƒe blɔka siwo keke ɖe fli geɖe ŋu gome la, zã <pre>element la. Ne èdi inline code la, zã <code>element la.

<div> ƒe ƒuƒoƒo
  <h1>Tanya</h1>
  <p>Nane le afisia tututu...</p>
</div> ƒe nyawo

<div> <h1> Tanya </h1> <p> Nane le afisia tututu... </p> </div>
  
  

Nuŋɔŋlɔ siwo le fli me

<span class="label">

He susu yi nyagbe ɖesiaɖe si le wò ŋutilã me nuŋɔŋlɔa me dzi alo nàde aflaga dzi.

De dzesi nusianu

Ehiã Yeye mawo siwo me wowɔa nu dzeaniwo le la dometɔ ɖeka kpɔ! alo Aflaga veviwo ne wole kɔda ŋlɔm? Enyo, fifia wo le asiwò. Nusiwo le eme le gɔmedzedzea me enye si:

Nyadzɔdzɔgblɔmɔnuwo ƒe grid

Fia nɔnɔmetata sue siwo ƒe lolome le vovovo le axa siwo dzi HTML ƒe afɔti le sue eye woƒe atsyãwo le sue ŋutɔ la dzi.

Kpɔɖeŋu nɔnɔmetata suewo

Nɔnɔmetata sue siwo le la me .media-gridate ŋu anye lolome ɖesiaɖe, gake wowɔa dɔ nyuie wu ne wowɔ nɔnɔmetata ɖe Bootstrap grid system si wotu ɖe eme la dzi tẽ. Nɔnɔmetata ƒe kekeme abe 90, 210, kple 330 ene ƒoa ƒu kple pixels ʋɛ aɖewo ƒe padding be woasɔ kple .span2, .span4, kple .span6sɔtiwo ƒe lolome.

Lolo

Le vedome

Sue

Wo ƒe kɔpiwo wɔwɔ

Media grids zazã le bɔbɔe eye wole bɔbɔe boŋ le dzesidede ƒe akpa dzi. Wotu woƒe didime ɖe nɔnɔmetata siwo le eme ƒe lolome dzi ko.

<ul  klass = "nyadzɔdzɔgblɔmɔnuwo-grid" >
  <li> ƒe nyawo
    <a href ƒe nya  = "#" > ƒe ƒuƒoƒo
      <img class = "nɔnɔmetata sue" src = "https://teƒe.it/330x230" alt    = "" >
    </a>
  </li> ƒe akpa aɖe
  <li> ƒe nyawo
    <a href = "#" ƒe nya. > ƒe ƒuƒoƒo
      <img class = "nɔnɔmetata sue" src = "https://teƒe.it/330x230" alt = ""   >
    </a>
  </li> ƒe akpa aɖe
</ul> ƒe nyawo

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.

Xlẽ wò sɔtiwo ƒe tanyawo ɖe mɔ <thead>si ana ɖoƒe si woɖo ɖe ɖoɖo nu nanye <thead>> me ɣesiaɣi<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.

<kplɔ̃>
  ...
</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.

<kplɔ̃ ƒe hatsotso = "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/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
<kplɔ̃ ƒe hatsotso = "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.

Kpe agble ƒe lolomewo ɖo

Trɔ asi le agbalẽvi ɖesiaɖe ŋu input, select, alotextarea kekeme to klass ʋɛ aɖewo ko tsɔtsɔ kpe ɖe wò dzesidea ŋu me.

Tso v1.3.0 dzi la, míetsɔ grid-based sizing classes kpe ɖe eŋu na form elements. Taflatse zã esiawo ɖe .mini, .small, etc klass siwo li fifia dzi.

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 woateŋu awɔ dɔwɔwɔ ƒe hatsotso geɖe ŋudɔ na amadede ƒe atsyã vovovowo. Klass siawo dometɔ aɖewoe nye klass si nye blɔ .primary, klass si ƒe amadede nye blɔ keklẽ .info, klass si le amadede dzẽ .successme, kple klass dzĩ .danger.

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. Dropdowns litags hã doa alɔ .activeaxa tiatia fifia ɖeɖefia.

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 me nyawo sɔ kple wo nɔewo le dome. Woate ŋu akpɔe le tabbed alo pill ƒe atsyãwo me.

• Aƒeme
• Ŋuti nya
• Gbedasiwo
• Ðoɖowo
• Kadodo
• Nusiwo wotsɔna ƒua gbe
  • Kadodo evelia
  • Nu bubu aɖe hã le afisia
  • Kadodo bubu

<ul 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 = "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

Abolomegbawo

Wozãa Breadcrumb navigation abe mɔ si dzi woato afia afisi wole le dɔwɔnu alo nyatakakadzraɖoƒe aɖe me la zãlawo ene, gake menye na mɔfiame gbãtɔ o.

• Aƒeme

• Aƒe / .
• Titina ƒe axa

• Aƒe / .
• Titina ƒe axa / .
• Bubu hã

• Aƒe / .
• Titina ƒe axa / .
• Ame bubu aɖe hã / .
• Èle afisia

<ul class = "abolomegba" > 
  <li><a href = "#" > Aƒe </a> <span klass = "mamã" > / </span></li>   
  <li><a href = "#" > Titina axa </a> <span klass = "mamã" > / </span></li>   
  <li><a href = "#" > Bubu </a> <span klass = "mamã" > / </span></li>   
  <li class = "active" > Èle afisia </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 = "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

.alert-message

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.

Na javascript la nasu asiwò »

Kpɔɖeŋu ƒe kɔda

<div class = "nuxlɔ̃ame-gbedasi ƒe nuxlɔ̃ame" > 
  <a klass = "tu" href = "#" > × </a>  
  <p><strong> Guacamole kɔkɔe la! </strong> Best check yo self, mèle dzedzem nyuie akpa o. </p> ƒe nyawo
</div> ƒe nyawo

Xɔ gbedasiwo

.alert-message.block-message

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.

Na javascript la nasu asiwò »

Kpɔɖeŋu ƒe kɔda

<div class = "nuxlɔ̃ame-gbedasi ƒe mɔxexe-gbedasi ƒe nuxlɔ̃ame" > 
  <a klass = "tu" href = "#" > × </a>  
  <p><strong> Guacamole kɔkɔe la! Esia nye nuxlɔ̃ame! </strong> Best check yo self, mèle dzedzem nyuie akpa o. Nulla vitae elit libero, si nye lãgbalẽ si nye augue. Praesent commodo cursus magna, vel scelerisque nisl ƒe ƒuƒoƒo kple. </p> ƒe nyawo
  <div class = "nuxlɔ̃ame-nuwɔnawo" > 
    <a class = "btn sue" href = "#" > Wɔ afɔɖeɖe sia </a> <a class = "btn sue" href = "#" > Alo wɔ esia </a>     
  </div> ƒe nyawo
</div> ƒe nyawo

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.

Na javascript la nasu asiwò »

Dɔwɔnu ƒe Aɖaŋuɖoɖowo

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

Na javascript la nasu asiwò »

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.

Na javascript la nasu asiwò »

Gɔmedzedze

Javascript tsɔtsɔ kpe ɖe Bootstrap agbalẽdzraɖoƒea ŋu le bɔbɔe ŋutɔ. Le ete la, míeyi gɔmedzenuawo dzi eye míena plugins dziŋɔ aɖewo wò be nàdze egɔme!

Kpɔ javascript ƒe nuŋlɔɖiwo »

Nusi le eme

He Bootstrap ƒe akpa vevi aɖewo va agbe me kple custom plugins yeye siwo wɔa dɔ kple jQuery kple Ender . Míele dzi dem ƒo na wò be nàkeke wo ɖe enu ahatrɔ asi le wo ŋu be woasɔ ɖe wò ŋgɔyiyi ƒe nuhiahiã tɔxɛwo nu.

Ðe javascript hiãa?

Gbeɖɛ! Wotrɔ asi le Bootstrap ŋu gbã kple vevitɔ be wòanye CSS agbalẽdzraɖoƒe. Javascript sia naa gɔmedzenuwɔwɔ ƒe ƒuƒoƒo aɖe le atsyã siwo le eme la tame.

Ke hã, na amesiwo hiã javascript la, míetsɔ kpeɖeŋutɔ siwo le etame la na be woakpe ɖe ŋuwò nàse alesi nàwɔ atsɔ Bootstrap awɔ ɖeka kple javascript gɔme eye be wòana tiatia si le bɔbɔe, si le bɔbɔe na wò hena dɔwɔwɔ veviawo enumake.

Ne èdi nyatakaka bubuwo kple be nàkpɔ live demos aɖewo la, taflatse kpɔ míaƒe plugin documentation page .