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: noneagbalị 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 faịlụ <button>.

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

Igbe nlele na bọtịnụ redio

.buttonEnwere ike itinye ụdị Bootstrap na ihe ndị ọzọ, dị ka <label>s, iji nye igbe nlele ma ọ bụ bọtịnụ ụdị redio. Tinye data-toggle="buttons"na .btn-groupbọtịnụ ndị ahụ gbanwetụrụ iji mee ka omume ha na-agbanwe site na Javascript wee tinye .btn-group-togglena ịke <input>s n'ime bọtịnụ gị. Mara na ị nwere ike ịmepụta bọtịnụ ntinye kwadoro otu ma ọ bụ otu ha.

A na-emelite steeti elele maka bọtịnụ ndị a naanị site na clickmmemme na bọtịnụ. Ọ bụrụ na ị na-eji usoro ọzọ iji kwalite ndenye ahụ—dịka ọmụmaatụ, iji <input type="reset">ma ọ bụ site na iji aka tinye akụrụngwa ntinye checked- ị ga-achọ ka ị gbanye .activeya na <label>aka gị.

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.