Base CSS ye

HTML fɛn jɔnjɔnw cogoya ani u labɛnna ni kalansenw ye minnu bɛ se ka bonya.

Kungolow bɛ wuli! Nin docs ye v2.3.2 ta ye, min tɛ dɛmɛn tugun foroba la. Aw ye Bootstrap ka version laban lajɛ!

Kumakunw

HTML kunkankow bɛɛ, <h1>through <h6>bɛ sɔrɔ.

h1. Kumakun 1nan

h2. Kumakun 2nan

h3. Kumakun 3nan

h4. Kumakun 4nan

h5. Kumakun 5nan
h6. Kumakun 6nan

Farikolo kopi

Bootstrap ka diɲɛ daminɛ font-sizeye 14px ye , ni a line-heightye 20px ye . O bɛ sirataama <body>dakunw ni dakunw bɛɛ la. Ka fara o kan, <p>(dakunw) bɛ duguma-dakun sɔrɔ u ka layini-janya tilancɛ la (10px ka da a kan).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus ni magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies bolifɛnw.

Cum sociis natoque penatibus ni magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla min tɛ fɛn ye min bɛ wele ko fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla min tɛ fɛn ye min bɛ wele ko fringilla.

Maecenas sed diam eget risus varius blandit sigi amet non magna. Donec id elit non mi porta gravida ye eget metus ye. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Plomb farikolo kopi

Aw ye dakun dɔ kɛ fɛn ye min bɛ bɔ kɛnɛ kan ni aw ye a fara a kan .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor min bɛ kɛ ka fɛnw feere. Duis mollis, est min tɛ fɛn caman ye.

<p kalasi = "ɲɛmaa" > ... </p> 

A jɔra ni Less ye

sɛbɛnnikɛlan sɛgɛsɛgɛli bɛ tali kɛ LESS fɛn fila kan fɛn caman sɛgɛsɛgɛli la.less : @baseFontSizeani @baseLineHeight. Fɔlɔ ye basigi sɛbɛnnibolo-size ye min bɛ Kɛ a bɛɛ la ani filanan ye basigi-yɔrɔ-janya ye. An bɛ baara Kɛ n’o fɛn caman ɲɔgɔnna ye ani jatebɔ nɔgɔman dɔw walasa ka an ka suguya bɛɛ ka margins, paddings, ani line-heights (dakunw) Dabɔ ani fɛn wɛrɛw. Aw bɛ u kɛ ka kɛɲɛ ni u yɛrɛ sago ye ani Bootstrap bɛ ladamu.


Faranfasiya

Baara kɛ ni HTML ka sinsinnan taamasiyɛnw ye minnu bɛ kɛ ni cogoya nɔgɔmanw ye.

<small>

Walasa ka sɛbɛnniw kɔnɔna walima sɛbɛnniw blokiw bɔ, i ka baara kɛ ni taamasiyɛn fitinin ye.

Nin sɛbɛnni zana in kun ye ka jate i n’a fɔ sɛbɛnni ɲumanw.

<p> <misɛn> nin sɛbɛn in kun ye ka jate sɛbɛn ɲɛnamaw ye . < /p> ye </p> ye
  

Farin

Walasa ka sinsin sɛbɛnni dɔ kan ni sɛbɛnnibolo-gɛlɛya gɛlɛn ye.

nin sɛbɛnfura in bɛ kɛ sɛbɛnni jɛlenw ye .

<strong> bamanankan_kalangafe4-zup.repl.html,#201944 ye </strong>

Italikaw ka sɛbɛnniw

Walasa ka sinsin sɛbɛn yɔrɔ dɔ kan ni sɛbɛnnibolow ye minnu bɛ sɛbɛn ni italiki ye.

nin sɛbɛn yɔrɔ in bɛ kɛ sɛbɛnni ye min bɛ sɛbɛn ni italiki ye .

<em> bamanankan_kalangafe4-zup.repl.html,#1199999 ye </em>

Kungolow bɛ wuli!Aw kana siga ka baara kɛ <b>ni <i>HTML5 ye. <b>kɔrɔ ye ka daɲɛw walima kumasenw Bɔ kɛnɛ kan k’a sɔrɔ a ma nafa wɛrɛ Lase k’a sɔrɔ <i>a fanba bɛ kumakan, fɛɛrɛko daɲɛw, a ɲɔgɔnnaw de kan.

Alignment kalanw

Aw bɛ sɛbɛnniw labɛn kokura nɔgɔya la ka kɛɲɛ ni yɔrɔw ye minnu bɛ sɛbɛnniw labɛncogo kalanw na.

Sɛbɛn minnu bɛ ɲɔgɔn kan numan fɛ.

Cɛmancɛ-labɛnni sɛbɛnni.

Sɛbɛn minnu bɛ ɲɔgɔn kan kinin fɛ.

  1. <p class = "texte-left" > Sɛbɛnni min bɛ ɲɔgɔn kan numan fɛ. </p> , o ye
  2. <p class = "text-center" > Sɛbɛnni min bɛ bɛn cɛmancɛ ma. </p> , o ye
  3. <p class = "text-right" > Sɛbɛn min bɛ ɲɔgɔn kan kinin fɛ. </p> , o ye

Sinsinnan kalanw

Kɔrɔ lase kulɛri fɛ ni bolomafara nafama kalanw ye.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.. Bamako, Mali.

Etiam porta sem cɛmanba min bɛ wele ko magna mollis euismod.

Donec ullamcorper nulla min tɛ fɛn ye min bɛ wele ko fringilla.

Aenean eu leo ​​quam. Pellentesque ornare ye lacinia quam venenatis ye.

Duis mollis, est non commodo luctus, nisi erat jirisunba min bɛ wele ko ligula.

  1. <p kalasi = "mugulen" > Fusce dapibus, tellus ac cursus komodo, tortor mauris nibh. </p> , o ye
  2. <p kalasi = "sɛbɛnni-lasɔmini" > Etiam porta sem malesuada magna mollis euismod. </p> , o ye
  3. <p kalasi = "sɛbɛnni-fili" > Donec ullamcorper nulla non metus auctor fringilla. </p> , o ye
  4. <p kalasi = "sɛbɛnni-kunnafoni" > Aenean eu leo ​​quam. Pellentesque ornare ye lacinia quam venenatis ye. </p> , o ye
  5. <p kalasi = "sɛbɛnni-ɲɛtaa" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p> , o ye

Kuma surunw

HTML ka <abbr>element (yɔrɔ) waleyali cogo la min bɛ Kɛ ka surunya ni daɲɛ surunw ye walasa ka a jiracogo bonyalen jira hover kan. Suguda minnu bɛ ni fɛn dɔ ye title, olu bɛ ni duguma dan ye min bɛ yeelen bɔ ani dɛmɛ-yɔrɔ min bɛ 'yɔrɔ la, o bɛ 'kɔnɔfɛn wɛrɛw Di 'yɔrɔ la.

<abbr>

Walasa ka sɛbɛnni bonyalen sɔrɔ surunyalen dɔ janya kan, i ka o titlefɛnsɛbɛn don a kɔnɔ.

Daɲɛ min bɛ wele ko attribut , o surunyalen dɔ ye attr ye .

<abbr tɔgɔ = "fɛn" > attr </abbr> 

<abbr class="initialism">

A bɛ Fàra .initialismdaɲɛ surun dɔ kan walasa ka sɛbɛnnibolo-yɔrɔ fitinin dɔ Sɔrɔ.

HTML ye fɛn bɛɛ la ɲuman ye kabini buru tigɛlen.

<abbr title = "HyperText taamasiyɛnkan" class = "daminɛ" > HTML </abbr>  

Adrɛsiw

Aw bɛ kunnafoni di bɛnbakɛ min ka surun aw la walima baara bɛɛ lajɛlen na.

<address>

Aw bɛ sɛbɛnniw mara ni zana bɛɛ laban ye ni <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Fransisko, CA 94107
P: (123) 456-7890. Kalanjɛ ni sɛbɛnni : kalanjɛ ni sɛbɛnni gafew
Tɔgɔ dafalen
fɔlɔ[email protected]
  1. <adrɛsi> ye
  2. <strong> twitɛri , </strong><br>
  3. 795 Folsom Ave, Suite 600 Bamako , Mali
  4. San Fransisko, CA 94107 <br>
  5. <abbr tɔgɔ = « Telefɔni » > P : </abbr> ( 123 ) 456-7890
  6. </adrɛsi> ye
  7.  
  8. <adrɛsi> ye
  9. <strong> Tɔgɔ dafalen </strong><br>
  10. <a href = "mailto:#" > fɔlɔ. [email protected] </a>
  11. </adrɛsi> ye

Blokiw ka kumaw

Walasa ka kunnafoni blokiw fɔ ka bɔ yɔrɔ wɛrɛ la i ka sɛbɛn kɔnɔ.

Blockquote (Blockquote) min bɛ daminɛ

Aw bɛ HTML o HTML<blockquote> lamini i n’a fɔ quote. Walasa ka kuma tilennenw sɔrɔ an bɛ ladilikan di a ma .<p>

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.

  1. <blockquote> ye
  2. <p> Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante. </p> , o ye
  3. </blockquote> ye

Blockquote sugandiliw

Fɛɛrɛ ni kɔnɔkow bɛ Changé ka ɲɛsin fɛn nɔgɔmanw ma minnu bɛ ɲɔgɔn falen-falen blocquote standard kan.

Tɔgɔ dali source dɔ kan

Tag fara a <small>kan walasa ka sɔrɔyɔrɔ dɔn. Aw bɛ sɔrɔyɔrɔ baara tɔgɔ siri <cite>.

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.

Mɔgɔ min tɔgɔ bɔra Source Title kɔnɔ
  1. <blockquote> ye
  2. <p> Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante. </p> , o ye
  3. <small> mɔgɔ tɔgɔba dɔ <cite title = "Sɔrɔyɔrɔ tɔgɔ" > Source Title </cite></small>
  4. </blockquote> ye

A jiracogo wɛrɛw

Baara .pull-rightkɛ ni bloki-sɛbɛn ye min bɛ panpan, min bɛ kinin fɛ.

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit. Jateden dafalen posuere erat a ante.

Mɔgɔ min tɔgɔ bɔra Source Title kɔnɔ
  1. <blockquote kalasi = "sama-niman" >
  2. ...
  3. </blockquote> ye

Lisitiw

A ma yamaruya sɔrɔ

Fɛn minnu kɔnɔ, u sigicogo tɛ foyi ɲɛ k’a jɛya, olu lisɛli.

  • Lorem ipsum dolor sigi amet
  • Consectetur ye farikolojidɛsɛ ye
  • Jateden dafalen molestie lorem ka mass
  • Fasilisi bɛ sɔrɔ pretium nisl aliquet la
  • Nulla volutpat ye aliquam ye
    • Fasellus iaculis ye jiri ye
    • Purus sodales (banakisɛfagalanw) ultricies
    • Vestibulu laoreet porttitor sem.. Bamako, Mali
    • Ac tristique libero volutpat ka baara kɛ
  • Faucibus porta lacus ye jiri ye min bɛ wele ko fringilla vel
  • Aenean sigi amet erat nunc
  • Eget porttitor ka lorem
  1. <ul> ye
  2. <li> ... </li>
  3. </ul>

Koman kɛra

Fɛn minnu kɔnɔ, o sigicogo nafa jira k’a jɛya, olu lisɛli.

  1. Lorem ipsum dolor sigi amet
  2. Consectetur ye farikolojidɛsɛ ye
  3. Jateden dafalen molestie lorem ka mass
  4. Fasilisi bɛ sɔrɔ pretium nisl aliquet la
  5. Nulla volutpat ye aliquam ye
  6. Faucibus porta lacus ye jiri ye min bɛ wele ko fringilla vel
  7. Aenean sigi amet erat nunc
  8. Eget porttitor ka lorem
  1. <ol> ye
  2. <li> ... </li>
  3. </ol> , o ye

A ma kɛ cogo min na

Aw bɛ padding default list-styleani left padding bɔ lisi fɛnw kan (denmisɛnninw dɔrɔn).

  • Lorem ipsum dolor sigi amet
  • Consectetur ye farikolojidɛsɛ ye
  • Jateden dafalen molestie lorem ka mass
  • Fasilisi bɛ sɔrɔ pretium nisl aliquet la
  • Nulla volutpat ye aliquam ye
    • Fasellus iaculis ye jiri ye
    • Purus sodales (banakisɛfagalanw) ultricies
    • Vestibulu laoreet porttitor sem.. Bamako, Mali
    • Ac tristique libero volutpat ka baara kɛ
  • Faucibus porta lacus ye jiri ye min bɛ wele ko fringilla vel
  • Aenean sigi amet erat nunc
  • Eget porttitor ka lorem
  1. <ul kalasi = "min tɛ cogo la" >
  2. <li> ... </li>
  3. </ul>

Inline kɔnɔ

Aw bɛ lisi kɔnɔfɛnw bɛɛ bila tigɛli kelen kan ni inline-blockani yeelen padding dɔw ye.

  • Lorem ye ipsum ye
  • Fasellus iaculis (banakisɛfagalan).
  • Nulla volutpat ye
  1. <ul kalasi = "kɔnɔna" >
  2. <li> ... </li>
  3. </ul>

Cogojirali

Daɲɛw lisɛli n’u ɲɛfɔli minnu bɛ tali kɛ u la.

Ɲɛfɔli lisiw
Ɲɛfɔli lisɛli dafalen don daɲɛw ɲɛfɔli kama.
Euismod ye
Vestibulum id ligula porta felis euismod cɛya bɛ sɔrɔ lacinia odio sem nec elit.
Donec id elit non mi porta gravida ye eget metus ye.
Malesuada ka porta
Etiam porta sem cɛmanba min bɛ wele ko magna mollis euismod.
  1. <dl> ye
  2. <dt> ... </dt> , o ye
  3. <dd> ... </dd> ye
  4. </dl> ye

Ɲɛfɔli tilennen

Aw bɛ daɲɛw ni ɲɛfɔliw kɛ <dl>ɲɔgɔn kan kɛrɛfɛ.

Ɲɛfɔli lisiw
Ɲɛfɔli lisɛli dafalen don daɲɛw ɲɛfɔli kama.
Euismod ye
Vestibulum id ligula porta felis euismod cɛya bɛ sɔrɔ lacinia odio sem nec elit.
Donec id elit non mi porta gravida ye eget metus ye.
Malesuada ka porta
Etiam porta sem cɛmanba min bɛ wele ko magna mollis euismod.
Felis euismod ka cɛya bɛ sɔrɔ lacinia la
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sigi amet risus.
  1. <dl kalasi = "dl-horizontal" >
  2. <dt> ... </dt> , o ye
  3. <dd> ... </dd> ye
  4. </dl> ye

Kungolow bɛ wuli!ɲɛfɔli lisi tilennenw bɛna daɲɛw tigɛ minnu janya ka bon kosɛbɛ fo u tɛ se ka don kininbolo koloma labɛnni text-overflowna . Viewports fitininw na, u bɛna fɛn caman Changer ka kɛ default stacked layout ye.

Inline kɔnɔ

Kode inline snippets siri ni <code>.

Misali la, a <section>ka kan ka siri i n’a fɔ inline.
  1. misali la , < kode> & lt ; dakun & gt ;</ code > ka kan ka siri i n' a fɔ inline .

Bloki basigilen

Baara kɛ ni <pre>kode sinsinni caman ye. Aw ye aw jija ka bɔ angle brackets (kɛrɛfɛlan) fɛn o fɛn na kode kɔnɔ walasa ka ɲɛfɔli kɛ ka ɲɛ.

<p>Sɛbɛn misali yan...</p>
  1. <pre> ye
  2. <p>Sɛbɛn misali yan...</p>
  3. </pre> , o ye

Kungolow bɛ wuli!Aw ye aw jija ka kode mara <pre>tags kɔnɔ ka surunya kinin fɛ cogo min na; a bɛna tablo bɛɛ jira.

Aw bɛ se ka .pre-scrollablekalasi fara a kan min bɛna max-height sigi 350px ani ka y-axis scrollbar di.

Default cogoyaw

Walasa ka cogoya jɔnjɔn sɔrɔ—padding yeelenma ani tilayɔrɔ tilennen dɔrɔn—aw bɛ basigi kalasi .tablefara fɛn o fɛn <table>kan .

# Bamako . Tɔgɔ Jamu Baarakɛla tɔgɔ
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ye Kɔnɔ in @twitter kan
  1. <tabali kalasi = "tabali" >
  2. ...
  3. </tabali>

Kalanso minnu bɛ kɛ ni i yɛrɛ sago ye

Aw bɛ nin kalansen ninnu dɔ fara .tablebasigi kalan kan.

.table-striped

A bɛ zebra-striping fara tabali jirisun o tabali kan <tbody>via :nth-childCSS selector kɔnɔ (a tɛ sɔrɔ IE7-8 kɔnɔ).

# Bamako . Tɔgɔ Jamu Baarakɛla tɔgɔ
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ye Kɔnɔ in @twitter kan
  1. <tabali kalasi = "tabali-tabali-sira" >
  2. ...
  3. </tabali>

.table-bordered

Aw bɛ danw ni nkɔni bulamaw fara tabali kan.

# Bamako . Tɔgɔ Jamu Baarakɛla tɔgɔ
1 ye Marka Otto ye @mdo ye
Marka Otto ye @getbootstrap ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
  1. <tabali kalasi = "tabali-tabali-danfara" >
  2. ...
  3. </tabali>

.table-hover

A bɛ se ka hover cogoya dɔ kɛ tabali jiriw kan a kɔnɔ <tbody>.

# Bamako . Tɔgɔ Jamu Baarakɛla tɔgɔ
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
  1. <tabali kalasi = "tabali-tabali-hover" >
  2. ...
  3. </tabali>

.table-condensed

A bɛ tabali kɛ fɛn ye min ka surun kosɛbɛ ni a bɛ selilɛriw tigɛ ka kɛ fila ye.

# Bamako . Tɔgɔ Jamu Baarakɛla tɔgɔ
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan
  1. <tabali kalasi = "tabali-tabali-kɔnɔna" >
  2. ...
  3. </tabali>

Kalanso minnu bɛ kɛ ka ɲɛsin jirisunw ma minnu bɛ se ka kɛ

Baara kɛ ni contextual classes ye walasa ka tabali jiriw kulɛri.

Kilasi Cogojirali
.success A b’a jira ko wale kɛra min ɲɛnabɔra walima min kɛra koɲuman.
.error A bɛ wale dɔ jira min bɛ se ka kɛ farati ye walima min bɛ se ka kɛ wale jugu ye.
.warning A bɛ lasɔmini dɔ jira min bɛ se ka kɛ a mago bɛ jateminɛ na.
.info A bɛ baara kɛ ni a ye i n’a fɔ fɛn wɛrɛ min bɛ kɛ ka kɛɲɛ ni cogoya kɔrɔw ye.
# Bamako . Ka kɛ Sarali Minɛna Sigisariyaw
1 ye TB - Kalo o kalo 01/04/2012 ye Yamaruyalen
2 ye TB - Kalo o kalo 02/04/2012. Bamako, Mali A banna
3 ye TB - Kalo o kalo 03/04/2012. Bamako, Mali Makɔnɔlila
4 ye TB - Kalo o kalo 04/04/2012. Bamako, Mali Aw bɛ wele ka don walasa ka a dafa
  1. ...
  2. < tr kalasi = "ɲɛtaa" >
  3. <td> 1 < /td> ye
  4. <td>TB - Kalo o kalo </ td >
  5. <td> 01 / 04 / san 2012 < /td>
  6. <td>Sɔnnen don</ td >
  7. </ tr > ye
  8. ...

Tabali taamasiyɛn min bɛ dɛmɛ

Tabali HTML fɛnw minnu bɛ dɛmɛ sɔrɔ, olu lisɛli ani u ka kan ka baara kɛ cogo min na.

Ka nɔrɔ Cogojirali
<table> Wrapping element walasa ka kunnafoniw jira tabali cogo la
<thead> Minɛn kɔnɔfɛn min bɛ kɛ tabali kuncɛlanw ( <tr>) ye walasa ka tabali kuluw labeli
<tbody> Minɛn yɔrɔ min bɛ tabali jiriw la ( <tr>) tabali farikolo la
<tr> Minɛn kɔnɔfɛn min bɛ kɛ tabali selilɛriw kulu dɔ ye ( <td>walima <th>) min bɛ jira jirisun kelen kan
<td> Tabali selilɛri default
<th> Tabali seli kɛrɛnkɛrɛnnen min bɛ kɛ kulu (walima jirisun, ka kɛɲɛ ni a bonya ni a sigiyɔrɔ ye) taamasiyɛnw ye
<caption> Tabali bɛ min mara, o ɲɛfɔli walima a kuncɛcogo, kɛrɛnkɛrɛnnenya la, min nafa ka bon ɛkran kalanbagaw ma
  1. <tabali> ye
  2. <kalan> ... </caption>
  3. <kunkolo>
  4. <tr> ye
  5. <th> ... </th> ye
  6. <th> ... </th> ye
  7. </tr> , o ye
  8. </thead> ye
  9. <tbody> ye
  10. <tr> ye
  11. <td> ... </td> ye
  12. <td> ... </td> ye
  13. </tr> , o ye
  14. </tbody> ye
  15. </tabali>

Default cogoyaw

Mɔgɔ kelen-kelen bɛɛ ka foroko kɔrɔsibagaw bɛ styling sɔrɔ, nka ni basigi kalasi wajibiyalen si tɛ o kan <form>walima fɛn caman Changements dans marquage. O bɛ na ni sɛbɛnniw ye minnu bɛ ɲɔgɔn kan, minnu bɛ ɲɔgɔn kan numan fɛ foroko kunkankow sanfɛ.

Lezandi Misali la bloki-nivo dɛmɛ sɛbɛn yan.
  1. <fɔcogo>
  2. <forobaciyɛn>
  3. <jaabi> nsiirin </ legende >
  4. <label> Labeli tɔgɔ </label>
  5. <donna suguya = "sɛbɛn" yɔrɔ = "Fɛn dɔ sɛbɛn..." >
  6. <span class = "dɛmɛ-blɔki" > Misali bloki-dakun dɛmɛ sɛbɛn yan. </span> , o ye
  7. <label class = "sɛbɛn ɲɛ 10nan" >
  8. <input type = "checkbox" > Aw ye n lajɛ
  9. </label> ye
  10. <butɔni suguya = "ci" kalasi = "btn" > Lase </button>
  11. </fieldset> ye
  12. </form>

Layidu talenw minnu bɛ se ka kɛ

Bootstrap kɔnɔ, sɛbɛnfura labɛncogo saba bɛ yen minnu bɛ se ka kɛ baarakɛminɛnw ye minnu bɛ kɛ tuma caman na.

Ɲini sɛbɛn

Aw bɛ fara .form-searchsɛbɛnfura kan ani .search-queryka fara <input>a kan walasa ka sɛbɛnni doncogo wɛrɛ kɛ.

  1. <form class = "fɔli-ɲini" >
  2. <donna suguya = "sɛbɛn" kalasi = "donna-minɛn ɲinini-ɲininkali" >
  3. <butɔni suguya = "submit" kalasi = "btn" > Ɲini </button>
  4. </form>

Foroko min bɛ wele ko Inline

Aw bɛ fara a kan .form-inlineka ɲɛsin labeliw ma minnu bɛ kinin fɛ ani inline-block controls walasa ka layidu fitinin dɔ sɔrɔ.

  1. <form class = "formu-inline" >
  2. <donna suguya = "sɛbɛn" kalasi = "donna-misɛnnin" yɔrɔ = "Email" >
  3. <donna suguya = "daɲɛ" kalasi = "donna-misɛn" yɔrɔ = "Daɲɛ" >
  4. <label class = "sɛbɛn ɲɛ 10nan" >
  5. <input type = "checkbox" > Aw ye aw hakili to ne la
  6. </label> ye
  7. <butɔni suguya = "submit" kalasi = "btn" > Don </button>
  8. </form>

Foro horizontal (fɔcogo tilennen).

Aw bɛ labeliw labɛn kinin fɛ ani k’u wuli ka taa kinin fɛ walasa u ka bɔ layini kelen kan ni kunnafonidilanw ye. A bɛ taamasiyɛn caman caman ɲɔgɔnna caman wajibiya ka bɔ sɛbɛnfura kɔrɔ la:

  • Aw bɛ dɔ fara .form-horizontalo sɛbɛn kan
  • Aw bɛ labeliw ni kunnafonisɛbɛnw siri a kɔnɔ.control-group
  • Aw bɛ fara a kan .control-labelka fara a kan
  • Aw bɛ kunnafoni minnu bɛ tali kɛ o la, aw bɛ olu siri .controlswalasa u ka ɲɔgɔn sɔrɔ ka ɲɛ
  1. <form class = "fɔcogo-kɔrɔlen" >
  2. <div kalasi = "kunnafoni-kulu" >
  3. <label class = "kunnafoni-labeli" for = "donniEmail" > Email </label>
  4. <div kalasi = "kunnafoni" >
  5. <doncogo suguya = "sɛbɛn" id = "donnaEmail" yɔrɔ = "Email" >
  6. </div> ye
  7. </div> ye
  8. <div kalasi = "kunnafoni-kulu" >
  9. <label class = "contrôle-label" for = "donna-sɛbɛn" > Daɲɛgafe </label>
  10. <div kalasi = "kunnafoni" >
  11. <donna suguya = "daɲɛ" id = "donna -daɲɛ" yɔrɔ = "Daɲɛ" >
  12. </div> ye
  13. </div> ye
  14. <div kalasi = "kunnafoni-kulu" >
  15. <div kalasi = "kunnafoni" >
  16. <label class = "sɛbɛn ɲɛ 10nan" >
  17. <input type = "checkbox" > Aw ye aw hakili to ne la
  18. </label> ye
  19. <butɔni suguya = "submit" kalasi = "btn" > Don </button>
  20. </div> ye
  21. </div> ye
  22. </form>

Formulaire controles min bɛ dɛmɛ

Misaliw bɛ sɔrɔ forobaciyɛn kunkankow la minnu bɛ dɛmɛ sɔrɔ misali sɛbɛnw labɛncogo la.

Donanw

Foroko ɲɛnabɔli min ka ca kosɛbɛ, sɛbɛnni-sɛbɛnni-yɔrɔw. HTML5 suguya bɛɛ dɛmɛni bɛ yen: sɛbɛnni, daɲɛ dogolen, don waati, don-waati-sigida, don, kalo, waati, dɔgɔkun, nimɔrɔ, imɛri, url, ɲinini, tel, ani kulɛri.

A bɛ a ɲini ka baara kɛ ni dɔ ye min kofɔlen don typewaati bɛɛ.

  1. <doncogo suguya = "sɛbɛn" yɔrɔ = "Sɛbɛnni" >

Textarea (Sɛbɛnni yɔrɔ).

Formulaire control min bɛ sɛbɛnni zana caman dɛmɛ. Aw bɛ fɛn dɔ Changer rowsi n’a fɔ a mago bɛ cogo min na.

  1. <textarea jirisunw = "3" ></textarea>

Jateminɛ kɛyɔrɔw ani arajow

Jateminɛkɛyɔrɔw ye sugandili kelen walima caman sugandili ye lisi dɔ kɔnɔ k’a sɔrɔ arajow ye sugandili kelen sugandi caman cɛma.

Default (dafalen) .


  1. <label class = "sɛbɛn ɲɛ 10nan" >
  2. <doncogo suguya = "dakun" nafa = "" >
  3. Sugandili fɔlɔ ye nin ni nin ye—aw ye aw jija ka a fɔ mun na a ka ɲi kosɛbɛ
  4. </label> ye
  5.  
  6. <label kalasi = "arajo" >
  7. <doncogo suguya = "arajo" tɔgɔ = "sugandiliRadiow" id = "sugandiliRadiow1" nafa = "sugandili1" sɛgɛsɛgɛli >
  8. Sugandili fɔlɔ ye nin ni nin ye—aw ye aw jija ka a fɔ mun na a ka ɲi kosɛbɛ
  9. </label> ye
  10. <label kalasi = "arajo" >
  11. <doncogo suguya = "arajo" tɔgɔ = "sugandiliRadiow" id = "sugandiliRadiow2" nafa = "sugandili2" >
  12. Sugandili filanan bɛ se ka kɛ fɛn wɛrɛ ye wa n’i y’a sugandi, o bɛna sugandili fɔlɔ bɔ
  13. </label> ye

Inline jatebɔyɔrɔw

Aw bɛ .inlinekalan fara ɲɔgɔn kan ka kɛ jatebɔyɔrɔw walima arajow ye minnu bɛ tugu ɲɔgɔn na walasa kunnafonidiw ka bɔ layini kelen kan.

  1. <label class = "dakun kɔnɔna na" >
  2. <donna suguya = "jatebɔ-kɛsu" id = "inlineSɛgɛsɛgɛli-kɛsu1" nafa = "sugandili1" > 1
  3. </label> ye
  4. <label class = "dakun kɔnɔna na" >
  5. <doncogo suguya = "sɛgɛsɛgɛli kɛsu" id = "inlineCheckbox2" nafa = "sugandili2" > 2
  6. </label> ye
  7. <label class = "dakun kɔnɔna na" >
  8. <doncogo suguya = "sɛgɛsɛgɛli kɛsu" id = "inlineCheckbox3" nafa = "sugandili3" > 3
  9. </label> ye

A bɛ sugandi

Baara kɛ ni sugandicogo kɔrɔ ye walima ka a multiple="multiple"jira walasa ka sugandili caman jira siɲɛ kelen.


  1. <sugandili>
  2. <sugandili> 1 </option>
  3. <sugandili> 2 </option>
  4. <sugandili> 3 </option>
  5. <sugandili> 4 </option>
  6. <sugandili> 5 </option>
  7. </select> , o ye
  8.  
  9. <ka caman sugandi = "caman" >
  10. <sugandili> 1 </option>
  11. <sugandili> 2 </option>
  12. <sugandili> 3 </option>
  13. <sugandili> 4 </option>
  14. <sugandili> 5 </option>
  15. </select> , o ye

Foroko kunkankow janya

Fàralen kan navigatɔrɔn-minɛnw kan minnu bɛ yen, Bootstrap bɛ foroko yɔrɔ nafama wɛrɛw Dòn a la.

Donan minnu bɛ kɔn ka bila ani minnu bɛ fara a kan

Sɛbɛnni walima butɔni dɔw fara a kan ka kɔn sɛbɛnniw kan minnu sinsinnen bɛ sɛbɛnniw kan walima o kɔfɛ. Aw k’a kɔlɔsi ko selectfɛnw tɛ dɛmɛn yan.

Sugandili daminɛtaw

Aw bɛ an .add-onni an siri inputni kalasi fila dɔ ye walasa ka sɛbɛnni dɔ labɛn ka kɔn walima ka fara a kan donta dɔ kan.

@ Bamako

.00 ye
  1. <div kalasi = "donni-ɲɛnabɔli" >
  2. <span kalasi = " farankan" > @ </span>
  3. <donni kalasi = "span2" id = "prependedInput" suguya = "sɛbɛn" yɔrɔ = "Baarakɛla tɔgɔ" >
  4. </div> ye
  5. <div kalasi = "donni-falen" >
  6. <donna kalasi = "span2" id = "donni faralen don" suguya = "sɛbɛn" >
  7. <span kalasi = " farankan" > .00 </span>
  8. </div> ye

A faralen ɲɔgɔn kan

Baara kɛ ni kalasi fila bɛɛ ye ani misali fila ye .add-onwalasa ka donta dɔ prepend ani ka fara a kan.

$ ye .00 ye
  1. <div class = "donni-donni-donni-falen" >
  2. <span kalasi = " farankan" > $ </span>
  3. <donni kalasi = "span2" id = "sɛbɛnni min faralen don a kan" suguya = "sɛbɛn" >
  4. <span kalasi = " farankan" > .00 </span>
  5. </div> ye

Butɔnw sɛbɛnni nɔ na

Sanni a ka kɛ <span>ni sɛbɛnni ye, baara kɛ ni a ye .btnwalasa ka butɔni (walima fila) nɔrɔ sɛbɛnni dɔ la.

  1. <div kalasi = "donni-falen" >
  2. <donna kalasi = "span2" id = "donna butɔni faralen" suguya = "sɛbɛn" >
  3. <butɔni kalasi = "btn" suguya = "butɔni" > Taga! </button> ye
  4. </div> ye
  1. <div kalasi = "donni-falen" >
  2. <donna kalasi = "span2" id = "donna butɔni faralen" suguya = "sɛbɛn" >
  3. <button class = "btn" suguya = "button" > ɲinini </button>
  4. <button class = "btn" suguya = "button" > Sugandili </button>
  5. </div> ye

Butɔnw bɛ jigin

  1. <div kalasi = "donni-falen" >
  2. <donna kalasi = "span2" id = "appendedDropdownButton" suguya = "sɛbɛn" >
  3. <div kalasi = "btn-kulu" >
  4. <button class = "btn jigin-yɔrɔ" data-toggle = "bɔyɔrɔ" >
  5. Wale
  6. <span kalasi = "karɛti" </span>
  7. </button> ye
  8. <ul kalasi = "dakun-yɔrɔ" >
  9. ...
  10. </ul>
  11. </div> ye
  12. </div> ye
  1. <div kalasi = "donni-ɲɛnabɔli" >
  2. <div kalasi = "btn-kulu" >
  3. <button class = "btn jigin-yɔrɔ" data-toggle = "bɔyɔrɔ" >
  4. Wale
  5. <span kalasi = "karɛti" </span>
  6. </button> ye
  7. <ul kalasi = "dakun-yɔrɔ" >
  8. ...
  9. </ul>
  10. </div> ye
  11. <donni kalasi = "span2" id = "prependedDropdownButton" suguya = "sɛbɛn" >
  12. </div> ye
  1. <div class = "donni-donni-donni-falen" >
  2. <div kalasi = "btn-kulu" >
  3. <button class = "btn jigin-yɔrɔ" data-toggle = "bɔyɔrɔ" >
  4. Wale
  5. <span kalasi = "karɛti" </span>
  6. </button> ye
  7. <ul kalasi = "dakun-yɔrɔ" >
  8. ...
  9. </ul>
  10. </div> ye
  11. <donna kalasi = "span2" id = "appendedPrependedDropdownButton" suguya = "sɛbɛn" >
  12. <div kalasi = "btn-kulu" >
  13. <button class = "btn jigin-yɔrɔ" data-toggle = "bɔyɔrɔ" >
  14. Wale
  15. <span kalasi = "karɛti" </span>
  16. </button> ye
  17. <ul kalasi = "dakun-yɔrɔ" >
  18. ...
  19. </ul>
  20. </div> ye
  21. </div> ye

Segmented dropdown kuluw

  1. <fɔcogo>
  2. <div kalasi = "donni-ɲɛnabɔli" >
  3. <div kalasi = "btn-kulu" > ... </div>
  4. <doncogo suguya = "sɛbɛn" >
  5. </div> ye
  6. <div kalasi = "donni-falen" >
  7. <doncogo suguya = "sɛbɛn" >
  8. <div kalasi = "btn-kulu" > ... </div>
  9. </div> ye
  10. </form>

Ɲini sɛbɛn

  1. <form class = "fɔli-ɲini" >
  2. <div kalasi = "donni-falen" >
  3. <doncogo suguya = "sɛbɛn" kalasi = "span2 ɲinini-ɲininkali" >
  4. <butɔni suguya = "submit" kalasi = "btn" > Ɲini </button>
  5. </div> ye
  6. <div kalasi = "donni-ɲɛnabɔli" >
  7. <butɔni suguya = "submit" kalasi = "btn" > Ɲini </button>
  8. <doncogo suguya = "sɛbɛn" kalasi = "span2 ɲinini-ɲininkali" >
  9. </div> ye
  10. </form>

Kɔlɔsili kɛ sizing kan

Baara kɛ ni relative sizing classes ye i n’a fɔ .input-largewalima ka bɛn i ka inputs ma ni grid column sizes ye ni .span*classes ye.

Bloki nivo donnakow

Aw bɛ fɛn o fɛn <input>walima <textarea>fɛn dɔ kɛ a yɛrɛ ye i n’a fɔ fɛn min bɛ kɛ ni bloki nivo ye.

  1. <donna kalasi = "don-bolo-dakun" suguya = "sɛbɛn" yɔrɔ = " .don -bolo-dakun" >

Sizing (taamaʃyɛn) danfaralen

  1. <donna kalasi = "don-mini" suguya = "sɛbɛn" yɔrɔ = " .don -mini" >
  2. <donna kalasi = "don-misɛn" suguya = "sɛbɛn" yɔrɔ = " .don -misɛn" >
  3. <donna- kalasi = "don-minɛn" suguya = "sɛbɛn" yɔrɔ-yɔrɔ = ".don-minɛn " >
  4. <donna- kalasi = "donna-ba" suguya = "sɛbɛn" yɔrɔ = " .don -ba" >
  5. <donni kalasi = "don-xlarge" suguya = "sɛbɛn" yɔrɔ = ".don-xlarge" >
  6. <donna kalasi = "don-xxba" suguya = "sɛbɛn" yɔrɔ = ".don-xxba" >

Kungolow bɛ wuli!A bɔko nataw la, an bɛna nin daɲɛ-sɛbɛnni-kalansow baarakɛcogo caman sɛmɛntiya walasa u ka bɛn an ka butɔni hakɛw ma. Misali la, .input-largebɛna dɔ fara donta dɔ ka padding ni font-size kan.

Grid sizing (jatebɔlan) hakɛ

Baara kɛ ni .span1to .span12ye dontaw kama minnu bɛ bɛn jatebɔlanw hakɛ kelenw ma.

  1. <donna kalasi = "span1" suguya = "sɛbɛn" yɔrɔ = ".span1" >
  2. <donna kalasi = "span2" suguya = "sɛbɛn" yɔrɔ = ".span2" >
  3. <donna kalasi = "span3" suguya = "sɛbɛn" yɔrɔ = ".span3" >
  4. < kalanso sugandi = "span1" >
  5. ...
  6. </select> , o ye
  7. < kalanso sugandi = "span2" >
  8. ...
  9. </select> , o ye
  10. < kalanso sugandi = "span3" >
  11. ...
  12. </select> , o ye

Ni aw b’a fɛ ka grid donna caman sɔrɔ zana kelen kɔnɔ, aw bɛ baara kɛ ni .controls-rowmodificateur class ye walasa ka yɔrɔjan sɔrɔ cogo bɛnnen na . A bɛ donnakow Fɔ walasa ka yɔrɔ finmanw Dabɔ, ka dakun bɛnnenw Sìgi, ka Fɔɔnɔ jɛya.

  1. <div kalasi = "kunnafoni" >
  2. <donna kalasi = "span5" suguya = "sɛbɛn" yɔrɔ = ".span5" >
  3. </div> ye
  4. <div class = "kunnafoni-sɛbɛnw-kulu" >
  5. <donna kalasi = "span4" suguya = "sɛbɛn" yɔrɔ = ".span4" >
  6. <donna kalasi = "span1" suguya = "sɛbɛn" yɔrɔ = ".span1" >
  7. </div> ye
  8. ...

Donan minnu tɛ se ka ladilan

Donanw jira cogo la min tɛ se ka ladilan k’a sɔrɔ i ma baara kɛ ni sɛbɛnfura taamasiyɛn yɛrɛ ye.

Dɔw bɛ nafa don yan
  1. <span class = "don-xlarge uneditable-input" > Nafa dɔw yan </span>

Foroko walew

Foroko dɔ dabila ni wale kulu dɔ ye (butɔni). Ni u bilala a kɔnɔ .form-actions, butɔni bɛna wuli u yɛrɛma walasa ka bɛn ni foroko ɲɛminɛbagaw ye.

  1. <div kalasi = "fɔcogo-walew" >
  2. <button type = "submit" class = "btn btn-primary" > Yɛlɛmaw mara </button>
  3. <butɔni suguya = "butɔni" kalasi = "btn" > Cancel </button>
  4. </div> ye

Dɛmɛ sɛbɛn

Inline ani block level dɛmɛni dɛmɛ sɛbɛnni na min bɛ bɔ foroko kunkankow lamini na.

Dɛmɛ min bɛ sɔrɔ ɛntɛrinɛti kan

Inline dɛmɛ sɛbɛn
  1. <doncogo suguya = "sɛbɛn" ><span kalasi = "dɛmɛ-dakun kɔnɔ" > Layini kɔnɔ dɛmɛ sɛbɛnni </span>

Dɛmɛn bali

Dɛmɛ sɛbɛn bloki jan dɔ min bɛ kari tigɛli kura kan ani min bɛ se ka tɛmɛ zana kelen kan.
  1. <input type = "text" ><span class = "help-block" > Dɛmɛ sɛbɛn bloki janyalen min bɛ kari tigɛli kura kan ani a bɛ se ka janya ka tɛmɛ zana kelen kan. </span> , o ye

Foroko kɔrɔsili cogoyaw

Aw bɛ hakilinaw di baarakɛlaw ma walima taamakɛlaw ma ni hakilina jɔnjɔnw ye minnu bɛ fɔ sɛbɛnw kɔlɔsili ni sɛbɛnniw kan.

Donni sinsinnan

An bɛ outlinecogoya dafalenw bɔ foroko kɔrɔsibaga dɔw kan ka a box-shadowkɛ a nɔ na :focus.

  1. <donna kalasi = "don-xlarge" id = "focusedInput" suguya = "texte" nafa = "Nin ye sinsinnan ye..." >

Donanw minnu tɛ tiɲɛ ye

Style inputs via default browser baarakɛcogo ni :invalid. A jira type, ka fɛn dɔ fara a kan requiredni foro tɛ sugandi ye, ani (ni a bɛ se ka kɛ) a jira pattern.

O tɛ sɔrɔ Internet Explorer 7-9 bɔko la k’a sababu kɛ dɛmɛbaliya ye CSS pseudo selectors la.

  1. <donna kalasi = "span3" suguya = "email" wajibiyalen >

Donanw minnu bɛ se ka baara kɛ

A bɛ fɛn in Fàra disableddonta dɔ kan walasa ka baarakɛla ka donta bali ani ka ɲɛda cogoya wɛrɛ Daminɛ dɔɔnin.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" yɔrɔ = "Dɔnni balilen yan..." balilen >

Validation (dafalen) b’a jira

Bootstrap kɔnɔ, sɛgɛsɛgɛli kɛcogoyaw bɛ sɔrɔ filiw, lasɔminiw, kunnafoniw, ani ɲɛtaa cikanw kama. Walasa ka baara kɛ ni a ye, aw bɛ kalansen bɛnnen fara a lamini .control-groupkan .

N’a sɔrɔ fɛn dɔ ma ɲɛ
Aw ye fili in latilen
Baarakɛla tɔgɔ bɛ ta
Woohoo!
  1. <div class = "kunnafoni-kulu lasɔmini" >
  2. <label class = "control-label" for = "donniWarning" > Don ni lasɔmini ye </label>
  3. <div kalasi = "kunnafoni" >
  4. <doncogo suguya = "sɛbɛn" id = "doncogoLasɔmini" >
  5. <span class = "dɛmɛ-sira" > a bɛ se ka kɛ ko fɛn dɔ ma ɲɛ </span>
  6. </div> ye
  7. </div> ye
  8.  
  9. <div class = "kunnafoni-kulu fili" >
  10. <label class = "control-label" for = "donniError" > Donni ni fili ye </label>
  11. <div kalasi = "kunnafoni" >
  12. <doncogo suguya = "sɛbɛnni" id = "donna fili" >
  13. <span class = "dɛmɛ-sira" > Aw ye fili in latilen </span>
  14. </div> ye
  15. </div> ye
  16.  
  17. <div class = "kunnafoni-kulu kunnafoni" >
  18. <label class = "contrôle-label" for = "inputInfo" > Don ni kunnafoni ye </label>
  19. <div kalasi = "kunnafoni" >
  20. <doncogo suguya = "sɛbɛn" id = "donnakunnafoni" >
  21. <span class = "dɛmɛ-yɔrɔ" > Baarakɛla tɔgɔ minɛna kaban </span>
  22. </div> ye
  23. </div> ye
  24.  
  25. <div class = "kunnafoni-kulu ka ɲɛtaa" >
  26. <label class = "control-label" for = "donniSuccess" > Donni ni ɲɛtaa ye </label>
  27. <div kalasi = "kunnafoni" >
  28. <donni suguya = "sɛbɛn" id = "donniSɔrɔ" >
  29. <span kalasi = "dɛmɛ-kɔnɔ" > Woohoo! </span> , o ye
  30. </div> ye
  31. </div> ye

Butɔnw minnu bɛ daminɛ

Butɔn cogoyaw bɛ se ka kɛ fɛn o fɛn na ni .btnkalan bɛ kɛ. Nka, a ka c'a la i b'a fɛ ka ninnu waleya dɔrɔn <a>ani <button>elements for the best rendering.

Butɔn kalasi="" Cogojirali
btn Butɔn gris standard ni gradient ye
btn btn-primary A bɛ girinya yecogo wɛrɛ di ani ka wale fɔlɔ jira butɔni kulu dɔ kɔnɔ
btn btn-info A bɛ baara kɛ ni a ye i n’a fɔ fɛn wɛrɛ min bɛ kɛ ka kɛɲɛ ni cogoya kɔrɔw ye
btn btn-success A b’a jira ko wale kɛra min ɲɛnabɔra walima min kɛra koɲuman
btn btn-warning A b’a jira ko kɔlɔsili ka kan ka kɛ ni nin wale in ye
btn btn-danger A bɛ wale dɔ jira min bɛ se ka kɛ farati ye walima min bɛ se ka kɛ wale jugu ye
btn btn-inverse Butɔn dibiman bɛ ɲɔgɔn falen-falen, a tɛ siri kɔrɔko wale walima baarakɛcogo dɔ la
btn btn-link Butɔn dɔ sinsin kosɛbɛ i kɛtɔ k’a kɛ i n’a fɔ jɛgɛnsira ka sɔrɔ ka butɔni kɛcogo mara

Cross browser ka baarakɛcogo ɲuman

IE9 tɛ kɔkanna sɛgɛsɛgɛliw sɛnɛ nkɔni bulamaw kan, o de la an b’a bɔ. O ni ɲɔgɔn cɛ, IE9 bɛ jankifie (fɛnɲɛnɛmaw) balilenw button, ka sɛbɛnniw Kɛ gri ye ni sɛbɛnni-dugukolo jugu ye an tɛ Se ka min Labɛn.

Butɔnw hakɛw

Fancy butɔni belebelebaw walima fitininw? Aw bɛ .btn-large, .btn-small, walima .btn-minifara a kan walasa ka bonya wɛrɛw sɔrɔ.

  1. <p> ye
  2. <button class = "btn btn-ba btn-primaire" suguya = "button" > Butɔnba </button>
  3. <button class = "btn btn-large" suguya = "button" > Butɔnba </button>
  4. </p> , o ye
  5. <p> ye
  6. <button class = "btn btn-primary" suguya = "button" > Butɔn fɔlɔ </button>
  7. <button class = "btn" suguya = "button" > Butɔn fɔlɔ </button>
  8. </p> , o ye
  9. <p> ye
  10. <button class = "btn btn-misɛnnin btn-fɔlɔ" suguya = "button" > Butɔn fitinin </button>
  11. <button class = "btn btn-small" suguya = "button" > Butɔn fitinin </button>
  12. </p> , o ye
  13. <p> ye
  14. <butɔni kalasi = "btn btn-mini btn-fɔlɔ" suguya = "butɔni" > Mini butɔni </button>
  15. <butɔni kalasi = "btn btn-mini" suguya = "butɔni" > Mini butɔni </button>
  16. </p> , o ye

Aw bɛ bloki nivo butɔniw dilan—minnu bɛ bangebaga dɔ bonya bɛɛ lajɛlen na—aw kɛtɔ ka .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" suguya = "butɔni" > Blɔki nivo butɔni </button>
  2. <button class = "btn btn-large btn-block" suguya = "button" > Block nivo butɔni </button>

Hakilila-jɔ-cogo

Aw bɛ butɔni kɛ i n’a fɔ u tɛ se ka digi ni u bɛ segin kɔfɛ 50%.

Ankɔri élément

.disabledKalanso fara butɔni <a>kan.

Lien fɔlɔ Ka tugu

  1. <a href = "#" kalasi = "btn btn-ba btn-fɔlɔ balilen" > Jɛɲɔgɔnya fɔlɔ </a>
  2. <a href = "#" kalasi = "btn btn-large balilen" > Jɛɲɔgɔnya </a>

Kungolow bɛ wuli!An bɛ baara Kɛ .disabledni nafa-kalasi ye yan, i n’a fɔ .activekalasi jɛlen, o la, daɲɛ fɔlɔ si tɛ wajibiya. Ani fana, nin kalan in ye ɲɛnajɛko dɔrɔn de ye; aw ka kan ka baara kɛ ni JavaScript ladamulen ye walasa ka jɛgɛnsira bali yan.

Butɔn yɔrɔ

Aw bɛ o disabledjogo in fara <button>butɔni kan.

  1. <button type = "button" class = "btn btn-large btn-fɔlɔ balilen" disabled = "butɔni" > Butɔn fɔlɔ </button>
  2. <butɔni suguya = "butɔni" kalasi = "btn btn-large" balilen > Butɔn < /butɔni>

Kalanso kelen, tag caman

Baara kɛ ni .btnkalan ye <a>, <button>, walima <input>fɛn dɔ kan.

Ka tugu
  1. <a kalasi = "btn" href = "" > Jɛɲɔgɔnya </a>
  2. <button class = "btn" suguya = "submit" > Butɔn </button>
  3. <donni kalasi = "btn" suguya = "butɔni" nafa = "Don" >
  4. <donna kalasi = "btn" suguya = "ci" nafa = "Sib" >

I n’a fɔ wale ɲuman, i k’a ɲini ka fɛn in bɛn i ka ko kɛlenw ma walasa ka a jira ko cross-browser rendering bɛ bɛn. Ni input, baara kɛ ni an <input type="submit">ye i ka butɔni kama.

Kalansow fara <img>element dɔ kan walasa ka jaw cogoya nɔgɔya poroze o porozɛ kɔnɔ.

140x140 ye 140x140 ye 140x140 ye
  1. <img src = "..." kalasi = "img-lamini" >
  2. <img src = "..." kalasi = "img-sɛrɛkili" >
  3. <img src = "..." kalasi = "img-polaroyidi" >

Kungolow bɛ wuli! .img-roundedani .img-circleu tɛ baara kɛ IE7-8 kɔnɔ ka da dɛmɛnbaliya kan border-radius.

Ikon glyphes (Glifew).

140 taamasiyɛnw bɛ sɔrɔ sprite cogo la, minnu bɛ sɔrɔ ni gris dibiman ye (default) ani fin, Glyphicons ye minnu di .

  • ikomi-gilasi
  • ikomi-muziki
  • ikomi-ɲini
  • ikomi-enveloppe
  • ikomi-dusukun
  • ikomi-dolow
  • iko-dolow-lankolon
  • ikomi-baarakɛla
  • ikomi-filimu
  • ikomi-nan-ba
  • ikomi-th
  • ikomi-th-list
  • ikomi-ok
  • ikomi-bɔ
  • ikomi-zoom-in
  • ikomi-zoom-out
  • ikomi-dafalen
  • ikomi-siginiden
  • ikomi-cog
  • ikomi-nɔgɔ
  • ikomi-so
  • ikomi-filen
  • ikomi-waati
  • ikomi-sira
  • ikomi-télécharger-alt
  • ikomi-télécharger
  • ikomi-upload
  • ikomi-don-yɔrɔ
  • ikomi-tulon-sɛrɛkili
  • iko-segin-ka-bɔ
  • ikomi-lafiɲɛbɔ
  • ikomi-list-alt
  • ikomi-blon
  • ikomi-dapo
  • ikomi-kungolodilanw
  • ikomi-volume-off
  • ikomi-volume-down
  • ikomi-volume-up
  • iko-qrkode ye
  • ikomi-baro
  • ikomi-tagi
  • taamasiyɛn-taamaʃyɛnw
  • taamasiyɛn-gafe
  • taamasiyɛn-sɛbɛnni-sɛbɛn
  • taamasiyɛn-sɛbɛnni
  • ikomi-kamera
  • taamasiyɛn-sɛbɛnni
  • ikomi-bold
  • ikomi-italiki
  • taamasiyɛn-sɛbɛnni-janya
  • taamasiyɛn-sɛbɛnni-janya
  • taamasiyɛn-labɛn-nɛgɛbere
  • taamasiyɛn-labɛn-santiri
  • ikomi-align-niman fɛ
  • ikomi-align-justify
  • taamasiyɛn-lisi
  • ikomi-indent-numan fɛ
  • ikomi-indent-niman fɛ
  • ikomi-ɲɛ-waati-wideyo
  • ikomi-ja
  • iko-kɛrɛn
  • taamasiyɛn-karti-taamaʃyɛn
  • taamasiyɛn-labɛnni
  • ikomi-tint
  • taamasiyɛn-labɛnni
  • ikomi-jatebɔ
  • ikomi-sɛgɛsɛgɛli
  • ikomi-yɔrɔ-yɔrɔ-ko
  • ikomi-sen-kɔfɛ
  • iko-teliya-kɔfɛ
  • ikomi-kɔfɛ
  • iko-fɔli
  • taamasiyɛn-lafiɲɛbɔ
  • ikomi-dabila
  • ikomi-ɲɛnajɛ
  • ikomi-teliya-ka-ɲɛmaa
  • ikomi-sen-ɲɛ-ɲɛmaa
  • ikomi-bɔn
  • ikomi-chevron-numan fɛ
  • ikomi-chevron-niman fɛ
  • ikomi-plus-taamaʃyɛn
  • ikomi-minus-taamaʃyɛn
  • taamasiyɛn-bɔ-taamaʃyɛn
  • iko-ok-taamaʃyɛn
  • taamasiyɛn-ɲininkali-taamaʃyɛn
  • taamasiyɛn-kunnafoni-taamasenɲɛ
  • ikomi-ekran-ja
  • ikomi-bɔ-sɛrɛkili
  • iko-ok-sɛrɛkili
  • ikomi-ban-sɛrɛkili
  • iko-nɛgɛ-nɛgɛjuru-nɛgɛjuru
  • ikomi-tɛgɛ-niman fɛ
  • ikomi-bɛɛ-sanfɛ
  • taamasiyɛn-yɔrɔ-jigin-ka-bɔ
  • ikomi-jate-alt
  • ikomi-hakɛ-dafalen
  • ikomi-hakɛ-misɛnnin
  • ikomi-plus
  • ikomi-minus
  • ikomi-dolow
  • taamasiyɛn-ɲɛnajɛ-taamaʃyɛn
  • ikomi-nilifɛn
  • ikomi-bulu
  • ikomi-tasuma
  • ikomi-ɲɛ-da-bɔ
  • iko-ɲɛ-kɛrɛfɛ
  • taamasiyɛn-lasɔmini-taamaʃyɛn
  • ikomi-plan
  • ikomi-kalandriya
  • ikomi-kɛrɛnkɛrɛnnenya la
  • ikomi-kumasen
  • ikomi-magnet
  • ikomi-chevron-up ye
  • ikomi-chevron-jigin-ka-bɔ
  • ikomi-retweet
  • ikomi-sanni-wotoro
  • taamasiyɛn-foli-dadon
  • taamasiyɛn-foli-da wulilen
  • ikomi-hakɛ-yɔrɔ-yɔrɔ
  • ikomi-hakɛ-yɔrɔ-yɔrɔ-ko-yɔrɔ
  • ikomi-hdd
  • ikomi-bullhorn (ɲɛnajɛ-bullhorn).
  • ikomi-bɛlɛ
  • ikomi-seereyaw
  • ikomi-bolokɔninw-kɔnɔ
  • ikomi-bolokɔninw-kɔnɔ
  • ikomi-bolo-niman fɛ
  • ikomi-bolo-nɛgɛjuru
  • ikomi-bolo-sanfɛ
  • ikomi-bolo-la-jigin
  • ikoni-sɛrɛkili-tɛgɛ-niman fɛ
  • ikomi-sɛrɛkili-nɛgɛ-nɛgɛbere
  • ikomi-sɛrɛkili-sɛrɛkili-sanfɛ
  • ikomi-sɛrɛkili-jigin-ka-bɔ
  • ikomi-dugukolo
  • ikomi-kɔlɔsili
  • ikomi-baarakɛlaw
  • ikomi-filɛri
  • ikomi-baganmarayɔrɔ
  • ikomi-ekran dafalen

Glyphicons ka fɛnsɛbɛnni

Glyphicons Halflings tɛ sɔrɔ fu la cogoya la, nka labɛn dɔ kɛra Bootstrap ni Glyphicons dabɔbagaw cɛ, o y’a to o bɛ se ka kɛ, musaka si tɛ i la i n’a fɔ baarakɛlaw. Barika la, an b’a ɲini aw fɛ aw ka ladɛrɛsi dɔ fara a kan min bɛ se ka kɛ ka segin Glyphicons kan ni a bɛ se ka kɛ tuma o tuma.


Baara kɛcogo

Taamaʃyɛnw bɛɛ bɛ taamasiyɛn dɔ de wajibiya <i>ni kalasi kɛrɛnkɛrɛnnen ye, min bɛ daminɛ ni icon-. Walasa ka baara kɛ ni nin kode in ye, aw bɛ nin kode in bila yɔrɔ o yɔrɔ la:

  1. <i kalasi = " taamasiyɛn-ɲini" </i>

Fɛɛrɛw fana bɛ yen minnu bɛ sɔrɔ taamasiyɛn inversé (nɛrɛma) kama, minnu labɛnna ni kalasi kelen wɛrɛ ye. An bɛna nin kalan in waleya kɛrɛnkɛrɛnnenya la hover ani active states kan nav ani dropdown links kama.

  1. <i kalasi = " taamasiyɛn-ɲini taamasiyɛn-finman" </i>

Kungolow bɛ wuli!Ni aw bɛ baara kɛ ni sɛbɛnniw sɛrɛw kɛrɛfɛ, i n’a fɔ butɔni walima nav jɛgɛnsira la, aw ye aw jija ka yɔrɔ dɔ to <i>taamasiyɛn kɔfɛ walasa ka yɔrɔ janya ka ɲɛ.


Icon misaliw

Baara kɛ n’u ye butɔni kɔnɔ, butɔni kuluw kɔnɔ baarakɛminɛn dɔ kama, navigatiɔn, walima foroko dontaw la minnu bilalen bɛ ka kɔn.

Butɔnw

Butɔn kulu min bɛ butɔni baarakɛminɛn dɔ kɔnɔ
  1. <div kalasi = "btn-baarakɛminɛnw" >
  2. <div kalasi = "btn-kulu" >
  3. <a kalasi = "btn" href = "#" ><i kalasi = "taamaʃyɛn-labɛn-nɛgɛjuru" </i></a>
  4. <a kalasi = "btn" href = "#" ><i kalasi = "taamaʃyɛn-labɛn-cɛmancɛ" </i></a>
  5. <a kalasi = "btn" href = "#" ><i kalasi = "taamaʃyɛn-labɛn-niman" </i></a>
  6. <a kalasi = "btn" href = "#" ><i kalasi = "taamasenɲɛ-labɛn-joli" </i></a>
  7. </div> ye
  8. </div> ye
Dropdown bɛ butɔni kulu dɔ kɔnɔ
  1. <div kalasi = "btn-kulu" >
  2. <a kalasi = "btn btn-primary" href = "#" ><i kalasi = "taamaʃyɛn-baarakɛla taamasiyɛn-nɛrɛma" </i> Baarakɛla </a>
  3. <a kalasi = "btn btn-fɔlɔ-fɔlɔ-dakun-toggle" data-toggle = "dɔrɔgu" href = "#" ><span kalasi = "caret" ></span></a>
  4. <ul kalasi = "dakun-yɔrɔ" >
  5. <li><a href = "#" ><i kalasi = "ikɔni-pensili" </i> Labɛn </a></li>
  6. <li><a href = "#" ><i kalasi = "ikɔni-nɔgɔ" </i> </a></li>
  7. <li><a href = "#" ><i kalasi = " taamasiyɛn-ban-sɛrɛkili" </i> Ban </a></li>
  8. <li kalasi = "jatebɔlan" </li>
  9. <li><a href = "#" ><i kalasi = "i" </i> ka ɲɛmɔgɔyaso kɛ </a></li>
  10. </ul>
  11. </div> ye
Butɔnw hakɛw
  1. <a kalasi = "btn btn-ba" href = "#" ><i kalasi = "taama-dolow" </i> dolow </a>
  2. <a kalasi = "btn btn-misɛnnin" href = "#" ><i kalasi = "taama-dolow" </i> dolow </a>
  3. <a kalasi = "btn btn-mini" href = "#" ><i kalasi = "taama-dolow" </i> dolow </a>

Navigasiyɔn (navigation).

  1. <ul kalasi = "nav nav-list" >
  2. <li kalasi = "baarakɛ" ><a href = "#" ><i kalasi = "ikɔni-so taamasiyɛn-nɛrɛma" </i> So </a></li>
  3. <li><a href = "#" ><i kalasi = " taamasiyɛn-gafe" </i> gafemarayɔrɔ </a></li>
  4. <li><a href = "#" ><i kalasi = "ikɔni-pensili" </i> Baarakɛminɛnw </a></li>
  5. <li><a href = "#" ><i kalasi = "i" </i> Misc </a></li>
  6. </ul>

Foroko forow

  1. <div kalasi = "kunnafoni-kulu" >
  2. <label class = "kunnafoni-label" for = "inputIcon" > Email ladɛrɛsi </label>
  3. <div kalasi = "kunnafoni" >
  4. <div kalasi = "donni-ɲɛnabɔli" >
  5. <span kalasi = " farankan" ><i kalasi = "ikɔni-enveloppe" ></i></span>
  6. <donna kalasi = "span2" id = "donnaIcon" suguya = "sɛbɛn" >
  7. </div> ye
  8. </div> ye
  9. </div> ye