Tanyawo

HTML tanyawo katã, <h1>to <h6>la li.

h1. Tanya 1 lia

h2. Tanya 2 lia

h3. Tanya 3 lia

h4. Tanya 4 lia

h5. Tanya 5 lia

h6. Tanya 6 lia

Ŋutilã ƒe kɔpi

Bootstrap ƒe xexeame katã ƒe gɔmedzedze font-sizenye 14px , kple a si line-heightnye 20px . Wozãa esia ɖe <body>memamãawo kple wo katã ŋu. Tsɔ kpe ɖe eŋu la, <p>(memamawo) xɔa eteƒe ƒe akpa si nye woƒe fli-kɔkɔme ƒe afã (10px le gɔmedzedzea me).

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 ʋu siwo wotsɔna ƒoa ʋu.

Cum sociis natoque penatibus kple vidzidzi ƒe mɔ̃ gãwo, nascetur ridiculus mus. Donec ullamcorper nulla si menye metus nudzrala ƒe ʋuʋudedi o. Duis mollis, est non commodo luctus, nisi erat agbatsɔla ƒe lãgbalẽ, eget lacinia odio sem nec elit. Donec ullamcorper nulla si menye metus nudzrala ƒe ʋuʋudedi o.

Maecenas sed diam eget risus varius blandit bɔbɔ nɔ anyi amet non magna. Donec id elit non mi porta gravida le eget metus me. Duis mollis, est non commodo luctus, nisi erat agbatsɔla ƒe lãgbalẽ, eget lacinia odio sem nec elit.

<p> ... </p> ƒe nyawo

Kplɔ ŋutilã ƒe kɔpi

Na memamã aɖe nato vovo to .lead.

Vivamus sagittis lacus vel augue laoreet lãgbalẽgolo si wotsɔna dzraa nu. Duis mollis, est si menye nusiwo wodzrana o.

<p klass = "kplɔ" > ... </p>

Wotue kple Less

Wotu nuŋɔŋlɔ ƒe dzidzenu ɖe LESS ƒe tɔtrɔ eve dzi le tɔtrɔwo me.less : @baseFontSizekple @baseLineHeight. 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 bɔbɔe aɖewo tsɔ wɔa míaƒe ƒomeviwo katã ƒe margins, paddings, kple line-heights kple bubuwo. Trɔ asi le wo ŋu eye Bootstrap natrɔ ɖe wo ŋu.

Gbetete ɖe nu dzi

Wɔ HTML ƒe gbeteteɖedzi ƒe dzesi siwo woɖo ɖi la ŋudɔ kple atsyã siwo le bɔbɔe.

`<small>`

Ne èdi be yeaɖe gbetete ɖe nuŋɔŋlɔ siwo le fli me alo esiwo le fli me dzi ɖa la, zã dzesidenu suea.

Woɖoe be woabu nuŋɔŋlɔa ƒe fli sia be enye nuŋɔŋlɔ nyuiwo.

<p> <small> Woɖoe be woabu nuŋɔŋlɔ ƒe fli sia abe nuŋɔŋlɔ nyui ene. </small> </p> ƒe nyawo

Kalẽtᴐe

Le gbetete ɖe nuŋɔŋlɔ ƒe akpa aɖe dzi kple ŋɔŋlɔdzesi ƒe kpekpeme si kpekpe wu ta.

Woɖea nuŋɔŋlɔ ƒe akpa si gbɔna la gɔme abe nuŋɔŋlɔ si le ɣie ene .

<strong> woɖe egɔme abe nuŋɔŋlɔ si le ɣie ene </strong>

Ŋɔŋlɔdzesi siwo woŋlɔ kple asi

Le gbetete ɖe nuŋɔŋlɔ ƒe akpa aɖe dzi kple nuŋɔŋlɔ si wotsɔ ŋlɔ nu ɖe nu dzi ta.

Woɖea nuŋɔŋlɔ ƒe akpa si gbɔna la gɔme abe nuŋɔŋlɔ si woŋlɔ kple nuŋɔŋlɔ si wotsɔ nuŋɔŋlɔ si le fli me ene .

<em> woɖe egɔme abe nuŋɔŋlɔ si woŋlɔ kple nuŋɔŋlɔ si wotsɔ nuŋɔŋlɔ si le fli me ene </em>

Tawo yi dzi!Miate ŋu azãe faa <b>eye nàzãe <i>le HTML5 me. <b>woɖoe be wòate gbe ɖe nyawo alo nyagbewo dzi evɔ maɖe vevienyenye bubu aɖeke afia o esime <i>wònye gbe, mɔ̃ɖaŋunyawo, kple bubuawo tɔ koŋ.

Alignment ƒe klasswo

Gbugbɔ ɖo nuŋɔŋlɔwo ɖe akpa siwo me nuŋɔŋlɔwo ƒe ɖoɖowɔwɔ ƒe klasswo le bɔbɔe.

Nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu le miame.

Nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu le titina.

Nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu le ɖusime.

<p class = "text-left" > Nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu le miame. </p> ƒe nyawo 
<p class = "text-center" > Nuŋɔŋlɔ si woɖo ɖe titina . </p> ƒe nyawo 
<p class = "text-right" > Nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu le ɖusime. </p> ƒe nyawo

Tete ɖe klasswo dzi

Gɔmesese to amadede me kple asibidɛ ʋee aɖewo gbetete ɖe viɖenu ƒe klasswo.

Fusce dapibus, tellus ac fiƒode si wotsɔ ƒo ƒui, tortor mauris nibh.

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

Donec ullamcorper nulla si menye metus nudzrala ƒe ʋuʋudedi o.

Aenean ƒe eu leo quam. Atsyɔ̃ɖoɖo si wotsɔa lãgbalẽ wɔe si woyɔna be sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, si nye lãgbalẽ si wotsɔna tsɔa lãwoe.

<p klass = "mued" > Fusce dapibus, tellus ac fiƒodenyawo ƒe ƒuƒoƒo, tortor mauris nibh. </p> ƒe nyawo 
<p class = "nuŋɔŋlɔ-nuxlɔ̃ame" > Etiam porta sem malesuada magna mollis euismod. </p> ƒe nyawo 
<p klass = "nuŋɔŋlɔ-vodada" > Donec ullamcorper nulla si menye metus auctor fringilla o. </p> ƒe nyawo 
<p klass = "nuŋɔŋlɔ-nyatakaka" > Aenean eu leo quam. Atsyɔ̃ɖoɖo si wotsɔa lãgbalẽ wɔe si woyɔna be sem lacinia quam venenatis. </p> ƒe nyawo 
<p klass = "nuŋɔŋlɔ-dzidzedzekpɔkpɔ" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p> ƒe nyawo

Kpuienyawo

Stylized dɔwɔwɔ HTML ƒe <abbr>element na kpukpuiwo kple kpukpuiwo be woaɖe kekeɖenudɔwɔwɔ afia le hover. Kpuie siwo ŋu titlenɔnɔme le ƒe liƒo si le ete si dzi woŋlɔ nu ɖo bɔbɔe kple kpekpeɖeŋunufianu le hover me, si naa nya siwo ƒo xlãe bubuwo le hover me.

`<abbr>`

Ne èdi nuŋɔŋlɔ si keke ta le kpukpui aɖe ƒe ʋuʋu didi dzi la, tsɔ titlenɔnɔmea kpe ɖe eŋu.

Nya nɔnɔme ƒe kpukpui aɖee nye attr .

<abbr tanya = "nɔnɔme" > attr </abbr>

`<abbr class="initialism">`

Tsɔ kpe .initialismɖe kpukpui aɖe ŋu hena ŋɔŋlɔdzesi ƒe lolome si le sue vie.

HTML ye nye nu nyuitɔ kekeake tso esime wofli abolo.

<abbr title = "Ŋɔŋlɔdzesi Gãwo ƒe Dzesidegbe" class = "gɔmedzedze" > HTML </abbr>

Adrɛswo

Tsɔ tɔgbui si te ɖe ŋuwò wu alo dɔ bliboa ƒe kadodo ŋuti nyatakakawo fia.

`<address>`

Dzra ɖoɖowɔwɔ ɖo to fliawo katã nuwuwu kple <br>.

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

Ŋkɔ
Bliboa [email protected]

<adrɛs>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Xɔdɔme 600 <br>
  San Francisco, CA 94107 <br>
  <abbr ƒe tanya = "Telefon" > P: </abbr> (123) 456-7890 
</adrɛs>
 
<adrɛs>
  <strong> Ŋkɔ Blibo </strong><br>
  <a href = "mailto:#" > gbãtɔ.mlɔetɔ@kpɔɖeŋu.com </a> 
</adrɛs>

Blockquotes ƒe nyawo

Le nyatakaka siwo ƒe akpa aɖewo yɔ tso teƒe bubu le wò nuŋlɔɖia me ta.

Blockquote si woɖo ɖi

Kpe HTML<blockquote> ɖesiaɖe ɖe edzi abe nyayɔyɔa ene. Ne èdi nya siwo wogblɔ tẽ la, míeɖo aɖaŋu be nàgblɔ be .<p>

Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante.

<blɔɖe ƒe nyagbɔgblɔ>
  <p> Lorem ipsum dolor bɔbɔ nɔ anyi amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante. </p> ƒe nyawo
</blockquote ƒe nyagbɔgblɔ>

Blockquote ƒe tiatiawɔblɔɖewo

Atsyã kple emenyawo trɔna na tɔtrɔ bɔbɔewo le blockquote si wozãna ɖaa dzi.

Ŋkɔ na dzɔtsoƒe aɖe

Tsɔ <small>tag kpe ɖe eŋu hena dzesidede afisi wòtso. Kpe dzɔtsoƒedɔa ƒe ŋkɔ ɖe <cite>.

Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante.
Ame aɖe si xɔ ŋkɔ le Source Title me

<blɔɖe ƒe nyagbɔgblɔ>
  <p> Lorem ipsum dolor bɔbɔ nɔ anyi amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante. </p> ƒe nyawo
  <small> Ame aɖe si xɔ ŋkɔ <cite title = "Dzɔtsoƒe ƒe Tanya" > Dzɔtsoƒe ƒe Tanya </cite></small> 
</blockquote ƒe nyagbɔgblɔ>

Ðeɖefianu bubuwo ɖe wo nɔewo ŋu

Zãe .pull-rightna blockquote si le tsia dzi, si woɖo ɖe ɖusime.

Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante.
Ame aɖe si xɔ ŋkɔ le Source Title me

<blockquote klass = "he-ɖusime" > 
  ...
</blockquote ƒe nyagbɔgblɔ>

Ŋlɔ ŋkɔwo

Womewɔ ɖoɖo ɖe eŋu o

Nu siwo me ɖoɖo si nu woɖo wo ɖo mele vevie tẽ o ƒe xexlẽdzesiwo.

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ɔ

<ul> ƒe nyawo
  <li> ... </li> ƒe nyawo
</ul> ƒe nyawo

Wobia tso esi

Nusiwo me ɖoɖoa le vevie tẽ ƒe xexlẽdzesiwo.

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
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ɔ

<ol> ƒe nyawo
  <li> ... </li> ƒe nyawo
</ol>

Womewɔ atsyã aɖeke o

Ɖe default list-stylekple miame padding le list items (ɖeviwo enumake ɖeɖeko).

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ɔ

<ul klass = "si womewɔ atsyã na o" > 
  <li> ... </li> ƒe nyawo
</ul> ƒe nyawo

Le fli me

Da nusiwo katã woŋlɔ ɖi la ɖe fli ɖeka dzi kple inline-blockkple kekeli aɖewo padding.

Lorem ƒe ipsum
Phasellus ƒe lãgbalẽgolo si woyɔna be iaculis
Nulla volutpat ƒe nyawo

<ul klass = "le fli me" > 
  <li> ... </li> ƒe nyawo
</ul> ƒe nyawo

Nuɖᴐɖᴐ

Nyawo ƒe xexlẽdzesiwo kple woƒe nuŋlɔɖi siwo do ƒome kplii.

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.

<dl> ƒe nyawo
  <dt> ... </dt> ƒe nyawo
  <dd> ... </dd> ƒe nyawo
</dl> ƒe nyawo

Numeɖeɖe si le tsia dzi

Wɔ nyawo kple numeɖeɖewo le <dl>fli me ɖe wo nɔewo xa.

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.
Felis euismod ƒe tsinyenye si nye lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris ƒomevi aɖe si wotsɔ ƒoa ƒui, ut lãmi si wotsɔna ƒoa ƒui justo sit amet risus.

<dl klass = "dl-dzidzenu" > 
  <dt> ... </dt> ƒe nyawo
  <dd> ... </dd> ƒe nyawo
</dl> ƒe nyawo

Tawo yi dzi!Numeɖeɖe ƒe xexlẽdzesi siwo le tsia dzi la atso nya siwo didi akpa be woate ŋu asɔ ɖe miame ƒe sɔti ƒe ɖɔɖɔɖoa text-overflowme la me . Le nukpɔkpɔ ƒe mɔnu siwo le kpuie wu me la, woatrɔ ɖe ɖoɖo si woɖo ɖe wo nɔewo dzi si woɖo ɖi la ŋu.

Le fli me

Kpe kɔpi ƒe akpa siwo le fli me kple <code>.

Le kpɔɖeŋu me, <section>ele be woaxatsae abe inline ene.

Le kpɔɖeŋu me , <kɔda> & lt ; section & gt ;</ code > ele be woaxatsa abe fli me ene .

Gbãtɔ ƒe block

Zãe <pre>na fli geɖe ƒe kɔda. Kpɔ egbɔ be yesi le dzogoe ƒe akɔtadzesi ɖesiaɖe si le kɔdasia me nu hena gɔmeɖeɖe nyuie.

<p>Ŋɔŋlɔdzesiwo ƒe kpɔɖeŋu le afisia...</p>

<do ŋgɔ>
  <p>Nuŋɔŋlɔ ƒe kpɔɖeŋu le afisia...</p>
</pre>

Tawo yi dzi!Kpɔ egbɔ be yeda kɔdawo ɖe <pre>tags me wòate ɖe miame ŋu alesi nàte ŋui; awɔ tabwo katã gɔme.

Àteŋu atsɔ .pre-scrollableklass si aɖo max-height si nye 350px eye wòana y-axis scrollbar la akpe ɖe eŋu.

Atsyã siwo woɖo ɖi

Le atsyã veviwo wɔwɔ gome—siwo wotsɔ blaa nu bɔbɔewo kple nusiwo ma wo nɔewo le tsia dzi ko—la, tsɔ gɔmeɖoanyi ƒe hatsotso la .tablekpe ɖe ɖesiaɖe <table>ŋu .

# .	Ŋkɔ gbãtɔ	Ƒome ŋkɔ	Zãla ƒe ŋkɔ
1. 1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry ye nye esia	Xe lae	@twitter dzi

<kplɔ̃ ƒe hatsotso = "kplɔ̃" > 
  ...
</table> ƒe ƒuƒoƒo

Klass siwo woate ŋu awɔ le wo ɖokui si

Tsɔ klass siwo gbɔna la dometɔ aɖe kpe ɖe .tablegɔmedze klass la ŋu.

`.table-striped`

Tsɔ zebra-striping kpe ɖe kplɔ̃ ƒe fli ɖesiaɖe ŋu le <tbody>via :nth-childCSS tiatiawɔla la me (mele IE7-8 me o).

# .	Ŋkɔ gbãtɔ	Ƒome ŋkɔ	Zãla ƒe ŋkɔ
1. 1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry ye nye esia	Xe lae	@twitter dzi

<kplɔ̃ ƒe klass = "kplɔ̃ kplɔ̃-dzesi" > 
  ...
</table> ƒe ƒuƒoƒo

`.table-bordered`

Tsɔ liƒowo kple dzogoe siwo le goglo la kpe ɖe kplɔ̃a ŋu.

# .	Ŋkɔ gbãtɔ	Ƒome ŋkɔ	Zãla ƒe ŋkɔ
1. 1.	Marko	Otto ƒe nyawo	@mdo dzi
1. 1.	Marko	Otto ƒe nyawo	@getbootstrap dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

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

`.table-hover`

Na hover nɔnɔme nawɔ dɔ le kplɔ̃ ƒe fliwo dzi le a <tbody>.

# .	Ŋkɔ gbãtɔ	Ƒome ŋkɔ	Zãla ƒe ŋkɔ
1. 1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

<kplɔ̃ ƒe hatsotso = "kplɔ̃ kplɔ̃-hover" > 
  ...
</table> ƒe ƒuƒoƒo

`.table-condensed`

Enaa kplɔ̃wo nɔa sue wu to lãmenugbagbevi siwo wotsɔ blaa nu ɖe wo nɔewo ŋu la ɖeɖe ɖe afã me.

# .	Ŋkɔ gbãtɔ	Ƒome ŋkɔ	Zãla ƒe ŋkɔ
1. 1.	Marko	Otto ƒe nyawo	@mdo dzi
2.	Yakob	Thornton ƒe ŋkɔ	@da ami
3.	Larry Xevi la		@twitter dzi

<table class = "kplɔ̃ kplɔ̃-kple" > 
  ...
</table> ƒe ƒuƒoƒo

Fli ƒe klass siwo woate ŋu atia

Zã nya siwo ƒo xlãe ƒe klasswo nàtsɔ ade ama kplɔ̃wo ƒe fliwo.

Nusrɔ̃ƒe	Nuɖᴐɖᴐ
`.success`	Fia afɔɖeɖe si kpɔ dzidzedze alo nu nyui aɖe.
`.error`	Fia nuwɔna si me afɔku le alo ate ŋu anye nu gbegblẽ aɖe.
`.warning`	Fia nuxlɔ̃ame si ate ŋu ahiã be woalé ŋku ɖe eŋu.
`.info`	Wozãnɛ abe atsyã bubu siwo woɖo ɖi la teƒe ene.

# .	Nu si wowɔ	Woxɔ Fexexe	Ɖoƒe
1. 1.	TB - Ɣleti sia ɣleti	01/04/2012 ƒe ŋkeke	Da asi ɖe edzi
2.	TB - Ɣleti sia ɣleti	02/04/2012 ƒe ŋkeke	Wogbe
3.	TB - Ɣleti sia ɣleti	03/04/2012 ƒe ŋkeke	Le lalam
4.	TB - Ɣleti sia ɣleti	04/04/2012 ƒe ŋkeke	Yɔ ɖe eme be nàɖo kpe edzi

...
  < tr class = "dzidzedzekpɔkpɔ" >
    <td> 1 < /td> ƒe ƒuƒoƒo
    <td>TB - Ɣleti sia ɣleti</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>Woda asi ɖe edzi</ td >
  </ tr > ƒe ƒuƒoƒo
...

Wodo alɔ kplɔ̃dzidzesiwo

Ŋlɔ kplɔ̃dzi HTML ƒe akpa siwo wodo alɔe kple alesi wòle be woazã woe.

Dzesidekpe	Nuɖᴐɖᴐ
`<table>`	Wrapping element na nyatakakawo ɖeɖefia le tabular nɔnɔme me
`<thead>`	Nugoe ƒe akpa aɖe na kplɔ̃ ƒe ta ƒe fliwo ( `<tr>`) be woatsɔ ade dzesi kplɔ̃ ƒe sɔtiwo
`<tbody>`	Nugoe ƒe akpa aɖe na kplɔ̃ ƒe fliwo ( `<tr>`) le kplɔ̃a ƒe ŋutilã me
`<tr>`	Nugoe ƒe akpa aɖe na kplɔ̃dzilãmenugbagbeviwo ƒe hatsotso ( `<td>`alo `<th>`) si dzena le fli ɖeka dzi
`<td>`	Tabla ƒe lãmenugbagbevi si woɖo ɖi
`<th>`	Tabla ƒe lãmenugbagbevi tɔxɛ na sɔti (alo fli, le kekeme kple teƒe si woɖoe ɖo nu) ƒe dzesiwo
`<caption>`	Nusiwo le kplɔ̃a dzi ŋuti numeɖeɖe alo kpukpui, vevietɔ eɖea vi na screen readers

<kplɔ̃>
  <nyametsotso> ... </nyatakaka>
  <ta>
    <tr> ƒe nyawo
      <th> ... </th> ƒe nyawo
      <th> ... </th> ƒe nyawo
    </tr> ƒe nyawo
  </thead> ƒe nyawo
  <tbody> ƒe ƒuƒoƒo
    <tr> ƒe nyawo
      <td> ... </td> ƒe nyawo
      <td> ... </td> ƒe nyawo
    </tr> ƒe nyawo
  </tbody> ƒe ƒuƒoƒo
</table> ƒe ƒuƒoƒo

Atsyã siwo woɖo ɖi

Ame ɖekaɖekawo ƒe agbalẽvi dzi kpɔkpɔwo xɔa atsyã, gake womebiaa gɔmeɖoanyi ƒe hatsotso aɖeke le <form>alo tɔtrɔ gãwo le dzesidede me o. Enaa dzeside siwo woɖo ɖe wo nɔewo dzi, siwo woɖo ɖe miame la ɖoa agbalẽvia dzikpɔnuwo tame.

<nɔnɔme>
  <anyigba ƒe ƒuƒoƒo>
    <xotutu> Xotutu </xotutu>
    <label> Dzesideŋkɔ < /label>
    <input type = "text" placeholder = "Ŋlɔ nane..." >  
    <span class = "help-block" > Kpɔɖeŋu block-level kpekpeɖeŋu nuŋɔŋlɔ le afisia. </span> ƒe nyawo 
    <label class = "dzesideɖaka" > 
      <input type = "checkbox" > Kpɔm ɖa 
    </label> ƒe dzesi
    <button type = "ɖo ɖa" class = "btn" > Ðo ɖa </button>  
  </fieldset> ƒe ƒuƒoƒo
</form> ƒe nɔnɔme

Ðoɖo siwo woate ŋu awɔ le wo ɖokui si

Nusiwo le Bootstrap me la nye agbalẽvi ƒe ɖoɖo etɔ̃ siwo woate ŋu atia na zazã ƒe nɔnɔme siwo bɔ.

Didi ƒe agbalẽvi

Tsɔ kpe .form-searchɖe agbalẽvia ŋu kple ɖe agbalẽvia .search-queryŋu <input>hena nuŋɔŋlɔ si me goglo wu tsɔtsɔ de eme.

<form class = "agbalẽvi-didi" > 
  <input type = "text" class = "input-medium didi-biabia" >  
  <button type = "ɖo ɖa" klass = "btn" > Di </button>  
</form> ƒe nɔnɔme

Agbalẽvi si le fli me

Tsɔe kpe ɖe eŋu .form-inlinena dzeside siwo woɖo ɖe miame kple inline-block dziɖuɖuwo hena ɖoɖo si le sue.

<form class = "form-le fli me" > 
  <nyatakaka ƒomevi = "nuŋɔŋlɔ" klass = "nyatakaka-sue" teƒeɖoɖo = "Email" >   
  < nyagbe ƒomevi = "nyagbe" klass = "nyagbe -sue" teƒeɖoɖo = "Nyagbe" >   
  <label class = "dzesideɖaka" > 
    <input type = "checkbox" > Ðo ŋku dzinye 
  </label> ƒe dzesi
  <button type = "ɖo ɖa" klass = "btn" > De asi eme </button>  
</form> ƒe nɔnɔme

Nɔnɔme si le tsia dzi

Ðo dzesidewo ɖe ɖoɖo nu le ɖusi me eye nànɔ tsia dzi ɖe miame be woadze le fli ɖeka dzi kple dziɖunuwo. Ebia be woawɔ dzesidede tɔtrɔ geɖe wu tso agbalẽvi si woɖo ɖi me:

Tsɔe kpe .form-horizontalɖe agbalẽvia ŋu
Kpe ŋkɔwo kple nusiwo dzi wokpɔna ɖe eme.control-group
Tsɔe kpe .control-labelɖe dzesidegbalẽvia ŋu
Kpe dziɖuɖu ɖesiaɖe si do ƒome kplii ɖe eme .controlsbe wòasɔ ɖe ɖoɖo nu nyuie

<nɔnɔme ƒe hatsotso = "nɔnɔme-nɔnɔme" > 
  <div class = "dziɖuɖu-ƒuƒoƒo" > 
    <label class = "dziɖuɖu-dzesi" na = "inputEmail" > Email </label>  
    <div klass = "dziɖuɖuwo" > 
      <nuŋɔŋlɔ ƒe ƒomevi = "nuŋɔŋlɔ" id = "nyaŋɔŋlɔEmail" teƒeɖoɖo = "Email" >   
    </div> ƒe nyawo
  </div> ƒe nyawo
  <div class = "dziɖuɖu-ƒuƒoƒo" > 
    <label class = "dziɖuɖu-dzesi" na = "inputPassword" > Nyagbe </label>  
    <div klass = "dziɖuɖuwo" > 
      < nyagbe ƒomevi = "nyagbe" id = "nyagbenya" teƒeɖoɖo = "Nyagbe" >   
    </div> ƒe nyawo
  </div> ƒe nyawo
  <div class = "dziɖuɖu-ƒuƒoƒo" > 
    <div klass = "dziɖuɖuwo" > 
      <label class = "dzesideɖaka" > 
        <input type = "checkbox" > Ðo ŋku dzinye 
      </label> ƒe dzesi
      <button type = "ɖo ɖa" klass = "btn" > De asi eme </button>  
    </div> ƒe nyawo
  </div> ƒe nyawo
</form> ƒe nɔnɔme

Wodo alɔ agbalẽvi dzi kpɔkpɔ

Kpɔɖeŋu siwo nye standard form controls siwo wodo alɔ le kpɔɖeŋu form layout me.

Nusiwo wotsɔ de eme

Agbalẽvi dzi kpɔkpɔ si bɔ wu, nuŋɔŋlɔ-siwo wotu ɖe nyawo tsɔtsɔ de eme ƒe agblewo dzi. Kpekpeɖeŋu na HTML5 ƒomeviwo katã le eme: nuŋɔŋlɔ, nyagbe ɣaɣla, ŋkekeɣeyiɣi, ŋkekeɣeyiɣi-nutoa me, ŋkeke, ɣleti, ɣeyiɣi, kwasiɖa, xexlẽdzesi, e-mail, url, didi, tel, kple amadede.

Ebia be woazã a si woɖo ɖi typeɣesiaɣi.

<nuŋɔŋlɔ ƒomevi = "nuŋɔŋlɔ" teƒe = "Nuŋɔŋlɔ ƒe nuŋɔŋlɔ" >

Nuŋɔŋlɔ ƒe teƒe

Form control si doa alɔ nuŋɔŋlɔ ƒe fli geɖe. Trɔ rowsnɔnɔmea ne ehiã.

<nuŋɔŋlɔ ƒe teƒe fliwo = "3" ></textarea>

Dzesiɖakawo kple radiowo

Aɖakawo nye tiatia ɖeka alo geɖe tiatia le xexlẽdzesi aɖe me esime radiowo nye tiatia ɖeka tso geɖe me.

Default (woƒo ƒu ɖe wo nɔewo dzi) .

<label class = "dzesideɖaka" > 
  <input type = "dzesideɖaka" ƒe asixɔxɔ = "" >  
  Tiatia gbãtɔe nye esia kple ema—kpɔ egbɔ be yeŋlɔ nusita wònyo ŋutɔ la ɖe eme
</label> ƒe dzesi
 
<label ƒe hatsotso = "radio" > 
  <input type = "radio" ŋkɔ = "tiatiaRadiowo" id = "tiatiaRadiowo1" asixɔxɔ = "tiatia1" wokpɔ >     
  Tiatia gbãtɔe nye esia kple ema—kpɔ egbɔ be yeŋlɔ nusita wònyo ŋutɔ la ɖe eme
</label> ƒe dzesi
<label ƒe hatsotso = "radio" > 
  <nyatakaka ƒomevi = "radio" ŋkɔ = "tiatiawɔblɔɖeRadiowo" id = "tiatiawɔblɔɖeRadiowo2" asixɔxɔ = "tiatia2" >    
  Tiatia evelia ateŋu anye nu bubu eye ne ètiae la, àɖe tiatia gbãtɔ ɖa
</label> ƒe dzesi

Aɖaka siwo le fli me

Tsɔ .inlineklass la kpe ɖe aɖaka alo radio siwo kplɔ wo nɔewo ɖo ŋu be dziɖuɖuwo nadze le fli ɖeka dzi.

<label class = "dzesiɖaka le fli me" > 
  <input type = "checkbox" id = "inlineDzesiɖaka1" asixɔxɔ = "tiatia1" > 1   
</label> ƒe dzesi
<label class = "dzesiɖaka le fli me" > 
  <input type = "checkbox" id = "inlineDzesiɖaka2" asixɔxɔ = "tiatia2" > 2   
</label> ƒe dzesi
<label class = "dzesiɖaka le fli me" > 
  <input type = "checkbox" id = "inlineDzesiɖaka3" asixɔxɔ = "tiatia3" > 3   
</label> ƒe dzesi

Tiae

Zã tiatia si woɖo ɖi alo nàgblɔ a multiple="multiple"be nàɖe tiatia geɖe afia zi ɖeka.

<tia>
  <tiatiawɔblɔɖe> 1 </tiatiawɔblɔɖe>
  <tiatiawɔblɔɖe> 2 </tiatiawɔblɔɖe>
  <tiatiawɔblɔɖe> 3 </tiatiawɔblɔɖe>
  <tiatiawɔblɔɖe> 4 </tiatiawɔblɔɖe>
  <tiatiawɔblɔɖe> 5 </tiatiawɔblɔɖe>
</tia>
 
<tia geɖe = "geɖe geɖe" > 
  <tiatiawɔblɔɖe> 1 </tiatiawɔblɔɖe>
  <tiatiawɔblɔɖe> 2 </tiatiawɔblɔɖe>
  <tiatiawɔblɔɖe> 3 </tiatiawɔblɔɖe>
  <tiatiawɔblɔɖe> 4 </tiatiawɔblɔɖe>
  <tiatiawɔblɔɖe> 5 </tiatiawɔblɔɖe>
</tia>

Agbalẽvi dzi kpɔkpɔwo keke ɖe enu

Ne wotsɔ kpe ɖe web-browser ƒe dziɖunu siwo li fifia ŋu la, Bootstrap tsɔ agbalẽvi ƒe akpa bubu siwo ŋu viɖe le kpe ɖe eŋu.

Nusiwo wotsɔ de eme do ŋgɔ kple esiwo wotsɔ kpe ɖe eŋu

Tsɔ nuŋɔŋlɔ alo abɔtiwo kpe ɖe eŋu do ŋgɔ na nuŋɔŋlɔ ɖesiaɖe si wotu ɖe nuŋɔŋlɔ dzi alo emegbe. Do de dzesii be selectwomedo alɔ elementwo le afisia o.

Tiatia siwo woɖo ɖi

Kpe an .add-onkple an inputkple klass eve dometɔ ɖeka be nàtsɔ aŋlɔ nuŋɔŋlɔ aɖe do ŋgɔ alo atsɔ akpe ɖe nya aɖe si wotsɔ de eme ŋu.

<div klass = "nuŋɔŋlɔ-do ŋgɔ" > 
  <span klass = "kpeɖeŋutɔ" > @ </span> 
  <input class = "span2" id = "prependedInput" ƒomevi = "nuŋɔŋlɔ" teƒe = "Zãla ƒe ŋkɔ" >    
</div> ƒe nyawo
<div klass = "nya-tsɔtsɔ kpe ɖe eŋu" > 
  <nyatakaka ƒe hatsotso = "span2" id = "nyatakaka si wotsɔ kpe ɖe eŋu" ƒomevi = "nuŋɔŋlɔ" >   
  <span klass = "kpeɖeŋutɔ" > .00 </span> 
</div> ƒe nyawo

Ne wotsɔ wo ƒo ƒui

Zã klass eveawo kple kpɔɖeŋu eve ƒe .add-ontsɔ do ŋgɔ na nyawo tsɔtsɔ de eme eye nàtsɔ akpe ɖe eŋu.

<div class = "nuŋɔŋlɔ-do ŋgɔ na nyawo tsɔtsɔ de eme-tsɔ kpe ɖe eŋu" > 
  <span klass = "kpeɖeŋutɔ" > $ </span> 
  <input class = "span2" id = "tsɔ kpe ɖe eŋuPrependedInput" ƒomevi = "nuŋɔŋlɔ" >   
  <span klass = "kpeɖeŋutɔ" > .00 </span> 
</div> ƒe nyawo

Abɔtawo ɖe nuŋɔŋlɔ teƒe

Le esi teƒe be <span>nàzã a si me nuŋɔŋlɔ le la, zã a .btnnàtsɔ abla abɔta (alo eve) ɖe nya aɖe si woŋlɔ ɖe eme ŋu.

<div klass = "nya-tsɔtsɔ kpe ɖe eŋu" > 
  <nyatakaka ƒe hatsotso = "span2" id = "nyatakaka ƒe Abɔta si wotsɔ kpe ɖe eŋu" ƒomevi = "nuŋɔŋlɔ" >   
  <bɔt ƒe hatsotso = "btn" ƒomevi = "bɔt" > Yi! </button> ƒe dzesi  
</div> ƒe nyawo

<div klass = "nya-tsɔtsɔ kpe ɖe eŋu" > 
  <nyatakaka ƒe hatsotso = "span2" id = "nyatakakawo ƒe Abɔta siwo wotsɔ kpe ɖe eŋu" ƒomevi = "nuŋɔŋlɔ" >   
  <bɔt ƒe hatsotso = "btn" ƒomevi = "bɔt" > Di </bɔt>  
  <button class = "btn" type = "button" > Tiatiawɔnuwo </button>  
</div> ƒe nyawo

Abɔta siwo le fli dzi

<div klass = "nya-tsɔtsɔ kpe ɖe eŋu" > 
  <input class = "span2" id = "tsɔ kpe ɖeDropdownButton ŋu" ƒomevi = "nuŋɔŋlɔ" >   
  <div klass = "btn-ƒuƒoƒo" > 
    <button class = "btn ʋuʋudedi-trɔtrɔ" data-trɔtrɔ = "ɖiɖiɖeme" >  
      Nuwɔwɔ
      <span ƒe hatsotso = "caret" ></span> 
    </button> ƒe dzesi
    <ul class = "nusiwo le tsia dzi" > 
      ...
    </ul> ƒe nyawo
  </div> ƒe nyawo
</div> ƒe nyawo

<div klass = "nuŋɔŋlɔ-do ŋgɔ" > 
  <div klass = "btn-ƒuƒoƒo" > 
    <button class = "btn ʋuʋudedi-trɔtrɔ" data-trɔtrɔ = "ɖiɖiɖeme" >  
      Nuwɔwɔ
      <span ƒe hatsotso = "caret" ></span> 
    </button> ƒe dzesi
    <ul class = "nusiwo le tsia dzi" > 
      ...
    </ul> ƒe nyawo
  </div> ƒe nyawo
  <input class = "span2" id = "do ŋgɔ naDropdownButton" ƒomevi = "nuŋɔŋlɔ" >   
</div> ƒe nyawo

<div class = "nuŋɔŋlɔ-do ŋgɔ na nyawo tsɔtsɔ de eme-tsɔ kpe ɖe eŋu" > 
  <div klass = "btn-ƒuƒoƒo" > 
    <button class = "btn ʋuʋudedi-trɔtrɔ" data-trɔtrɔ = "ɖiɖiɖeme" >  
      Nuwɔwɔ
      <span ƒe hatsotso = "caret" ></span> 
    </button> ƒe dzesi
    <ul class = "nusiwo le tsia dzi" > 
      ...
    </ul> ƒe nyawo
  </div> ƒe nyawo
  <input class = "span2" id = "tsɔ kpe ɖe eŋuPrependedDropdownButton" ƒomevi = "nuŋɔŋlɔ" >   
  <div klass = "btn-ƒuƒoƒo" > 
    <button class = "btn ʋuʋudedi-trɔtrɔ" data-trɔtrɔ = "ɖiɖiɖeme" >  
      Nuwɔwɔ
      <span ƒe hatsotso = "caret" ></span> 
    </button> ƒe dzesi
    <ul class = "nusiwo le tsia dzi" > 
      ...
    </ul> ƒe nyawo
  </div> ƒe nyawo
</div> ƒe nyawo

Ƒuƒoƒo siwo woɖe ɖe akpa vovovowo me

<nɔnɔme>
  <div klass = "nuŋɔŋlɔ-do ŋgɔ" > 
    <div klass = "btn-ƒuƒoƒo" > ... </div> 
    <input type = "nuŋɔŋlɔ" > 
  </div> ƒe nyawo
  <div klass = "nya-tsɔtsɔ kpe ɖe eŋu" > 
    <input type = "nuŋɔŋlɔ" > 
    <div klass = "btn-ƒuƒoƒo" > ... </div> 
  </div> ƒe nyawo
</form> ƒe nɔnɔme

Didi ƒe agbalẽvi

<form class = "agbalẽvi-didi" > 
  <div klass = "nya-tsɔtsɔ kpe ɖe eŋu" > 
    <input type = "text" class = "span2 didi-biabia" >  
    <button type = "ɖo ɖa" klass = "btn" > Di </button>  
  </div> ƒe nyawo
  <div klass = "nuŋɔŋlɔ-do ŋgɔ" > 
    <button type = "ɖo ɖa" klass = "btn" > Di </button>  
    <input type = "text" class = "span2 didi-biabia" >  
  </div> ƒe nyawo
</form> ƒe nɔnɔme

Kpɔ lolome dzi ɖuɖu

Zã relative sizing classes abe .input-largealo sɔ kple wò nyawo tsɔtsɔ sɔ kple grid column sizes to .span*classes zazã me.

Block level ƒe nyawo tsɔtsɔ de eme

Na ɖesiaɖe <input>alo <textarea>element aɖe nawɔ nu abe block level element ene.

<input class = "input-block-level" ƒomevi = "nuŋɔŋlɔ" teƒe = ".input-block-level" >

Ƒometɔ ƒe lolome ƒe lolome

<input class = "input-mini" ƒomevi = "nuŋɔŋlɔ" teƒe = ".input-mini" >   
<input class = "input-sue" ƒomevi = "nuŋɔŋlɔ" teƒe = " .input -sue" >   
<input class = "input-medium" ƒomevi = "nuŋɔŋlɔ" teƒeɖoɖo = ".input-medium" >   
<input class = "input-lolo" type = "nuŋɔŋlɔ" teƒeɖoɖo = ".input-lolo" >   
<input class = "input-xlarge" ƒomevi = "nuŋɔŋlɔ" teƒe = ".input-xlarge" >   
<input class = "input-xxlarge" ƒomevi = "nuŋɔŋlɔ" teƒe = ".input-xxlarge" >

Tawo yi dzi!Le tɔtrɔ siwo gbɔna me la, míatrɔ asi le nyawo tsɔtsɔ de eme ƒe hatsotso siawo zazã ŋu be wòasɔ ɖe míaƒe abɔta ƒe lolomewo nu. Le kpɔɖeŋu me, .input-largeadzi nya aɖe si wotsɔ de eme la ƒe padding kple font-size ɖe edzi.

Grid ƒe lolome ƒe lolome

Zã .span1to .span12na nyawo tsɔtsɔ de eme siwo sɔ kple grid sɔtiwo ƒe lolome ɖeka.

<input class = "span1" ƒomevi = "nuŋɔŋlɔ" teƒe = ".span1" >   
<input class = "span2" ƒomevi = "nuŋɔŋlɔ" teƒe = ".span2" >   
<input class = "span3" ƒomevi = "nuŋɔŋlɔ" teƒe = ".span3" >   
<tia klass = "span1" > 
  ...
</tia>
<tia klass = "span2" > 
  ...
</tia>
<tia klass = "span3" > 
  ...
</tia>

Ne èdi grid ƒe nyawo tsɔtsɔ de fli ɖeka me geɖe la, zã .controls-rowmodifier class hena dometsotso nyuitɔ . Eɖea nusiwo wotsɔ de eme la ɖe tsia dzi be woagbã white-space, eɖoa axa siwo sɔ, eye wòkɔa tsia dzi.

<div klass = "dziɖuɖuwo" > 
  <input class = "span5" ƒomevi = "nuŋɔŋlɔ" teƒe = ".span5" >   
</div> ƒe nyawo
<div class = "dziɖuɖuwo-fli" > 
  <input class = "span4" ƒomevi = "nuŋɔŋlɔ" teƒe = ".span4" >   
  <input class = "span1" ƒomevi = "nuŋɔŋlɔ" teƒe = ".span1" >   
</div> ƒe nyawo
...

Nusiwo wotsɔ de eme siwo womate ŋu atrɔ asi le o

Fia nyatakakawo le agbalẽvi si womate ŋu atrɔ asi le o me ne womezã agbalẽvi ƒe dzesi ŋutɔŋutɔ o.

<span class = "input-xlarge uneditable-input" > Asixɔxɔ aɖewo le afisia </span>

Wɔ nuwɔnawo

Wu agbalẽvi aɖe nu kple nuwɔna ƒe ƒuƒoƒo (bɔtwo). Ne wotsɔe da ɖe a .form-actions, me la, abɔtaawo adze le wo ɖokui si be woasɔ ɖe agbalẽvia dzi kpɔnuwo nu.

<div class = "nɔnɔme-nuwɔnawo" > 
  <button type = "submit" class = "btn btn-primary" > Dzra tɔtrɔwo ɖo </button>  
  <bɔt ƒomevi = "bɔt" klass = "btn" > Te fli ɖe eme </button>  
</div> ƒe nyawo

Kpekpeɖeŋu nuŋɔŋlɔ

Inline kple block level support na kpekpeɖeŋu nuŋɔŋlɔ si dzena ƒo xlã form controls.

Kpekpeɖeŋunana le fli me

<input type = "text" ><span class = "kpekpeɖeŋu-le fli me" > Kpekpeɖeŋu nuŋɔŋlɔ le fli me </span>

Xɔ kpekpeɖeŋu

<input type = "text" ><span class = "help-block" > Kpekpeɖeŋu nuŋɔŋlɔ ƒe ƒuƒoƒo didi aɖe si gbãna ɖe fli yeye dzi eye ateŋu akeke ta wu fli ɖeka. </span> ƒe nyawo

Form dziɖuɖu ƒe nɔnɔmewo

Na nyaŋuɖoɖo zãlawo alo amedzrowo kple nyaŋuɖoɖo ƒe nɔnɔme veviwo le agbalẽviwo dzi kpɔkpɔ kple ŋkɔwo ŋu.

Nyawo ƒe susu tsɔtsɔ ɖe nu ŋu

Míeɖea outlineatsyã siwo woɖo ɖi le nɔnɔmetata ƒe dziɖuɖu aɖewo dzi ɖa eye míetsɔa a ɖoa box-shadoweteƒe na :focus.

<input class = "input-xlarge" id = "focusedInput" type = "nuŋɔŋlɔ" value = "Esia le susu me..." >

Nusiwo wotsɔ de eme siwo mesɔ o

Atsyã ƒe nyawo to web-browser ƒe dɔwɔwɔ gbãtɔ dzi kple :invalid. Tsɔ a type, tsɔ requirednɔnɔmea kpee nenye be agblea menye tiatia o, eye (ne esɔ) gblɔ a pattern.

Esia mele Internet Explorer 7-9 ƒe tɔtrɔwo me o le esi womewɔa kpekpeɖeŋu na CSS aʋatso tiatiawɔlawo o ta.

<input class = "span3" ƒomevi = "email" hiã >

Nuwɔametɔwo ƒe nyawo tsɔtsɔ de eme

Tsɔ disablednɔnɔmea kpe ɖe nyawo tsɔtsɔ de eme ŋu be nàxe mɔ na zãla ƒe nyawo tsɔtsɔ de eme eye nàʋu dzedzeme si to vovo vie.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Wowɔ nuwɔametɔwo le nyawo tsɔtsɔ yi eme le afisia..." nuwɔametɔwo >

Validation gblɔ be

Bootstrap la de kpeɖodzi atsyãwo na vodada, nuxlɔ̃ame, nyatakaka, kple dzidzedzekpɔkpɔ gbedasiwo. Be nàzãe la, tsɔ klass si sɔ kpe ɖe nusiwo ƒo xlãe .control-groupŋu .

<div class = "dziɖuɖu-ƒuƒoƒo ƒe nuxlɔ̃ame" > 
  <label class = "control-label" for = "inputWarning" > De nuxlɔ̃ame kple nuxlɔ̃ame </label>  
  <div klass = "dziɖuɖuwo" > 
    <nyatakaka ƒe ƒomevi = "nuŋɔŋlɔ" id = "nyatakaka ƒe Nuxlɔ̃ame" >  
    <span class = "help-inline" > Nane ateŋu agblẽ </span> 
  </div> ƒe nyawo
</div> ƒe nyawo
 
<div class = "dziɖuɖu-ƒuƒoƒo ƒe vodada" > 
  <label class = "dziɖuɖu-dzesi" na = "inputError" > De eme kple vodada </label>  
  <div klass = "dziɖuɖuwo" > 
    <nyatakaka ƒomevi = "nuŋɔŋlɔ" id = "nyatakaka ƒe Vodada" >  
    <span class = "help-inline" > Taflatse ɖɔ vodadaa ɖo </span> 
  </div> ƒe nyawo
</div> ƒe nyawo
 
<div class = "dziɖuɖu-ƒuƒoƒo ŋuti nyatakaka" > 
  <label class = "dziɖuɖu-dzesi" na = "inputInfo" > De eme kple nyatakaka </label>  
  <div klass = "dziɖuɖuwo" > 
    <nyatakaka ƒomevi = "nuŋɔŋlɔ" id = "nyatakakaNyatakaka" >  
    <span class = "help-inline" > Woxɔ zãla ƒe ŋkɔ xoxo </span> 
  </div> ƒe nyawo
</div> ƒe nyawo
 
<div class = "dziɖuɖu-ƒuƒoƒo ƒe dzidzedzekpɔkpɔ" > 
  <label class = "dziɖuɖu-dzesi" na = "inputSuccess" > De eme kple dzidzedzekpɔkpɔ </label>  
  <div klass = "dziɖuɖuwo" > 
    <nyatakaka ƒomevi = "nuŋɔŋlɔ" id = "nyatakaka ƒe Dzidzedzekpɔkpɔ" >  
    <span klass = "kpekpeɖeŋu-le fli me" > Woohoo! </span> ƒe nyawo 
  </div> ƒe nyawo
</div> ƒe nyawo

Abɔta siwo woɖo ɖi

Woateŋu awɔ abɔta ƒe atsyãwo ŋudɔ ɖe nusianu ŋu ne .btnwozã klass la. Ke hã, zi geɖe la, àdi be yeawɔ esiawo ŋudɔ ɖe only <a>kple <button>elements dzi hena gɔmeɖeɖe nyuitɔ kekeake.

Awunugbui	klass="" ƒe akpa aɖe.	Nuɖᴐɖᴐ
	`btn`	Standard grey button kple ʋuʋudedi
	`btn btn-primary`	Enaa nukpɔkpɔ ƒe kpekpeme bubu eye wòdea dzesi nuwɔna vevitɔ le abɔtawo ƒe hatsotso aɖe me
	`btn btn-info`	Wozãnɛ abe atsyã bubu siwo woɖo ɖi la teƒe ene
	`btn btn-success`	Fia afɔɖeɖe si kpɔ dzidzedze alo nu nyui aɖe
	`btn btn-warning`	Fia be ele be woaɖɔ ŋu ɖo le afɔɖeɖe sia me
	`btn btn-danger`	Fia nuwɔna si me afɔku le alo ate ŋu anye nu gbegblẽ aɖe
	`btn btn-inverse`	Trɔ asi le abɔta si ƒe amadede nye aŋutiɖiɖi viviti ŋu, si mebla ɖe gɔmesese ƒe nuwɔna alo zazã ŋu o
	`btn btn-link`	Te gbe ɖe abɔta aɖe dzi kpɔtɔ to ewɔwɔ wòadze abe kadodo ene me esime nèlé abɔta ƒe nuwɔna me ɖe asi

Cross browser ƒe wɔwɔme

IE9 metsoa megbenyawo ƒe ʋuʋu le dzogoe siwo le goglo dzi o, eyata míeɖenɛ ɖa. Do ƒome kplii la, IE9 jankifies nuwɔametɔwo buttonƒe akpawo, eɖea nuŋɔŋlɔ gɔme kple grey kple nuŋɔŋlɔ-vɔvɔli nyɔŋu aɖe si míate ŋu aɖɔ ɖo o.

Abɔta ƒe lolomewo

Ðe nèdi be yeakpɔ abɔta siwo lolo wu alo esiwo le sue wua? Tsɔ .btn-large, .btn-small, alo .btn-minikpe ɖe eŋu hena lolome bubuwo.

<p> ƒe nyawo
  <button class = "btn btn-lolo btn-gbãtɔ" type = "button" > Abɔta gã </button>  
  <bɔt ƒe hatsotso = "btn btn-lolo" ƒomevi = "bɔt" > Abɔta gã </bɔt>  
</p> ƒe nyawo
<p> ƒe nyawo
  <button class = "btn btn-primary" ƒomevi = "bɔt" > Abɔta gbãtɔ </button>  
  <button class = "btn" type = "button" > Abɔta si woɖo ɖi </button>  
</p> ƒe nyawo
<p> ƒe nyawo
  <button class = "btn btn-sue btn-gbãtɔ" type = "button" > Abɔta sue </button>  
  <button class = "btn btn-sue" ƒomevi = "button" > Abɔta sue </button>  
</p> ƒe nyawo
<p> ƒe nyawo
  <bɔt ƒe hatsotso = "btn btn-mini btn-gbãtɔ" ƒomevi = "bɔt" > Mini abɔta </bɔt>  
  <bɔt ƒe hatsotso = "btn btn-mini" ƒomevi = "bɔt" > Mini abɔta </bɔt>  
</p> ƒe nyawo

Wɔ block level buttons—esiwo keke dzila ƒe kekeme bliboa—to .btn-block.

<bɔt ƒe hatsotso = "btn btn-lolo btn-blɔ btn-gbãtɔ" ƒomevi = "bɔt" > Mɔxexe ƒe dzidzenu ƒe abɔta </button>  
<button class = "btn btn-large btn-block" ƒomevi = "button" > Mɔxexe ƒe dzidzenu ƒe abɔta </button>

Nuwɔametɔ ƒe nɔnɔme

Na abɔtawo nadze abe womate ŋu azi wo dzi o to wo tsɔtsɔ yi megbe 50% me.

Seƒoƒo ƒe akpa aɖe

Tsɔ .disabledklass la kpe ɖe <a>abɔtawo ŋu.

Kadodo gbãtɔ Kadodo

<a href = "#" class = "btn btn-large btn-gbãtɔ ƒe nuwɔametɔ" > Gbãtɔ ƒe kadodo </a>  
<a href = "#" klass = "btn btn-lolo nuwɔametɔ" > Kadodo </a>

Tawo yi dzi!Míezãnɛ .disabledabe viɖenu ƒe hatsotso ene le afisia, si sɔ kple .activeklass si bɔ, eyata mehiã ŋgɔdonya aɖeke o. Azɔ hã, atsyɔ̃ɖoɖo koe klass sia nye; ele be nàzã JavaScript si wowɔ ɖe ɖoɖo nu atsɔ awɔ kadodo siwo le afisia la nuwɔametɔe.

Abɔta ƒe akpa aɖe

Tsɔ disablednɔnɔmea kpe ɖe <button>abɔtawo ŋu.

<button type = "button" class = "btn btn-large btn-gbãtɔ nuwɔametɔ" nuwɔametɔ = "nuwɔametɔ" > Gbãtɔ abɔta </button>   
<bɔt ƒomevi = "bɔt" klass = "btn btn-lolo" nuwɔametɔ > Abɔta </bɔt>

Klas ɖeka, tag geɖe

Zã .btnklass la ɖe <a>, <button>, alo <input>element aɖe dzi.

<a klass = "btn" href = "" > Kadodo </a>  
<button class = "btn" type = "ɖo ɖa" > Abɔta </bɔt>  
<input class = "btn" type = "button" ƒe asixɔxɔ = "Nya si woŋlɔ ɖe eme" >   
<input class = "btn" type = "ɖo ɖa" value = "Ðo ɖa" >

Abe nuwɔna nyuitɔ ene la, dze agbagba nàna element la nasɔ kple wò nya siwo ƒo xlãe be nàkpɔ egbɔ be cross-browser gɔmeɖeɖea sɔ. Ne input, zã an <input type="submit">na wò abɔta.

Tsɔ klasswo kpe ɖe <img>element aɖe ŋu be nàwɔ nɔnɔmetatawo ƒe atsyã bɔbɔe le dɔ ɖesiaɖe me.

<img src = "..." klass = "img-goglo" >  
<img src = "..." klass = "img-ƒomevi" >  
<img src = "..." klass = "img-polaroid" >

Tawo yi dzi! .img-roundedeye .img-circlewomewɔa dɔ le IE7-8 me o le kpekpeɖeŋu ƒe anyimanɔmanɔ ta border-radius.

Nɔnɔmetatawo ƒe nuŋɔŋlɔwo

140 ƒe nɔnɔmetata siwo le sprite ƒe nɔnɔme me, siwo li le amadede dzẽ (si woɖo ɖi) kple ɣi me, Glyphicons ye na .

dzesi-huhɔ̃e
icon-hadzidzi
icon-didi ƒe dzesiwo
dzesi-gbalẽkotoku
nɔnɔmetata-dzi
icon-ɣletivi
dzesi-ɣletivi-ƒuƒlu
dzesi-zãla
nɔnɔmetata-film
icon-th-lolo ƒe dzesi
nɔnɔmetata-th
icon-th-ŋlɔɖi
dzesi-ok
icon-ɖe ɖa
dzesi-wo-dzi ɖe edzi
dzesi-wo-ɖe-dzi ɖe edzi
dzesi si wotsɔ tsia nu
dzesi-dzesi
icon-cog ƒe dzesi
icon-gbeɖuɖɔ
icon-aƒeme
dzesi-faɛl
icon-ɣeyiɣi
icon-mɔ dzi
dzesi-ɖe-ɖe-alt
dzesiwo ƒe kɔpi
dzesiwo-ɖoɖo ɖe Internet dzi
icon-inbox ƒe dzesiwo
icon-fefe-ƒomevi
icon-gbugbɔgagblɔ
dzesi-gbugbɔgawɔ
dzesiwo ƒe xexlẽdzesiwo-alt
dzesi-ʋuƒo
dzesi-aflaga
dzesi-toɖoɖomɔ̃wo
dzesi-gbeɖiɖi-tsi-tsi
icon-volume-ɖe-aɖiɖi
icon-volume-dzi ɖe edzi
dzesi-qrcode ƒe dzesi
dzesi-barcode ƒe dzesi
dzesi-dzesi
dzesi-dzesiwo
nɔnɔmetatawo ƒe agbalẽ
dzesi-dzesi-dzesi
nɔnɔmetata-ta-tata
icon-fotoɖemɔ̃
dzesi-ŋɔŋlɔdzesiwo
icon-bold ƒe dzesiwo
nɔnɔmetata si wotsɔ ŋlɔa nu
dzesi-nuŋɔŋlɔ-kɔkɔme
dzesi-nuŋɔŋlɔ-kekeme
icon-align-miame ƒe nɔnɔme
icon-align-si le titina
icon-align-ɖusime
icon-align-tsɔe ɖo kpe edzi
dzesiwo ƒe xexlẽdzesiwo
icon-indent-miame ƒe nɔnɔmetata
icon-indent-ɖusime
dzesi-mo-ɣeyiɣi-video
nɔnɔmetata-nɔnɔmetata
icon-pencil ƒe nɔnɔmetata
dzesi-nyigbatata-dzesi
icon-trɔ asi le eŋu
dzesi-nɔnɔme
dzesi-trɔ asi le eŋu
dzesi-mamã
dzesi-kpɔe ɖa
dzesi-ʋuʋu
icon-afɔɖeɖe-megbee
icon-fast-megbee
icon-megbee
nɔnɔmetata-fefe
dzesi-tɔ vie
dzesi-tɔtrɔ
icon-ŋgɔgbe
icon-si-yi ŋgɔ kabakaba
icon-afɔɖeɖe-yi ŋgɔ
icon-eject ƒe dzesiwo
dzesi-chevron-miame
dzesi-chevron-ɖusime
dzesi-kple-dzesi
dzesi-ɖe-dzesi
dzesi-ɖe-dzesi
dzesi-ok-dzesi
dzesi-biabia-dzesi
dzesi-nyatakaka-dzesi
icon-screenshot ƒe nɔnɔmetata
icon-ɖe-kple-ƒomevi
dzesi-ok-ƒo xlãe
icon-ban-ƒomevi
dzesi-aŋutsrɔe-miame
dzesi-aŋutsrɔe-ɖusime
dzesi-aŋutsrɔe-yi dzi
dzesi-aŋutsrɔe-aɖiɖi
icon-mamã-alt
icon-si ƒe lolome trɔ-yɔ fũ
icon-si ƒe lolome trɔ-sue
dzesi-kple kpe ɖe eŋu
dzesi-ɖe-ɖe le eme
dzesi-ɣletividzesi
dzesi-ɣlidodo-dzesi
nɔnɔmetata-nunana
dzesi-aŋgba
dzesi-dzo
icon-ŋku-ʋuʋu
icon-ŋku-klo ɖe eŋu
dzesi-nuxlɔ̃ame-dzesi
dzesi-yameʋu
dzesi-ɣletigbalẽ
icon-si wowɔ le vome
icon-nyaŋuɖoɖo
dzesi-magnet
nɔnɔmetata-chevron-dziyiyi
dzesi-chevron-aɖiɖi
icon-retweet ƒe dzesiwo
icon-nuƒleƒe-keke
dzesi-gbalẽdzraɖoƒe-tu
dzesi-gbalẽdzraɖoƒe-ʋu
icon-resize-si le tsitrenu
icon-resize-si le tsia dzi
dzesi-hdd
nɔnɔmetata-nyitsu ƒe dzo
dzesi-gaƒoɖokui
icon-ɖaseɖigbalẽ
icon-asibidɛwo ƒe asibidɛwo
icon-asibidɛwo-aɖiɖi
icon-asi-ɖusime
icon-asi-miame
icon-asi-dzi-dzi
icon-asi-aɖiɖi
icon-circle-aŋutsrɔe-ɖusime
icon-circle-aŋutsrɔe-miame
icon-ƒo xlã-aŋutsrɔe-yi dzi
icon-circle-aŋutsrɔe-aɖiɖi
icon-globe ƒe nɔnɔmetata
nɔnɔmetata-safui
icon-dɔwo wɔwɔ
icon-filter ƒe dzesiwo
icon-agbalẽkotoku
dzesi-si le screen bliboa dzi

Glyphicons ƒe ŋkɔ si wogblɔna

Glyphicons Halflings menɔa anyi femaxee zi geɖe o, gake ɖoɖo aɖe si le Bootstrap kple Glyphicons wɔlawo dome na esia te ŋu dzɔna femaxee na wò abe dɔwɔlawo ene. Abe akpedada ene la, míele biabiam tso asiwò be nàde kadodo si nàtia be yeatrɔ ayi Glyphicons la eme ɣesiaɣi si wòanya wɔ.

Ale si woazãe

Nɔnɔmetatawo katã hiã <i>dzesidenu si me klass tɔxɛ aɖe le, si wotsɔ do ŋgɔ na icon-. Be nàzãe la, da kɔda si gbɔna la ɖe afi sia afi kloe:

<i klass = "dzesi-didi" ></i>

Atsyãwo hã li na nɔnɔmetata siwo wogbugbɔ trɔ (yevu), siwo wowɔ be woadzra ɖo kple klass ɖeka kpee. Míazi klass sia dzi koŋ le hover kple active states dzi na nav kple dropdown kadodowo.

<i class = "dzesi-di dzesi-ɣi" ></i>

Tawo yi dzi!Ne èle nuŋɔŋlɔ ƒe ka siwo le axadzi zãm, abe alesi wòle le abɔta alo nav kadodowo me ene la, kpɔ egbɔ be yegblẽ teƒe aɖe ɖe <i>dzesi la megbe be dometsotso nyuitɔ nanɔ eme.

Nɔnɔmetatawo ƒe kpɔɖeŋuwo

Zã wo le abɔtawo, abɔtiwo ƒe ƒuƒoƒo me na dɔwɔnu ƒe akpa aɖe, mɔfiamewo, alo agbalẽvi siwo woŋlɔ do ŋgɔ ƒe nuŋɔŋlɔwo me.

Abɔtawo ƒe ƒuƒoƒo

Abɔta ƒe ƒuƒoƒo le abɔta ƒe dɔwɔnu ƒe akpa aɖe me

<div klass = "btn-dɔwɔnu ƒe ƒuƒoƒo" > 
  <div klass = "btn-ƒuƒoƒo" > 
    <a klass = "btn" href = "#" ><i klass = "dzesi-ɖo-miame" ></i></a>   
    <a klass = "btn" href = "#" ><i klass = "dzesi-ɖoɖo-titina" ></i></a>   
    <a klass = "btn" href = "#" ><i klass = "dzesi-ɖoɖo-ɖusime" ></i></a>   
    <a klass = "btn" href = "#" ><i klass = "dzesi-ɖoɖo-ɖo-dzɔdzɔe" ></i></a>   
  </div> ƒe nyawo
</div> ƒe nyawo

Dropdown le button ƒuƒoƒo aɖe me

Zãla

<div klass = "btn-ƒuƒoƒo" > 
  <a class = "btn btn-primary" href = "#" ><i klass = "dzesi-zãla ƒe dzesi-ɣi" ></i> Zãla </a>   
  <a klass = "btn btn-gbãtɔ ƒe ʋuʋudedi-trɔtrɔ" data-toggle = "ɖiɖiɖeme" href = "#" ><span klass = "caret" ></span></a>    
  <ul class = "nusiwo le tsia dzi" > 
    <li><a href = "#" ><i klass = "dzesi-pencil" ></i> Trɔ asi le </a></li> ŋu  
    <li><a href = "#" ><i klass = "dzesi-gbeɖuɖɔ" ></i> Tsɔ </a></li> ɖa  
    <li><a href = "#" ><i klass = "dzesi-mɔxexe ɖe-nutome" ></i> Mɔxexe ɖe enu </a></li>  
    <li klass = "mamã" </li> 
    <li><a href = "#" ><i klass = "nye" ></i> Wɔ dɔdzikpɔla </a></li>  
  </ul> ƒe nyawo
</div> ƒe nyawo

Abɔta ƒe lolomewo

Ɣletivi Ɣletivi Ɣletivi

<a klass = "btn btn-lolo" href = "#" ><i klass = "dzesi-ɣletivi" ></i> Ɣletivi </a>   
<a klass = "btn btn-sue" href = "#" ><i klass = "dzesi-ɣletivi" ></i> Ɣletivi </a>   
<a klass = "btn btn-mini" href = "#" ><i klass = "dzesi-ɣletivi" ></i> Ɣletivi </a>

Mɔfiamewo ƒe Mɔzɔzɔ

<ul klass = "nav nav-ŋlɔɖi" > 
  <li klass = "dɔwɔwɔ" ><a href = "#" ><i klass = "dzesi-aƒe dzesi-ɣi" </i> Aƒe </a></li>   
  <li><a href = "#" ><i klass = "dzesi-gbalẽ" ></i> Agbalẽdzraɖoƒe </a></li>  
  <li><a href = "#" ><i klass = "dzesi-pencil" ></i> Dɔwɔwɔwo </a></li>  
  <li><a href = "#" ><i klass = "nye" ></i> Nu vovovowo </a> </li>  
</ul> ƒe nyawo

Kpeɖodzinyawo ƒe agblewo

<div class = "dziɖuɖu-ƒuƒoƒo" > 
  <label class = "dziɖuɖu-dzesi" na = "inputIcon" > Email adrɛs </label>  
  <div klass = "dziɖuɖuwo" > 
    <div klass = "nuŋɔŋlɔ-do ŋgɔ" > 
      <span klass = "kpeɖeŋutɔ" ><i klass = "dzesi-kotoku" ></i></span>  
      <nyatakaka ƒe hatsotso = "span2" id = "nyatakakaIcon" ƒomevi = "nuŋɔŋlɔ" >   
    </div> ƒe nyawo
  </div> ƒe nyawo
</div> ƒe nyawo

Agbalẽtata ƒe nuŋɔŋlɔ

Tanyawo

h1. Tanya 1 lia

h2. Tanya 2 lia

h3. Tanya 3 lia

h4. Tanya 4 lia

h5. Tanya 5 lia

h6. Tanya 6 lia

Ŋutilã ƒe kɔpi

Kplɔ ŋutilã ƒe kɔpi

Wotue kple Less

Gbetete ɖe nu dzi

<small>

Kalẽtᴐe

Ŋɔŋlɔdzesi siwo woŋlɔ kple asi

Alignment ƒe klasswo

Tete ɖe klasswo dzi

Kpuienyawo

<abbr>

<abbr class="initialism">

Adrɛswo

<address>

Blockquotes ƒe nyawo

Blockquote si woɖo ɖi

Blockquote ƒe tiatiawɔblɔɖewo

Ŋkɔ na dzɔtsoƒe aɖe

Ðeɖefianu bubuwo ɖe wo nɔewo ŋu

Ŋlɔ ŋkɔwo

Womewɔ ɖoɖo ɖe eŋu o

Wobia tso esi

Womewɔ atsyã aɖeke o

Le fli me

Nuɖᴐɖᴐ

Numeɖeɖe si le tsia dzi

Sedede

Le fli me

Gbãtɔ ƒe block

Kplɔ̃wo

Atsyã siwo woɖo ɖi

Klass siwo woate ŋu awɔ le wo ɖokui si

.table-striped

.table-bordered

.table-hover

.table-condensed

Fli ƒe klass siwo woate ŋu atia

Wodo alɔ kplɔ̃dzidzesiwo

Kpekpeɖeŋugbalẽviwo

Atsyã siwo woɖo ɖi

Ðoɖo siwo woate ŋu awɔ le wo ɖokui si

Didi ƒe agbalẽvi

Agbalẽvi si le fli me

Nɔnɔme si le tsia dzi

Wodo alɔ agbalẽvi dzi kpɔkpɔ

Nusiwo wotsɔ de eme

Nuŋɔŋlɔ ƒe teƒe

Dzesiɖakawo kple radiowo

Default (woƒo ƒu ɖe wo nɔewo dzi) .

Aɖaka siwo le fli me

Tiae

Agbalẽvi dzi kpɔkpɔwo keke ɖe enu

Nusiwo wotsɔ de eme do ŋgɔ kple esiwo wotsɔ kpe ɖe eŋu

Tiatia siwo woɖo ɖi

Ne wotsɔ wo ƒo ƒui

Abɔtawo ɖe nuŋɔŋlɔ teƒe

Abɔta siwo le fli dzi

Ƒuƒoƒo siwo woɖe ɖe akpa vovovowo me

Didi ƒe agbalẽvi

Kpɔ lolome dzi ɖuɖu

Block level ƒe nyawo tsɔtsɔ de eme

Ƒometɔ ƒe lolome ƒe lolome

Grid ƒe lolome ƒe lolome

Nusiwo wotsɔ de eme siwo womate ŋu atrɔ asi le o

Wɔ nuwɔnawo

Kpekpeɖeŋu nuŋɔŋlɔ

Kpekpeɖeŋunana le fli me

Xɔ kpekpeɖeŋu

Form dziɖuɖu ƒe nɔnɔmewo

Nyawo ƒe susu tsɔtsɔ ɖe nu ŋu

Nusiwo wotsɔ de eme siwo mesɔ o

Nuwɔametɔwo ƒe nyawo tsɔtsɔ de eme

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`