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>

Gbanyụọ mkpuchi ederede

Ọ bụrụ na ịchọghị ka ederede bọtịnụ ahụ kechie, ị nwere ike itinye .text-nowrapklas ahụ na bọtịnụ ahụ. Na Sass, ị nwere ike ịtọ $btn-white-space: nowrapka gbanyụọ mpịachi ederede maka bọtịnụ ọ bụla.

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.

<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 mgbe ọ na-arụ ọrụ nwere okirikiri gbara ọchịchịrị, oke gbara ọchịchịrị, yana, mgbe agbanyere onyinyo, onyinyo inset. Ọ 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.

<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ụ na-eji <a>kwesịrị ịgụnye aria-disabled="true"njirimara iji gosi ọnọdụ nke mmewere na teknụzụ enyemaka.
• Bọtịnụ ndị nwere nkwarụ na-eji <a> ekwesịghị ịgụnye hrefnjirimara.

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

Akaụntụ arụmọrụ njikọ

Iji kpuchie ikpe ebe ị ga- hrefedobe njirimara na njikọ nwere nkwarụ, .disabledklaasị na-eji pointer-events: nonenwaa gbanyụọ ọrụ njikọ nke <a>s. Rịba ama na ahazibeghị akụrụngwa CSS a maka HTML, mana ihe nchọgharị ọgbara ọhụrụ niile na-akwado ya. 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 ọ bụrụ nchekwa, na mgbakwunye na aria-disabled="true", tinyekwara tabindex="-1"àgwà na njikọ ndị a iji gbochie ha ịnweta mgbado ahụigodo, ma jiri Javascript omenala iji gbanyụọ ọrụ ha kpamkpam.

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

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">
  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ụ emezigharịrị nwere 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> 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>

Ụzọ