Abɔtawo ƒe ƒuƒoƒo

Zã Bootstrap ƒe abɔta ƒe atsyã tɔxɛwo na nuwɔna le nuŋlɔɖiwo, dzeɖonyawo, kple bubuwo me kple kpekpeɖeŋu na lolome, nɔnɔme, kple bubuwo geɖe.

Kpɔɖeŋuwo

Bootstrap la lɔ abɔta ƒe atsyã geɖe siwo woɖo do ŋgɔ ɖe eme, wo dometɔ ɖesiaɖe wɔa eya ŋutɔ ƒe gɔmesese ƒe taɖodzinu, kple kpeɖeŋutɔ ʋee aɖewo siwo wotsɔ ƒu gbe ɖe eme hena dziɖuɖu geɖe wu.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Tsɔ nuŋɔŋlɔwo babla nawɔ dɔ

Ne mèdi be abɔta ƒe nuŋɔŋlɔa naxatsa o la, àte ŋu atsɔ .text-nowrapklass la akpe ɖe abɔta la ŋu. Le Sass me la, àteŋu aɖoe $btn-white-space: nowrapbe yeaxe mɔ ɖe nuŋɔŋlɔ ƒe babla nu na abɔti ɖesiaɖe.

Abɔta ƒe dzesiwo

Wotrɔ .btnasi le klassawo ŋu be woazã kple <button>element la. Gake àteŋu azã klass siawo ɖe <a>alo <input>elements hã dzi (togbɔ be web-browser aɖewo ate ŋu awɔ gɔmeɖeɖe si to vovo vie ŋudɔ hã).

Ne èle abɔta ƒe hatsotsowo zãm ɖe <a>nusiwo wozãna tsɔ dzea axaa me dɔwɔwɔ gɔme (abe nyatakakawo ƒe ƒuƒoƒo ene), tsɔ wu be woatsɔ kadodo aɖo axa yeyewo alo akpa siwo le axa si li fifia me la, ele be woana kadodo siawo a role="button"be woaɖe woƒe taɖodzinu afia mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu abe screen nuxlẽmɔ̃wo.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Gblɔ nyatakakadzraɖoƒea ƒe dzesiwo

Èhiã abɔta, gake menye megbe amadede kpekpe siwo wotsɔ vɛ oa? .btn-outline-*Tsɔ esiwo nàtsɔ aɖe megbenɔnɔmetatawo kple amadedewo katã ɖa le abɔta ɖesiaɖe dzi la ɖɔ li tɔtrɔ ƒe hatsotso siwo woɖo ɖi la.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Agbɔsɔsɔmewo

Ðe nèdi be yeakpɔ abɔta siwo lolo wu alo esiwo le sue wua? Tsɔe kpe ɖe eŋu .btn-lgalo .btn-smna lolome bubuwo.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

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

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Nɔnɔme si le dɔ wɔm

Woazi abɔtawo dzi ne wole dɔ wɔm kple megbenya si do viviti wu, liƒo si do viviti wu, eye ne wowɔ vɔvɔliwo ŋudɔ la, vɔvɔli si wotsɔ de eme. Mehiã be woatsɔ klass aɖe akpe ɖe <button>s ŋu o elabena wozãa pseudo-class . Ke hã, àteŋu azi dzedzeme si le dɔ wɔm ma ke dzi kokoko kple .active(eye nàde aria-pressed=“true”nɔnɔmea eme) nenye be ehiã be nàgbugbɔ nɔnɔmea awɔ le ɖoɖowɔɖi me.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Nuwɔametɔ ƒe nɔnɔme

Na abɔtawo nadze abe ɖe womele dɔ wɔm o ene to disabledboolean nɔnɔme la tsɔtsɔ kpe ɖe <button>element ɖesiaɖe ŋu me.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Nuwɔametɔ ƒe abɔta siwo zãa <a>element la wɔa nu to vovo vie:

• <a>s medoa alɔ disablednɔnɔmea o, eyata ele be nàtsɔ .disabledklass la akpe ɖe eŋu be wòadze abe nuwɔametɔ ene le nukpɔkpɔ me.
• Wotsɔ atsyã aɖewo siwo asɔ na etsɔme la kpe ɖe eŋu be woawɔ nusiwo katã pointer-eventsle seke ƒe abɔtawo dzi la nuwɔametɔwoe. Le browser siwo doa alɔ nɔnɔme ma me la, màkpɔ cursor si wowɔ nuwɔametɔe la kura o.
• <a>Ele be nuwɔametɔ ƒe abɔta siwo zãa nɔnɔmea nanɔ eme aria-disabled="true"be wòafia nɔnɔme si me element la le na kpekpeɖeŋu mɔ̃ɖaŋunuwo.
• <a> Mele be nɔnɔmea nanɔ abɔta siwo zãa nuwɔametɔwo la me o href.

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Kadodo ƒe dɔwɔwɔ ƒe nuxlɔ̃ame

Be nàƒo nu tso nɔnɔme siwo me wòle be nàdzra hrefnɔnɔmea ɖo ɖe kadodo si wowɔ nuwɔametɔ dzi la, .disabledklass la zãna pointer-events: nonetsɔ dzea agbagba be yeawɔ kadodo ƒe dɔwɔwɔ le <a>s me nuwɔametɔe. De dzesii be womeɖo CSS ƒe nɔnɔme sia ɖe ɖoɖo nu na HTML haɖe o, gake egbegbe web-browserwo katã doa alɔe. Tsɔ kpe ɖe eŋu la, le browser siwo doa alɔ gɔ̃ hã me la, womekpɔa pointer-events: noneŋusẽ ɖe keyboard dzi yiyi dzi o, si fia be keyboard zãla siwo kpɔa nu kple mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu zãlawo ate ŋu awɔ kadodo siawo ŋudɔ kokoko. Eyata be nànɔ dedie la, tsɔ kpe ɖe aria-disabled="true", hã de tabindex="-1"nɔnɔme aɖe kadodo siawo me be woaxe mɔ na wo be woagaxɔ keyboard ƒe susu o, eye nàzã JavaScript si wowɔ ɖe ɖoɖo nu atsɔ awɔ woƒe dɔwɔwɔ ŋudɔ kura.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Abɔta ƒe kpeɖeŋutɔ

Wɔ geɖe wu kple abɔtawo. Dzɔdzɔmeŋusẽ ƒe abɔta gblɔ alo wɔ abɔta ƒe ƒuƒoƒowo na akpa geɖe abe dɔwɔnu ƒe ʋuƒo ene.

Trɔ asi le dukɔwo ŋu

Tsɔ kpe ɖe eŋu data-toggle="button"be nàtrɔ asi le abɔta aɖe ƒe activenɔnɔme ŋu. Ne èle asi trɔm le abɔta aɖe ŋu do ŋgɔ la, ele be nàtsɔ asi akpe ɖe .activeklass la ŋu eye aria-pressed="true" nàtsɔe akpe ɖe <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Dzesiɖaka kple radio ƒe dzesiwo

Woateŋu awɔ Bootstrap ƒe .buttonatsyãwo ŋudɔ ɖe nu bubuwo ŋu, abe <label>s ene, be woana dzesiɖaka alo radio ƒe atsyã ƒe abɔta ƒe tɔtrɔ. Tsɔe kpe data-toggle="buttons"ɖe a .btn-groupsi me abɔta mawo siwo ŋu wotrɔ asi le la le ŋu be woana woƒe tɔtrɔ ƒe nuwɔna nawɔ dɔ to JavaScript dzi eye nàtsɔ s siwo le wò abɔtawo me ƒe .btn-group-toggleatsyã akpe ɖe eŋu. De dzesii be àte ŋu awɔ abɔta ɖeka siwo ŋu ŋusẽ le alo woƒe ƒuƒoƒowo.<input>

Wotrɔa asi le nɔnɔme si wokpɔ na abɔta siawo ŋu to clicknudzɔdzɔ si le abɔta la dzi ko dzi. Ne èzã mɔnu bubu tsɔ trɔ asi le nyawo tsɔtsɔ de eme ŋu—le kpɔɖeŋu me, kple <input type="reset">alo to asiwɔwɔ ɖe nyawo tsɔtsɔ de eme ƒe checkednɔnɔme ŋudɔwɔwɔ me—la, ahiã be nàtrɔ asi .activele nusi wotsɔ de eme la <label>ŋu.

De dzesii be abɔta siwo wodo ŋgɔ la abia be nàtsɔ asi akpe .activeklass la ɖe nyawo tsɔtsɔ de eme ƒe <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Mɔnuwo