Gɔmeɖoanyi CSS

Le scaffolding la tame la, wowɔa HTML ƒe akpa veviwo ƒe atsyã eye wodoa wo ɖe ŋgɔ kple klass siwo woate ŋu akeke ɖe enu be woana dzedzeme kple seselelãme yeye si mewɔa tɔtrɔ o.

Tanyawo & ŋutilã ƒe kɔpi

Agbalẽtata ƒe dzidzenu

Wotu nuŋɔŋlɔ ƒe fli bliboa ɖe Less tɔtrɔ eve dzi le míaƒe variables.less faɛl me: @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 aɖewo, tsɔ wɔa míaƒe ƒomeviwo katã ƒe margins, paddings, kple line-heights kple bubuwo.

Kpɔɖeŋu ŋutilã me nuŋɔŋlɔ

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 ƒe ƒuƒoƒo.

Kplɔ ŋutilã ƒe kɔpi

Na memama 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.

h1. Tanya 1 lia

h2. Tanya 2 lia

h3. Tanya 3 lia

h4. Tanya 4 lia

h5. Tanya 5 lia
h6. Tanya 6 lia

Tete ɖe nya dzi, adrɛs, kple kpukpui

Na Zãzã Le tiatia me
<strong> Le gbetete ɖe nuŋɔŋlɔ ƒe akpa aɖe dzi kple vevie Ɖeke o
<em> Le gbetete ɖe nuŋɔŋlɔ ƒe akpa aɖe dzi kple nuteɖeamedzi ta Ɖeke o
<abbr> Xatsa kpukpuiwo kple kpukpuiwo be wòaɖe gɔmeɖeɖe si keke ta la afia le hover dzi

De titlenɔnɔme si nàtia na nuŋɔŋlɔ si keke ta la eme

.initialismklass na ŋɔŋlɔdzesi gãwo ƒe kpukpuiwo.
<address> Ne èdi tɔgbui si te ɖe eŋu alo dɔ bliboa ƒe kadodo ŋuti nyatakakawo Dzra ɖoɖowɔwɔ ɖo to fliawo katã nuwuwu kple<br>

Tete ɖe ame dzi zazã

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: Miate ŋu azãe faa <b>kple <i>le HTML5 me, gake wo zazã trɔ vie. <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ŋ.

Kpɔɖeŋu adrɛswo

Alesi <address>woate ŋu azã tag la ƒe kpɔɖeŋu evee nye esi:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Ŋkɔ
Bliboa [email protected]

Kpɔɖeŋu kpukpuiwo

Kpuie siwo si titlenɔnɔme le la ƒe ete ƒe liƒo si me dzesiwo le keklẽm le eye kpekpeɖeŋunufianu le hover me. Esia naa ezãlawo ɖenɛ fiana be woaɖe nane afia le hover dzi.

Tsɔ initialismklass la kpe ɖe kpukpui aɖe ŋu be nàdzi agbalẽtata ƒe ɖekawɔwɔ ɖe edzi to nuŋɔŋlɔ ƒe lolome si le sue vie nanae me.

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

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

Blockquotes ƒe nyawo

Na Zãzã Le tiatia me
<blockquote> Block-level element na nyawo yɔyɔ tso teƒe bubu

Tsɔ citenɔnɔme kpe ɖe URL dzɔtsoƒe ŋu

.pull-leftkple .pull-rightklasswo na tiatia siwo le tsia dzi
<small> Nusi woateŋu atsɔ akpe ɖe nyayɔyɔ si dze ŋgɔ zãla ŋu, zi geɖe la, agbalẽŋlɔla si si dɔa ƒe tanya le Da la <cite>ƒo xlã tanya alo ŋkɔ si me wòtso

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

De <small>akpa aɖe si nàtia la eme be nàyɔ wò dzɔtsoƒe eye àxɔ em dash &mdash;do ŋgɔ nɛ hena atsyãwɔwɔ ƒe taɖodzinuwo.

  1. <blɔɖe ƒe nyagbɔgblɔ>
  2. <p> Lorem ipsum dolor bɔbɔ nɔ anyi amet, consectetur adipiscing elit. Xexlẽdzesi blibo posuere erat si nye ante venenatis. </p> ƒe nyawo
  3. <small> Ame aɖe si xɔ ŋkɔ </small>
  4. </blockquote ƒe nyagbɔgblɔ>

Kpɔɖeŋu blockquotes

Wowɔa blockquotes siwo woɖo ɖi la ƒe atsyã ale:

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

Ame aɖe si xɔ ŋkɔ le Body of work me

Ne èdi be yeakɔ wò blockquote la ɖe ɖusime la, tsɔe kpee class="pull-right":

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

Ame aɖe si xɔ ŋkɔ le Body of work me

Ŋlɔ ŋkɔwo

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 class="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.

Numeɖeɖe si le tsia dzi

<dl class="dl-horizontal">

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

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

  1. Le kpɔɖeŋu me , ele be woaxatsa <code> ƒe akpa </ code > 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>

De dzesii: 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.

Google ƒe Dzedzeme

Tsɔ <pre>element ma ke eye nàtsɔ klass eve siwo woate ŋu atia la akpe ɖe eŋu hena gɔmeɖeɖe si nyo wu.

  1. <p> Kpɔɖeŋu nuŋɔŋlɔ le afisia... </p>
  1. <pre class = "nyatakaka dzeani ."
  2. fli ƒe xexlẽdzesiwo" >
  3. <p>Nuŋɔŋlɔ ƒe kpɔɖeŋu le afisia...</p>
  4. </pre>

Wɔ google-code-prettify ƒe kɔpi eye nàkpɔ readme la hena alesi nàzãe.

Tabla ƒe dzesidede

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) ƒe dzesiwo
Ele be woazãe le a<thead>
<caption> Nusiwo le kplɔ̃a dzi ŋuti numeɖeɖe alo kpukpui, vevietɔ eɖea vi na screen readers
  1. <kplɔ̃>
  2. <ta>
  3. <tr> ƒe nyawo
  4. <th> ... </th> ƒe nyawo
  5. <th> ... </th> ƒe nyawo
  6. </tr> ƒe nyawo
  7. </thead> ƒe nyawo
  8. <tbody> ƒe ƒuƒoƒo
  9. <tr> ƒe nyawo
  10. <td> ... </td> ƒe nyawo
  11. <td> ... </td> ƒe nyawo
  12. </tr> ƒe nyawo
  13. </tbody> ƒe ƒuƒoƒo
  14. </table> ƒe ƒuƒoƒo

Tabla ƒe tiatiawɔblɔɖe

Ŋkɔ Nusrɔ̃ƒe Nuɖᴐɖᴐ
Gᴐmedzeƒe Ɖeke o Atsyã aɖeke meli o, sɔtiwo kple fliwo koe
Gɔmedzenu .table Fli siwo le fliawo dome le tsia dzi koe
Woɖo liƒo na .table-bordered Eƒoa dzogoewo eye wòtsɔa gotagome liƒo kpena ɖe eŋu
Zebra-ʋuʋudedi ƒe fli .table-striped Etsɔa megbe amadede si nye ɣie si me kɔ la kpena ɖe fli siwo mebɔ o ŋu (1, 3, 5, kple bubuawo) .
Woƒo nu tso eŋu kpuie .table-condensed Lãa tsitrenu padding ɖe afã me, tso 8px va ɖo 4px, le wo katã tdkple thelements me

Kpɔɖeŋu kplɔ̃wo

1. Tabla ƒe atsyã siwo woɖo ɖi

Wowɔa kplɔ̃wo ƒe atsyã le wo ɖokui si kple liƒo ʋɛ aɖewo ko be woakpɔ egbɔ be woate ŋu axlẽ wo eye woalé woƒe wɔwɔme me ɖe asi. Ne 2.0 le eme la, .tablewobiaa klass la.

  1. <kplɔ̃ ƒe hatsotso = "kplɔ̃" >
  2. ...
  3. </table> ƒe ƒuƒoƒo
# . Ŋkɔ gbãtɔ Ƒome ŋkɔ Zãla ƒe ŋkɔ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry ye nye esia Xe la @twitter dzi

2. Kplɔ̃ si dzi fli le

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

De dzesii: Tabla siwo le fli me zãa :nth-childCSS tiatiawɔnu eye mele IE7-IE8 me o.

  1. <kplɔ̃ ƒe hatsotso = "kplɔ̃ kplɔ̃ ƒe fli" >
  2. ...
  3. </table> ƒe ƒuƒoƒo
# . Ŋkɔ gbãtɔ Ƒome ŋkɔ Zãla ƒe ŋkɔ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry ye nye esia Xe la @twitter dzi

3. Kplɔ̃ si woɖo liƒo na

Tsɔ liƒo siwo ƒo xlã kplɔ̃ bliboa kple dzogoe siwo le goglo la kpe ɖe eŋu hena atsyɔ̃ɖoɖo.

  1. <table class = "kplɔ̃ si woɖo ɖe kplɔ̃ dzi" >
  2. ...
  3. </table> ƒe ƒuƒoƒo
# . Ŋkɔ gbãtɔ Ƒome ŋkɔ Zãla ƒe ŋkɔ
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

4. Kplɔ̃ si wotsɔ ƒo ƒui

Na wò kplɔ̃wo nasɔ gbɔ wu to .table-condensedklass la tsɔtsɔ kpee me be nàtso kplɔ̃dzivɔ ƒe padding ɖe afã me (tso 8px va ɖo 4px).

  1. <table class = "kplɔ̃ kplɔ̃-kple" >
  2. ...
  3. </table> ƒe ƒuƒoƒo
# . Ŋkɔ gbãtɔ Ƒome ŋkɔ Zãla ƒe ŋkɔ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry Xevi la @twitter dzi

5. Tsɔ wo katã ƒo ƒui!

Miate ŋu aƒo kplɔ̃dzinusɔsrɔ̃awo dometɔ ɖesiaɖe nu ƒu faa be nàkpɔ dzedzeme vovovowo to klass siwo li la dometɔ ɖesiaɖe zazã me.

  1. <table class = "kplɔ̃ kplɔ̃-striped kplɔ̃-liƒo kplɔ̃-kple" >
  2. ...
  3. </table> ƒe ƒuƒoƒo
Ŋkɔ bliboa
# . Ŋkɔ gbãtɔ Ƒome ŋkɔ Zãla ƒe ŋkɔ
1. Marko Otto ƒe nyawo @mdo dzi
2. Yakob Thornton ƒe ŋkɔ @da ami
3. Larry Xevi la @twitter dzi

HTML kple CSS siwo te ŋu trɔna ɖe nɔnɔmewo ŋu

Akpa nyuitɔ kekeake le agbalẽviwo ŋu le Bootstrap me enye be wò nyawo katã kple dziɖuɖuwo dzena nyuie eɖanye aleke kee nèwɔ tu wo le wò dzesidede me o. HTML si mehiã o mehiã o, gake míenaa kpɔɖeŋuawo amesiwo hiãe.

Ðoɖo siwo sesẽ wu la va kple klass siwo le kpuie eye woate ŋu atrɔ asi le wo ŋu hena atsyãwɔwɔ bɔbɔe kple nudzɔdzɔwo ƒe babla, eyata woƒo nu tso ŋuwò le afɔɖeɖe ɖesiaɖe me.

Ðoɖo ene siwo woɖo ɖe eme

Bootstrap va kple kpekpeɖeŋu na agbalẽvi ƒe ɖoɖo ƒomevi ene:

  • Tsitrenu (si woɖo ɖi) .
  • Di
  • Le fli me
  • Si mlɔ anyi

Agbalẽvi ƒe ɖoɖo vovovowo bia be woawɔ tɔtrɔ aɖewo le dzesidede ŋu, gake dziɖuɖuawo ŋutɔ gakpɔtɔ li eye wowɔa nu ɖekae.

Dziɖuɖu ƒe nɔnɔmewo kple bubuwo

Bootstrap ƒe nuŋlɔɖiwo me atsyãwo le na gɔmeɖoanyi nuŋlɔɖi ƒe dziɖuɖuwo katã abe nyawo tsɔtsɔ yi eme, nuŋɔŋlɔ ƒe teƒe, kple tiatia si nàkpɔ mɔ na. Gake egava kple akpa aɖewo siwo wowɔ ɖe ɖoɖo nu abe nusiwo wotsɔ kpe ɖe eŋu kple esiwo wotsɔ de eme do ŋgɔ kple kpekpeɖeŋu na xexlẽdzesiwo ƒe dzesiwo ene.

Wotsɔ nɔnɔmewo abe vodada, nuxlɔ̃ame, kple dzidzedzekpɔkpɔ ene kpe ɖe agbalẽvi dzi kpɔkpɔ ƒomevi ɖesiaɖe ŋu. Atsyã siwo wozãna na nuwɔametɔwo ƒe dziɖuɖuwo hã le eme.

Nɔnɔme ƒomevi ene

Bootstrap naa dzesidede bɔbɔe kple atsyãwo na nyatakakadzraɖoƒe ƒe nɔnɔmetata siwo bɔ ƒe atsyã ene.

Ŋkɔ Nusrɔ̃ƒe Nuɖᴐɖᴐ
Tsitrenu (si woɖo ɖi) . .form-vertical (mehiã o) . Dzesi siwo woɖo ɖe wo nɔewo dzi, siwo woɖo ɖe miame ɖe dziɖunuwo dzi
Le fli me .form-inline Miame-aɖo dzeside kple inline-block dziɖuɖuwo na compact atsyã
Di .form-search Extra-rounded text input na didi ƒe atsyɔ̃ɖoɖo si bɔ
Si mlɔ anyi .form-horizontal Tsɔ dzesi siwo woɖo ɖe miame, siwo woɖo ɖe ɖusime la ƒu gbe ɖe fli ɖeka dzi kple dziɖunuwo

Kpɔɖeŋu agbalẽvi siwo zãa agbalẽvi dzi kpɔkpɔwo ko, dzesidede bubu aɖeke meli o

Gɔmeɖoanyi ƒe nɔnɔme

Smart kple lightweight defaults manɔmee dzesi bubu.

Kpɔɖeŋu block-level kpekpeɖeŋu nuŋɔŋlɔ le afisia.

  1. <form class = "enyo" >
  2. <label> Dzesideŋkɔ < /label>
  3. <input type = "text" class = "span3" teƒeɖoɖo = "Ŋlɔ nane..." >
  4. <span class = "help-block" > Kpɔɖeŋu block-level kpekpeɖeŋu nuŋɔŋlɔ le afisia. </span> ƒe nyawo
  5. <label class = "dzesideɖaka" >
  6. <input type = "checkbox" > Kpɔm ɖa
  7. </label> ƒe dzesi
  8. <button type = "ɖo ɖa" class = "btn" > Ðo ɖa </button>
  9. </form> ƒe nɔnɔme

Didi ƒe agbalẽvi

Tsɔ kpe .form-searchɖe agbalẽvia ŋu kple .search-queryɖe input.

  1. <form class = "enyo 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 .form-inlineɖe eŋu nyuie le tsitrenu ƒe ɖoɖowɔwɔ kple dometsotso si le nuŋlɔɖi ƒe dziɖuɖuwo ŋu.

  1. <form class = "enyo nɔnɔme-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 siwo le tsia dzi

Woɖe agbalẽvi dzi kpɔkpɔ gbãtɔ siwo katã míedoa alɔe fia le ɖusime. Nusiwo woŋlɔ ɖe tu me lae nye esi:

  • nuŋɔŋlɔwo (nuŋɔŋlɔ, nyagbe ɣaɣla, e-mail, kple bubuawo) .
  • ƒe dzesideɖaka
  • radio dzi
  • tia
  • tiatia geɖe
  • faɛl ƒe nyawo tsɔtsɔ de eme
  • textarea ƒe akpa aɖe

Tsɔ kpe ɖe nuŋɔŋlɔ si wowɔ le ablɔɖe me ŋu la, HTML5 nuŋɔŋlɔ ɖesiaɖe si wotu ɖe nuŋɔŋlɔ dzi la dzena nenema.

Kpɔɖeŋu dzesidede

Ne míetsɔ kpɔɖeŋu agbalẽvi ƒe ɖoɖo si le etame na la, dzesi si do ƒome kple gbãtɔ ƒe nyawo tsɔtsɔ de eme kple dziɖuɖu ƒe ƒuƒoƒoae nye esi. , .control-group, .control-labelkple .controlsklassawo katã hiã na atsyãwɔwɔ.

  1. <form class = "nɔnɔme-nɔnɔme" >
  2. <anyigba ƒe ƒuƒoƒo>
  3. <xotutu> Xotutu ƒe nuŋɔŋlɔ </xotutu>
  4. <div class = "dziɖuɖu-ƒuƒoƒo" >
  5. <label class = "dziɖuɖu-dzesi" na = "input01" > Nuŋɔŋlɔ ƒe nuŋɔŋlɔ </label>
  6. <div klass = "dziɖuɖuwo" >
  7. <nyatakaka ƒomevi = "nuŋɔŋlɔ" klass = "nyatakaka-xlarge" id = "nyatakaka01" >
  8. <p class = "help-block" > Kpekpeɖeŋu nuŋɔŋlɔ si doa alɔ </p>
  9. </div> ƒe nyawo
  10. </div> ƒe nyawo
  11. </fieldset> ƒe ƒuƒoƒo
  12. </form> ƒe nɔnɔme

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

Bootstrap ɖe atsyãwo fia na browser-do alɔ focused kple disablednɔnɔmewo. Míeɖea Webkit si woɖo ɖi la ɖa outlineeye míetsɔa a ɖoa box-shadoweteƒe na :focus.


Kpekpeɖeŋugbalẽvi ƒe kpeɖodzinana

Edea kpeɖodzi ƒe atsyãwo hã ɖe eme na vodadawo, nuxlɔ̃amewo, kple dzidzedzekpɔkpɔ. Be nàzãe la, tsɔ vodada ƒe hatsotso la kpe ɖe nusiwo ƒo xlãe .control-groupŋu .

  1. <anyigba ƒe ƒuƒoƒo
  2. class = "dziɖuɖu-ƒuƒoƒo ƒe vodada" >
  3. ...
  4. </fieldset> ƒe ƒuƒoƒo
Ame aɖewo dea asixɔxɔ le afisia ŋu
Ðewohĩ nane gblẽ
Taflatse ɖɔ vodadaa ɖo
Woohoo!
Woohoo!

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

Do ŋgɔ & tsɔ nyawo kpe ɖe eŋu

Nuŋɔŋlɔ ƒe ƒuƒoƒowo—si me nuŋɔŋlɔ siwo wotsɔ kpe ɖe eŋu alo wotsɔ kpe ɖe eŋu do ŋgɔ—naa mɔnu bɔbɔe aɖe si dzi nàto ana nya siwo ƒo xlãe geɖe wu na wò nyawo. Kpɔɖeŋu gãwo dometɔ aɖewoe nye @ dzesi na Twitter zãlawo ƒe ŋkɔwo alo $ na ganyawo.


Dzesiɖakawo kple radiowo

Vaseɖe v1.4 la, Bootstrap hiã dzesidede bubu ƒo xlã dzesiɖakawo kple radiowo be woatsɔ aƒo wo nu ƒu ɖekae. Fifia, enye nya bɔbɔe aɖe si ku ɖe gbugbɔgagblɔ <label class="checkbox">si blaa <input type="checkbox">.

Wodoa alɔ dzesiɖaka siwo le Internet dzi kple radiowo hã. Ðeko nàtsɔe akpe ɖe alo .inlineɖesiaɖe ŋu eye nèwu enu..checkbox.radio


Inline forms kple append/prepend

Be nàzã prepend alo append inputs le inline nɔnɔme me la, kpɔ egbɔ be yeda .add-onkple inputla ɖe fli ɖeka dzi, dometsotso aɖeke manɔmee.


Kpekpeɖeŋu ƒe nuŋɔŋlɔ ɖo

Be nàtsɔ kpekpeɖeŋu nuŋɔŋlɔ akpe ɖe wò agbalẽvia ƒe nyawo tsɔtsɔ de eme ŋu la, de kpekpeɖeŋu nuŋɔŋlɔ si le fli me kple <span class="help-inline">alo kpekpeɖeŋu nuŋɔŋlɔ ƒe mɔxexe ɖe <p class="help-block">eme le nyawo tsɔtsɔ de eme ƒe akpaa megbe.

.span*klass mawo ke tso grid ɖoɖoa me na nyawo tsɔtsɔ de eme ƒe lolomewo.

Àteŋu azã static classes hã siwo mewɔa map ɖe grid la dzi o, trɔna ɖe CSS ƒe atsyã siwo ɖoa nya ŋu, alo bu akɔnta le dziɖuɖu ƒomevi vovovowo ŋu (le kpɔɖeŋu me, inputvs. select).

@ .

Kpekpeɖeŋunya aɖewoe nye esi

.00 ƒe xexlẽme
Kpekpeɖeŋu ƒe nuŋɔŋlɔ bubuwoe nye esi
$ .00 ƒe xexlẽme

De dzesii: Ŋkɔwo ƒo xlã tiatia siwo katã nàwɔ na teƒe siwo woate ŋu akli nu le siwo lolo wu sã kple agbalẽvi si woate ŋu azã wu.

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

Nuwɔnawo ƒe abɔtawo

Abe ɖoɖo ene la, ele be woazã abɔtawo na nuwɔnawo ko esime wole hyperlinkwo zãm na nuwo. Le kpɔɖeŋu me, ele be "Download" nanye abɔta esime "dɔwɔwɔ nyitsɔ laa" nanye kadodo.

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 ŋu.

Cross browser ƒe wɔwɔme

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

Agbɔsɔsɔme vovovowo

Ð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 eve bubuwo.


Nuwɔametɔ ƒe nɔnɔme

Le abɔta siwo wowɔ nuwɔametɔwo gome la, tsɔ .disabledklass la kpe ɖe kadodowo ŋu kple disablednɔnɔme na <button>elementwo.

Kadodo gbãtɔ Kadodo

Tawo yi dzi! Míezãa .disabledabe viɖe ƒe hatsotso ene le afisia, si sɔ kple .activeklass si bɔ, eyata mehiã ŋgɔdonya aɖeke o.

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" ƒomevi = "ɖo ɖa" >
  3. Awunugbui
  4. </button> ƒe dzesi
  5. <input class = "btn" ƒomevi = "abɔta".
  6. value = "Nuŋɔŋlɔ" >
  7. <input class = "btn" ƒomevi = "ɖoe ɖa".
  8. value = "Tsɔe ɖo ɖa" >

Abe nuwɔna nyuitɔ ene la, dze agbagba nàna element la nasɔ na 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.

  • 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

Wotue abe sprite ene

Le esi teƒe be míana nɔnɔmetata ɖesiaɖe nanye nubiabia bubu la, míeƒo wo nu ƒu ɖe sprite me—nɔnɔmetatawo ƒe ha aɖe le faɛl ɖeka me si zãa CSS tsɔ ɖoa ​​nɔnɔmetataawo ɖe teƒe si wotsɔ background-position. Esia nye mɔnu ma ke si míezãna le Twitter.com eye wòwɔ dɔ nyuie na mí.

Wotsɔ dzesiwo ƒe hatsotsowo katã do ŋgɔ .icon-na ŋkɔwo ƒe dometsotso kple kekeme nyuie, abe míaƒe akpa bubuawo ene. Esia akpe ɖe ŋuwò nàƒo asa na masɔmasɔ kple dɔwɔnu bubuwo.

Glyphicons ɖe mɔ na mí be míazã Halflings si woɖo ɖe míaƒe dɔwɔnu siwo le ʋuʋu ɖi me zi alesi míena kadodo kple kafukafu le afisia le docs la me ko. Taflatse bu eŋu kpɔ be yeawɔ nenema ke le wò dɔwo hã me.

Ale si woazãe

Bootstrap zãa <i>tag na nɔnɔmetatawo katã, gake case class aɖeke mele wo si o—prefix si woama koe. 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:

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

Klass 140 ye li nàte ŋu atia tsoe na wò nɔnɔmetatawo. Ðeko nàtsɔ <i>tag aɖe akpe ɖe eŋu kple klass siwo sɔ eye nàɖoe. Àteŋu akpɔ xexlẽdzesi bliboa le sprites.less alo afisia tututu le nuŋlɔɖi sia me.

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>dzesidea megbe be dometsotso nyuitɔ nanɔ eme.

Zã nyawo ƒe akpa aɖewo

Nɔnɔmetatawo nyo ŋutɔ, gake afikae ame azã wo le? Susu ʋɛ aɖewoe nye esi:

  • Abe nukpɔkpɔwo na wò axadzinuŋɔŋlɔ ene
  • Na mɔfiame si wotsɔa nɔnɔmetatawo ƒoa nui ko
  • Be abɔtawo nakpe ɖe ame ŋu wòagblɔ gɔmesese si le nuwɔna aɖe ŋu
  • Kple kadodo siwo dzi woato ama nya siwo ƒo xlãe le afi si zãla aɖe le

Le vevietɔ me la, afisiafi si nàte ŋu ade <i>dzesidenu le la, àte ŋu ade dzesi aɖe.

Kpɔɖeŋuwo

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