Source

Bọtịnụ

Jiri ụdị bọtịnụ omenala Bootstrap maka omume n'ụdị, mkparịta ụka na ndị ọzọ na nkwado maka ọtụtụ nha, steeti na ndị ọzọ.

Ihe atụ

Bootstrap gụnyere ọtụtụ ụdị bọtịnụ eburu ụzọ kọwaa, nke ọ bụla na-eje ozi ebumnuche nke ya, yana mgbakwunye ole na ole tụbara maka njikwa ọzọ.

<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>
Na-eme ka ọ pụta ìhè na teknụzụ enyemaka

Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .sr-onlyklaasị.

Mkpado bọtịnụ

Emebere .btnklaasị ndị ahụ ka ejiri <button>mmewere mee ihe. Agbanyeghị, ị nwekwara ike iji klaasị ndị a na <a>ma ọ bụ <input>ihe (n'agbanyeghị na ụfọdụ ihe nchọgharị nwere ike itinye ntụgharị dịtụ iche).

Mgbe ị na-eji klaasị bọtịnụ na <a>ihe ndị a na-eji kpalite ọrụ n'ime ibe (dị ka ọdịnaya dara ada), kama ijikọ na ibe ọhụrụ ma ọ bụ ngalaba dị n'ime ibe dị ugbu a, ekwesịrị inye njikọ ndị a role="button"iji kwupụta ebumnuche ha nke ọma maka teknụzụ enyemaka dị ka. ndị na-agụ ihuenyo.

Njikọ 
<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">

bọtịnụ ndetu

Ịchọrọ bọtịnụ, mana ọ bụghị agba ndabere dị egwu ha na-eweta? Dochie klaasị mgbanwe ndabara na nke .btn-outline-*iji wepu onyonyo na agba niile na bọtịnụ ọ bụ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>

Nha

Ị na-achọ bọtịnụ buru ibu ma ọ bụ obere? Tinye .btn-lgma ọ bụ .btn-smmaka nha ndị ọzọ.

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

Mepụta bọtịnụ mgbochi mgbochi-ndị na-agbatị obosara nke nne na nna-site na ịgbakwunye .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>

Steeti nọ n'ọrụ

Bọtịnụ ga-apụta na a pịara ya (nwere okirikiri gbara ọchịchịrị, oke gbara ọchịchịrị, na ndò inset) mgbe ọ na-arụ ọrụ. Ọ dịghị mkpa ịgbakwunye otu klas na <button>s ka ha na-eji pseudo-class . Otú ọ dị, ị ka nwere ike ịmanye otu ọdịdị ahụ na-arụ ọrụ na .active(ma tinye aria-pressed="true"àgwà) ọ bụrụ na ịchọrọ ịmegharị steeti ahụ na mmemme.

Njikọ mbụ Njikọ 
<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>

Ọnọdụ nkwarụ

Mee ka bọtịnụ yie ihe adịghị arụ ọrụ site na ịgbakwunye njirimara disabledboolean na ihe ọ <button>bụla.

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

Bọtịnụ ndị nwere nkwarụ na-eji <a>mmewere na-akpa àgwà dịtụ iche:

  • <a>s anaghị akwado disablednjirimara ahụ, yabụ ị ga-agbakwunyerịrị .disabledklas ahụ iji mee ka ọ dị ka ọ nweghị nkwarụ.
  • Agụnyere ụfọdụ ụdị enyi na enyi n'ọdịnihu iji gbanyụọ ihe niile pointer-eventsna bọtịnụ arịlịka. Na ihe nchọgharị na-akwado akụrụngwa ahụ, ị ​​gaghị ahụ cursor nwere nkwarụ ma ọlị.
  • Bọtịnụ ndị nwere nkwarụ kwesịrị ịgụnye aria-disabled="true"njirimara iji gosi ọnọdụ nke mmewere na teknụzụ enyemaka.
Njikọ mbụ Njikọ 
<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>

Klas .disabledna-eji pointer-events: nonenwaa gbanyụọ ọrụ njikọ nke <a>s, mana akụrụngwa CSS ahụ ahazibeghị nke ọma. Na mgbakwunye, ọbụlagodi na ihe nchọgharị na-akwado pointer-events: none, igodo igodo ahụ ka na-emetụtaghị ya, nke pụtara na ndị ọrụ ahụigodo ahụ na ndị ọrụ teknụzụ enyemaka ka ga-enwe ike ịgbalite njikọ ndị a. Ya mere, ka ọ dị mma, tinye tabindex="-1"àgwà na njikọ ndị a (iji gbochie ha ịnweta mgbado ahụigodo) wee jiri Javascript omenala iji gbanyụọ ọrụ ha.

Ngwa mgbakwunye bọtịnụ

Jiri bọtịnụ mee ihe ndị ọzọ. Bọtịnụ njikwa na-ekwu ma ọ bụ mepụta otu bọtịnụ maka ihe ndị ọzọ dị ka ogwe ngwaọrụ.

Tụgharịa steeti

Tinye data-toggle="button"ka ịgbanwee ọnọdụ bọtịnụ active. Ọ bụrụ na ị na-ebu ụzọ na-atụgharị bọtịnụ, ị ga-eji aka tinye .activeklas na aria-pressed="true" na <button>.

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

Checkbox and radio buttons

Bootstrap’s .button styles can be applied to other elements, such as <label>s, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the <input>s within your buttons. Note that you can create single input-powered buttons or groups of them.

The checked state for these buttons is only updated via click event on the button. If you use another method to update the input—e.g., with <input type="reset"> or by manually applying the input’s checked property—you’ll need to toggle .active on the <label> manually.

Rịba ama na bọtịnụ enyochagoro mbụ chọrọ ka ị jiri aka tinye .activeklas ahụ na ntinye <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Ụzọ

Usoro Nkọwa
$().button('toggle') Tụgharịa steeti. Na-enye bọtịnụ ka ọ dị ka agbanyere ya.
$().button('dispose') Na-emebi bọtịnụ mmewere.