Gɔmeɖoanyi CSS

HTML ƒe akpa vevi siwo wowɔ ɖe atsyã nu eye wodo wo ɖe ŋgɔ kple klass siwo woate ŋu akeke ɖe enu.

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.

  1. <p class = "text-left" > Nuŋɔŋlɔ si woɖo ɖe ɖoɖo nu le miame. </p> ƒe nyawo
  2. <p class = "text-center" > Nuŋɔŋlɔ si woɖo ɖe titina . </p> ƒe nyawo
  3. <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.

  1. <p klass = "mued" > Fusce dapibus, tellus ac fiƒodenyawo ƒe ƒuƒoƒo, tortor mauris nibh. </p> ƒe nyawo
  2. <p class = "nuŋɔŋlɔ-nuxlɔ̃ame" > Etiam porta sem malesuada magna mollis euismod. </p> ƒe nyawo
  3. <p klass = "nuŋɔŋlɔ-vodada" > Donec ullamcorper nulla si menye metus auctor fringilla o. </p> ƒe nyawo
  4. <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
  5. <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]
  1. <adrɛs>
  2. <strong> Twitter, Inc. </strong><br>
  3. 795 Folsom Ave, Xɔdɔme 600 <br>
  4. San Francisco, CA 94107 <br>
  5. <abbr ƒe tanya = "Telefon" > P: </abbr> (123) 456-7890
  6. </adrɛs>
  7.  
  8. <adrɛs>
  9. <strong> Ŋkɔ Blibo </strong><br>
  10. <a href = "mailto:#" > gbãtɔ.mlɔetɔ@kpɔɖeŋu.com </a>
  11. </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.

  1. <blɔɖe ƒe nyagbɔgblɔ>
  2. <p> Lorem ipsum dolor bɔbɔ nɔ anyi amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante. </p> ƒe nyawo
  3. </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
  1. <blɔɖe ƒe nyagbɔgblɔ>
  2. <p> Lorem ipsum dolor bɔbɔ nɔ anyi amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat a ante. </p> ƒe nyawo
  3. <small> Ame aɖe si xɔ ŋkɔ <cite title = "Dzɔtsoƒe ƒe Tanya" > Dzɔtsoƒe ƒe Tanya </cite></small>
  4. </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
  1. <blockquote klass = "he-ɖusime" >
  2. ...
  3. </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ɔ
  1. <ul> ƒe nyawo
  2. <li> ... </li> ƒe nyawo
  3. </ul> ƒe nyawo

Wobia tso esi

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

  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ɔ
  1. <ol> ƒe nyawo
  2. <li> ... </li> ƒe nyawo
  3. </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ɔ
  1. <ul klass = "si womewɔ atsyã na o" >
  2. <li> ... </li> ƒe nyawo
  3. </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
  1. <ul klass = "le fli me" >
  2. <li> ... </li> ƒe nyawo
  3. </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.
  1. <dl> ƒe nyawo
  2. <dt> ... </dt> ƒe nyawo
  3. <dd> ... </dd> ƒe nyawo
  4. </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.
  1. <dl klass = "dl-dzidzenu" >
  2. <dt> ... </dt> ƒe nyawo
  3. <dd> ... </dd> ƒe nyawo
  4. </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.
  1. 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>
  1. <do ŋgɔ>
  2. <p>Nuŋɔŋlɔ ƒe kpɔɖeŋu le afisia...</p>
  3. </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
  1. <kplɔ̃ ƒe hatsotso = "kplɔ̃" >
  2. ...
  3. </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
  1. <kplɔ̃ ƒe klass = "kplɔ̃ kplɔ̃-dzesi" >
  2. ...
  3. </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
Marko Otto ƒe nyawo @getbootstrap dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry Xevi la @twitter dzi
  1. <table class = "kplɔ̃ si woɖo ɖe kplɔ̃ dzi" >
  2. ...
  3. </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
  1. <kplɔ̃ ƒe hatsotso = "kplɔ̃ kplɔ̃-hover" >
  2. ...
  3. </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
  1. <table class = "kplɔ̃ kplɔ̃-kple" >
  2. ...
  3. </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
  1. ...
  2. < tr class = "dzidzedzekpɔkpɔ" >
  3. <td> 1 < /td> ƒe ƒuƒoƒo
  4. <td>TB - Ɣleti sia ɣleti</ td >
  5. <td> 01 / 04 / 2012 < /td>
  6. <td>Woda asi ɖe edzi</ td >
  7. </ tr > ƒe ƒuƒoƒo
  8. ...

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
  1. <kplɔ̃>
  2. <nyametsotso> ... </nyatakaka>
  3. <ta>
  4. <tr> ƒe nyawo
  5. <th> ... </th> ƒe nyawo
  6. <th> ... </th> ƒe nyawo
  7. </tr> ƒe nyawo
  8. </thead> ƒe nyawo
  9. <tbody> ƒe ƒuƒoƒo
  10. <tr> ƒe nyawo
  11. <td> ... </td> ƒe nyawo
  12. <td> ... </td> ƒe nyawo
  13. </tr> ƒe nyawo
  14. </tbody> ƒe ƒuƒoƒo
  15. </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.

Kalẽtɔ Kpɔɖeŋu block-level kpekpeɖeŋu nuŋɔŋlɔ le afisia.
  1. <nɔnɔme>
  2. <anyigba ƒe ƒuƒoƒo>
  3. <xotutu> Xotutu </xotutu>
  4. <label> Dzesideŋkɔ < /label>
  5. <input type = "text" placeholder = "Ŋlɔ nane..." >
  6. <span class = "help-block" > Kpɔɖeŋu block-level kpekpeɖeŋu nuŋɔŋlɔ le afisia. </span> ƒe nyawo
  7. <label class = "dzesideɖaka" >
  8. <input type = "checkbox" > Kpɔm ɖa
  9. </label> ƒe dzesi
  10. <button type = "ɖo ɖa" class = "btn" > Ðo ɖa </button>
  11. </fieldset> ƒe ƒuƒoƒo
  12. </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.

  1. <form class = "agbalẽvi-didi" >
  2. <input type = "text" class = "input-medium didi-biabia" >
  3. <button type = "ɖo ɖa" klass = "btn" > Di </button>
  4. </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.

  1. <form class = "form-le fli me" >
  2. <nyatakaka ƒomevi = "nuŋɔŋlɔ" klass = "nyatakaka-sue" teƒeɖoɖo = "Email" >
  3. < nyagbe ƒomevi = "nyagbe" klass = "nyagbe -sue" teƒeɖoɖo = "Nyagbe" >
  4. <label class = "dzesideɖaka" >
  5. <input type = "checkbox" > Ðo ŋku dzinye
  6. </label> ƒe dzesi
  7. <button type = "ɖo ɖa" klass = "btn" > De asi eme </button>
  8. </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
  1. <nɔnɔme ƒe hatsotso = "nɔnɔme-nɔnɔme" >
  2. <div class = "dziɖuɖu-ƒuƒoƒo" >
  3. <label class = "dziɖuɖu-dzesi" na = "inputEmail" > Email </label>
  4. <div klass = "dziɖuɖuwo" >
  5. <nuŋɔŋlɔ ƒe ƒomevi = "nuŋɔŋlɔ" id = "nyaŋɔŋlɔEmail" teƒeɖoɖo = "Email" >
  6. </div> ƒe nyawo
  7. </div> ƒe nyawo
  8. <div class = "dziɖuɖu-ƒuƒoƒo" >
  9. <label class = "dziɖuɖu-dzesi" na = "inputPassword" > Nyagbe </label>
  10. <div klass = "dziɖuɖuwo" >
  11. < nyagbe ƒomevi = "nyagbe" id = "nyagbenya" teƒeɖoɖo = "Nyagbe" >
  12. </div> ƒe nyawo
  13. </div> ƒe nyawo
  14. <div class = "dziɖuɖu-ƒuƒoƒo" >
  15. <div klass = "dziɖuɖuwo" >
  16. <label class = "dzesideɖaka" >
  17. <input type = "checkbox" > Ðo ŋku dzinye
  18. </label> ƒe dzesi
  19. <button type = "ɖo ɖa" klass = "btn" > De asi eme </button>
  20. </div> ƒe nyawo
  21. </div> ƒe nyawo
  22. </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.

  1. <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ã.

  1. <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) .


  1. <label class = "dzesideɖaka" >
  2. <input type = "dzesideɖaka" ƒe asixɔxɔ = "" >
  3. Tiatia gbãtɔe nye esia kple ema—kpɔ egbɔ be yeŋlɔ nusita wònyo ŋutɔ la ɖe eme
  4. </label> ƒe dzesi
  5.  
  6. <label ƒe hatsotso = "radio" >
  7. <input type = "radio" ŋkɔ = "tiatiaRadiowo" id = "tiatiaRadiowo1" asixɔxɔ = "tiatia1" wokpɔ >
  8. Tiatia gbãtɔe nye esia kple ema—kpɔ egbɔ be yeŋlɔ nusita wònyo ŋutɔ la ɖe eme
  9. </label> ƒe dzesi
  10. <label ƒe hatsotso = "radio" >
  11. <nyatakaka ƒomevi = "radio" ŋkɔ = "tiatiawɔblɔɖeRadiowo" id = "tiatiawɔblɔɖeRadiowo2" asixɔxɔ = "tiatia2" >
  12. Tiatia evelia ateŋu anye nu bubu eye ne ètiae la, àɖe tiatia gbãtɔ ɖa
  13. </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.

  1. <label class = "dzesiɖaka le fli me" >
  2. <input type = "checkbox" id = "inlineDzesiɖaka1" asixɔxɔ = "tiatia1" > 1
  3. </label> ƒe dzesi
  4. <label class = "dzesiɖaka le fli me" >
  5. <input type = "checkbox" id = "inlineDzesiɖaka2" asixɔxɔ = "tiatia2" > 2
  6. </label> ƒe dzesi
  7. <label class = "dzesiɖaka le fli me" >
  8. <input type = "checkbox" id = "inlineDzesiɖaka3" asixɔxɔ = "tiatia3" > 3
  9. </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.


  1. <tia>
  2. <tiatiawɔblɔɖe> 1 </tiatiawɔblɔɖe>
  3. <tiatiawɔblɔɖe> 2 </tiatiawɔblɔɖe>
  4. <tiatiawɔblɔɖe> 3 </tiatiawɔblɔɖe>
  5. <tiatiawɔblɔɖe> 4 </tiatiawɔblɔɖe>
  6. <tiatiawɔblɔɖe> 5 </tiatiawɔblɔɖe>
  7. </tia>
  8.  
  9. <tia geɖe = "geɖe geɖe" >
  10. <tiatiawɔblɔɖe> 1 </tiatiawɔblɔɖe>
  11. <tiatiawɔblɔɖe> 2 </tiatiawɔblɔɖe>
  12. <tiatiawɔblɔɖe> 3 </tiatiawɔblɔɖe>
  13. <tiatiawɔblɔɖe> 4 </tiatiawɔblɔɖe>
  14. <tiatiawɔblɔɖe> 5 </tiatiawɔblɔɖe>
  15. </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.

@ .

.00 ƒe xexlẽme
  1. <div klass = "nuŋɔŋlɔ-do ŋgɔ" >
  2. <span klass = "kpeɖeŋutɔ" > @ </span>
  3. <input class = "span2" id = "prependedInput" ƒomevi = "nuŋɔŋlɔ" teƒe = "Zãla ƒe ŋkɔ" >
  4. </div> ƒe nyawo
  5. <div klass = "nya-tsɔtsɔ kpe ɖe eŋu" >
  6. <nyatakaka ƒe hatsotso = "span2" id = "nyatakaka si wotsɔ kpe ɖe eŋu" ƒomevi = "nuŋɔŋlɔ" >
  7. <span klass = "kpeɖeŋutɔ" > .00 </span>
  8. </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.

$ .00 ƒe xexlẽme
  1. <div class = "nuŋɔŋlɔ-do ŋgɔ na nyawo tsɔtsɔ de eme-tsɔ kpe ɖe eŋu" >
  2. <span klass = "kpeɖeŋutɔ" > $ </span>
  3. <input class = "span2" id = "tsɔ kpe ɖe eŋuPrependedInput" ƒomevi = "nuŋɔŋlɔ" >
  4. <span klass = "kpeɖeŋutɔ" > .00 </span>
  5. </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.

  1. <div klass = "nya-tsɔtsɔ kpe ɖe eŋu" >
  2. <nyatakaka ƒe hatsotso = "span2" id = "nyatakaka ƒe Abɔta si wotsɔ kpe ɖe eŋu" ƒomevi = "nuŋɔŋlɔ" >
  3. <bɔt ƒe hatsotso = "btn" ƒomevi = "bɔt" > Yi! </button> ƒe dzesi
  4. </div> ƒe nyawo
  1. <div klass = "nya-tsɔtsɔ kpe ɖe eŋu" >
  2. <nyatakaka ƒe hatsotso = "span2" id = "nyatakakawo ƒe Abɔta siwo wotsɔ kpe ɖe eŋu" ƒomevi = "nuŋɔŋlɔ" >
  3. <bɔt ƒe hatsotso = "btn" ƒomevi = "bɔt" > Di </bɔt>
  4. <button class = "btn" type = "button" > Tiatiawɔnuwo </button>
  5. </div> ƒe nyawo

Abɔta siwo le fli dzi

  1. <div klass = "nya-tsɔtsɔ kpe ɖe eŋu" >
  2. <input class = "span2" id = "tsɔ kpe ɖeDropdownButton ŋu" ƒomevi = "nuŋɔŋlɔ" >
  3. <div klass = "btn-ƒuƒoƒo" >
  4. <button class = "btn ʋuʋudedi-trɔtrɔ" data-trɔtrɔ = "ɖiɖiɖeme" >
  5. Nuwɔwɔ
  6. <span ƒe hatsotso = "caret" ></span>
  7. </button> ƒe dzesi
  8. <ul class = "nusiwo le tsia dzi" >
  9. ...
  10. </ul> ƒe nyawo
  11. </div> ƒe nyawo
  12. </div> ƒe nyawo
  1. <div klass = "nuŋɔŋlɔ-do ŋgɔ" >
  2. <div klass = "btn-ƒuƒoƒo" >
  3. <button class = "btn ʋuʋudedi-trɔtrɔ" data-trɔtrɔ = "ɖiɖiɖeme" >
  4. Nuwɔwɔ
  5. <span ƒe hatsotso = "caret" ></span>
  6. </button> ƒe dzesi
  7. <ul class = "nusiwo le tsia dzi" >
  8. ...
  9. </ul> ƒe nyawo
  10. </div> ƒe nyawo
  11. <input class = "span2" id = "do ŋgɔ naDropdownButton" ƒomevi = "nuŋɔŋlɔ" >
  12. </div> ƒe nyawo
  1. <div class = "nuŋɔŋlɔ-do ŋgɔ na nyawo tsɔtsɔ de eme-tsɔ kpe ɖe eŋu" >
  2. <div klass = "btn-ƒuƒoƒo" >
  3. <button class = "btn ʋuʋudedi-trɔtrɔ" data-trɔtrɔ = "ɖiɖiɖeme" >
  4. Nuwɔwɔ
  5. <span ƒe hatsotso = "caret" ></span>
  6. </button> ƒe dzesi
  7. <ul class = "nusiwo le tsia dzi" >
  8. ...
  9. </ul> ƒe nyawo
  10. </div> ƒe nyawo
  11. <input class = "span2" id = "tsɔ kpe ɖe eŋuPrependedDropdownButton" ƒomevi = "nuŋɔŋlɔ" >
  12. <div klass = "btn-ƒuƒoƒo" >
  13. <button class = "btn ʋuʋudedi-trɔtrɔ" data-trɔtrɔ = "ɖiɖiɖeme" >
  14. Nuwɔwɔ
  15. <span ƒe hatsotso = "caret" ></span>
  16. </button> ƒe dzesi
  17. <ul class = "nusiwo le tsia dzi" >
  18. ...
  19. </ul> ƒe nyawo
  20. </div> ƒe nyawo
  21. </div> ƒe nyawo

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

  1. <nɔnɔme>
  2. <div klass = "nuŋɔŋlɔ-do ŋgɔ" >
  3. <div klass = "btn-ƒuƒoƒo" > ... </div>
  4. <input type = "nuŋɔŋlɔ" >
  5. </div> ƒe nyawo
  6. <div klass = "nya-tsɔtsɔ kpe ɖe eŋu" >
  7. <input type = "nuŋɔŋlɔ" >
  8. <div klass = "btn-ƒuƒoƒo" > ... </div>
  9. </div> ƒe nyawo
  10. </form> ƒe nɔnɔme

Didi ƒe agbalẽvi

  1. <form class = "agbalẽvi-didi" >
  2. <div klass = "nya-tsɔtsɔ kpe ɖe eŋu" >
  3. <input type = "text" class = "span2 didi-biabia" >
  4. <button type = "ɖo ɖa" klass = "btn" > Di </button>
  5. </div> ƒe nyawo
  6. <div klass = "nuŋɔŋlɔ-do ŋgɔ" >
  7. <button type = "ɖo ɖa" klass = "btn" > Di </button>
  8. <input type = "text" class = "span2 didi-biabia" >
  9. </div> ƒe nyawo
  10. </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.

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

Ƒometɔ ƒe lolome ƒe lolome

  1. <input class = "input-mini" ƒomevi = "nuŋɔŋlɔ" teƒe = ".input-mini" >
  2. <input class = "input-sue" ƒomevi = "nuŋɔŋlɔ" teƒe = " .input -sue" >
  3. <input class = "input-medium" ƒomevi = "nuŋɔŋlɔ" teƒeɖoɖo = ".input-medium" >
  4. <input class = "input-lolo" type = "nuŋɔŋlɔ" teƒeɖoɖo = ".input-lolo" >
  5. <input class = "input-xlarge" ƒomevi = "nuŋɔŋlɔ" teƒe = ".input-xlarge" >
  6. <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

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

  1. <input class = "span1" ƒomevi = "nuŋɔŋlɔ" teƒe = ".span1" >
  2. <input class = "span2" ƒomevi = "nuŋɔŋlɔ" teƒe = ".span2" >
  3. <input class = "span3" ƒomevi = "nuŋɔŋlɔ" teƒe = ".span3" >
  4. <tia klass = "span1" >
  5. ...
  6. </tia>
  7. <tia klass = "span2" >
  8. ...
  9. </tia>
  10. <tia klass = "span3" >
  11. ...
  12. </tia>

Ne èdi grid ƒe nyawo tsɔtsɔ de fli ɖeka me geɖe la, .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.

  1. <div klass = "dziɖuɖuwo" >
  2. <input class = "span5" ƒomevi = "nuŋɔŋlɔ" teƒe = ".span5" >
  3. </div> ƒe nyawo
  4. <div class = "dziɖuɖuwo-fli" >
  5. <input class = "span4" ƒomevi = "nuŋɔŋlɔ" teƒe = ".span4" >
  6. <input class = "span1" ƒomevi = "nuŋɔŋlɔ" teƒe = ".span1" >
  7. </div> ƒe nyawo
  8. ...

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.

Ame aɖewo dea asixɔxɔ le afisia ŋu
  1. <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.

  1. <div class = "nɔnɔme-nuwɔnawo" >
  2. <button type = "submit" class = "btn btn-primary" > Dzra tɔtrɔwo ɖo </button>
  3. <bɔt ƒomevi = "bɔt" klass = "btn" > Te fli ɖe eme </button>
  4. </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

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

Xɔ kpekpeɖeŋu

Kpekpeɖeŋu nuŋɔŋlɔ ƒe ƒuƒoƒo didi aɖe si gbã ɖe fli yeye dzi eye ate ŋu akeke ta wu fli ɖeka.
  1. <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.

  1. <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.

  1. <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.

  1. <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 .

Ðewohĩ nane gblẽ
Taflatse ɖɔ vodadaa ɖo
Woxɔ zãla ƒe ŋkɔ
Woohoo!
  1. <div class = "dziɖuɖu-ƒuƒoƒo ƒe nuxlɔ̃ame" >
  2. <label class = "control-label" for = "inputWarning" > De nuxlɔ̃ame kple nuxlɔ̃ame </label>
  3. <div klass = "dziɖuɖuwo" >
  4. <nyatakaka ƒe ƒomevi = "nuŋɔŋlɔ" id = "nyatakaka ƒe Nuxlɔ̃ame" >
  5. <span class = "help-inline" > Nane ateŋu agblẽ </span>
  6. </div> ƒe nyawo
  7. </div> ƒe nyawo
  8.  
  9. <div class = "dziɖuɖu-ƒuƒoƒo ƒe vodada" >
  10. <label class = "dziɖuɖu-dzesi" na = "inputError" > De eme kple vodada </label>
  11. <div klass = "dziɖuɖuwo" >
  12. <nyatakaka ƒomevi = "nuŋɔŋlɔ" id = "nyatakaka ƒe Vodada" >
  13. <span class = "help-inline" > Taflatse ɖɔ vodadaa ɖo </span>
  14. </div> ƒe nyawo
  15. </div> ƒe nyawo
  16.  
  17. <div class = "dziɖuɖu-ƒuƒoƒo ŋuti nyatakaka" >
  18. <label class = "dziɖuɖu-dzesi" na = "inputInfo" > De eme kple nyatakaka </label>
  19. <div klass = "dziɖuɖuwo" >
  20. <nyatakaka ƒomevi = "nuŋɔŋlɔ" id = "nyatakakaNyatakaka" >
  21. <span class = "help-inline" > Woxɔ zãla ƒe ŋkɔ xoxo </span>
  22. </div> ƒe nyawo
  23. </div> ƒe nyawo
  24.  
  25. <div class = "dziɖuɖu-ƒuƒoƒo ƒe dzidzedzekpɔkpɔ" >
  26. <label class = "dziɖuɖu-dzesi" na = "inputSuccess" > De eme kple dzidzedzekpɔkpɔ </label>
  27. <div klass = "dziɖuɖuwo" >
  28. <nyatakaka ƒomevi = "nuŋɔŋlɔ" id = "nyatakaka ƒe Dzidzedzekpɔkpɔ" >
  29. <span klass = "kpekpeɖeŋu-le fli me" > Woohoo! </span> ƒe nyawo
  30. </div> ƒe nyawo
  31. </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.

  1. <p> ƒe nyawo
  2. <button class = "btn btn-lolo btn-gbãtɔ" type = "button" > Abɔta gã </button>
  3. <bɔt ƒe hatsotso = "btn btn-lolo" ƒomevi = "bɔt" > Abɔta gã </bɔt>
  4. </p> ƒe nyawo
  5. <p> ƒe nyawo
  6. <button class = "btn btn-primary" ƒomevi = "bɔt" > Abɔta gbãtɔ </button>
  7. <button class = "btn" type = "button" > Abɔta si woɖo ɖi </button>
  8. </p> ƒe nyawo
  9. <p> ƒe nyawo
  10. <button class = "btn btn-sue btn-gbãtɔ" type = "button" > Abɔta sue </button>
  11. <button class = "btn btn-sue" ƒomevi = "button" > Abɔta sue </button>
  12. </p> ƒe nyawo
  13. <p> ƒe nyawo
  14. <bɔt ƒe hatsotso = "btn btn-mini btn-gbãtɔ" ƒomevi = "bɔt" > Mini abɔta </bɔt>
  15. <bɔt ƒe hatsotso = "btn btn-mini" ƒomevi = "bɔt" > Mini abɔta </bɔt>
  16. </p> ƒe nyawo

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

  1. <bɔt ƒe hatsotso = "btn btn-lolo btn-blɔ btn-gbãtɔ" ƒomevi = "bɔt" > Mɔxexe ƒe dzidzenu ƒe abɔta </button>
  2. <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

  1. <a href = "#" class = "btn btn-large btn-gbãtɔ ƒe nuwɔametɔ" > Gbãtɔ ƒe kadodo </a>
  2. <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.

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

Klas ɖeka, tag geɖe

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

Kadodo
  1. <a klass = "btn" href = "" > Kadodo </a>
  2. <button class = "btn" type = "ɖo ɖa" > Abɔta </bɔt>
  3. <input class = "btn" type = "button" ƒe asixɔxɔ = "Nya si woŋlɔ ɖe eme" >
  4. <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.

140x140 ƒe didime 140x140 ƒe didime 140x140 ƒe didime
  1. <img src = "..." klass = "img-goglo" >
  2. <img src = "..." klass = "img-ƒomevi" >
  3. <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:

  1. <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.

  1. <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
  1. <div klass = "btn-dɔwɔnu ƒe ƒuƒoƒo" >
  2. <div klass = "btn-ƒuƒoƒo" >
  3. <a klass = "btn" href = "#" ><i klass = "dzesi-ɖo-miame" ></i></a>
  4. <a klass = "btn" href = "#" ><i klass = "dzesi-ɖoɖo-titina" ></i></a>
  5. <a klass = "btn" href = "#" ><i klass = "dzesi-ɖoɖo-ɖusime" ></i></a>
  6. <a klass = "btn" href = "#" ><i klass = "dzesi-ɖoɖo-ɖo-dzɔdzɔe" ></i></a>
  7. </div> ƒe nyawo
  8. </div> ƒe nyawo
Dropdown le button ƒuƒoƒo aɖe me
  1. <div klass = "btn-ƒuƒoƒo" >
  2. <a class = "btn btn-primary" href = "#" ><i klass = "dzesi-zãla ƒe dzesi-ɣi" ></i> Zãla </a>
  3. <a klass = "btn btn-gbãtɔ ƒe ʋuʋudedi-trɔtrɔ" data-toggle = "ɖiɖiɖeme" href = "#" ><span klass = "caret" ></span></a>
  4. <ul class = "nusiwo le tsia dzi" >
  5. <li><a href = "#" ><i klass = "dzesi-pencil" ></i> Trɔ asi le </a></li> ŋu
  6. <li><a href = "#" ><i klass = "dzesi-gbeɖuɖɔ" ></i> Tsɔ </a></li> ɖa
  7. <li><a href = "#" ><i klass = "dzesi-mɔxexe ɖe-nutome" ></i> Mɔxexe ɖe enu </a></li>
  8. <li klass = "mamã" </li>
  9. <li><a href = "#" ><i klass = "nye" ></i> Wɔ dɔdzikpɔla </a></li>
  10. </ul> ƒe nyawo
  11. </div> ƒe nyawo
Abɔta ƒe lolomewo
  1. <a klass = "btn btn-lolo" href = "#" ><i klass = "dzesi-ɣletivi" ></i> Ɣletivi </a>
  2. <a klass = "btn btn-sue" href = "#" ><i klass = "dzesi-ɣletivi" ></i> Ɣletivi </a>
  3. <a klass = "btn btn-mini" href = "#" ><i klass = "dzesi-ɣletivi" ></i> Ɣletivi </a>

Mɔfiamewo ƒe Mɔzɔzɔ

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

Kpeɖodzinyawo ƒe agblewo

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