Nā pihi

E hoʻohana i nā ʻano pihi maʻamau o Bootstrap no nā hana ma nā ʻano, nā kamaʻilio, a me nā mea hou aʻe me ke kākoʻo no nā ʻano nui, nā mokuʻāina, a me nā mea hou aku.

Nā laʻana

Loaʻa i ka Bootstrap kekahi mau ʻano pihi i koho mua ʻia, e lawelawe ana kēlā me kēia me kāna kumu semantic ponoʻī, me kekahi mau mea hou i hoʻolei ʻia no ka mana hou aku.

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

Hoʻopau i ka ʻōwili kikokikona

Inā 'a'ole 'oe makemake i ka kikokikona pihi e 'ōwili, hiki iā 'oe ke ho'ohui i ka .text-nowrappapa i ke pihi. Ma Sass, hiki iā ʻoe ke hoʻonohonoho $btn-white-space: nowrapi ka hoʻopau ʻana i ka hoʻopili kikokikona no kēlā me kēia pihi.

Nā lepili pihi

Hoʻolālā .btnʻia nā papa e hoʻohana me ka <button>mea. Eia nō naʻe, hiki iā ʻoe ke hoʻohana i kēia mau papa ma luna a i <a>ʻole <input>nā ​​​​mea (ʻoiai e hoʻohana paha kekahi mau polokalamu kele i kahi unuhi ʻokoʻa).

I ka hoʻohana ʻana i nā papa pihi ma <a>nā mea i hoʻohana ʻia e hoʻāla i ka hana i loko o ka ʻaoʻao (e like me ka hāʻule ʻana o ka maʻiʻo), ma mua o ka hoʻopili ʻana i nā ʻaoʻao hou a i ʻole nā ​​ʻāpana i loko o ka ʻaoʻao o kēia manawa, pono e hāʻawi ʻia kēia mau loulou e hoʻopuka role="button"kūpono i kā lākou kumu i nā ʻenehana kōkua e like me mea heluhelu pale.

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

Nā pihi outline

Pono ʻoe i kahi pihi, ʻaʻole naʻe nā kala hefty kā lākou e lawe mai ai? E hoʻololi i nā papa hoʻololi paʻamau me nā .btn-outline-*mea e wehe i nā kiʻi hope a me nā kala ma kekahi pihi.

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

Nui

Makemake i nā pihi nui a liʻiliʻi paha? Hoʻohui a i .btn-lgʻole .btn-smno nā nui ʻē aʻe.

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

E hana i nā pihi pae poloka—ʻo ia ka mea e lōʻihi i ka laulā piha o kahi makua—ma ka hoʻohui ʻana i .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>

Kūlana hana

E ʻike ʻia nā pihi i ka wā e hana ana me kahi ʻeleʻele ʻeleʻele, palena ʻeleʻele, a inā hiki ke aka, he aka hoʻokomo. ʻAʻole pono e hoʻohui i kahi papa i <button>s no ka mea e hoʻohana ana lākou i kahi pseudo-class . Eia nō naʻe, hiki iā ʻoe ke hoʻoikaika i ke ʻano hana like me .active(a hoʻokomo i ka aria-pressed=“true”ʻano) inā pono ʻoe e hana hou i ka mokuʻāina ma ka papahana.

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

Mokuʻāina kīnā

E hana i nā pihi me ka ʻole o ka hoʻohui ʻana i ke disabledʻano boolean i kekahi <button>mea.

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

ʻOkoʻa ka ʻano o nā pihi hoʻopaʻa ʻia e hoʻohana ana i ka <a>element:

• <a>ʻAʻole kākoʻo ʻo s i ka disabledʻano, no laila pono ʻoe e hoʻohui i ka .disabledpapa i mea e ʻike ʻia ai ke kīnā.
• Hoʻokomo ʻia kekahi mau ʻano hoʻokipa e hiki mai ana e hoʻopau i nā mea āpau pointer-eventsma nā pihi heleuma. Ma nā polokalamu kele pūnaewele e kākoʻo ana i kēlā waiwai, ʻaʻole ʻoe e ʻike i ka cursor disable.
• <a>Pono e hoʻohana ʻia nā pihi hoʻohana i ka aria-disabled="true"ʻano e hōʻike i ke kūlana o ka mea i nā ʻenehana kōkua.
• <a> ʻAʻole pono e hoʻokomo ʻia ke ʻano o nā pihi hoʻohana ʻia 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>

Hoʻopaʻa hana loulou

No ka uhi ʻana i nā hihia kahi āu e mālama ai i ke hrefʻano ma kahi loulou disable, .disabledhoʻohana ka papa pointer-events: nonee hoʻāʻo e hoʻopau i ka hana loulou o <a>s. E hoʻomaopopo ʻaʻole i hoʻopaʻa ʻia kēia waiwai CSS no HTML, akā kākoʻo nā mea hoʻokele hou a pau iā ia. Eia kekahi, ʻoiai i loko o nā polokalamu kele pūnaewele e kākoʻo ana, ʻaʻole i hoʻopilikia ʻia pointer-events: noneka hoʻokele keyboard, ʻo ia hoʻi, hiki i nā mea hoʻohana keyboard ʻike a me nā mea hoʻohana i nā ʻenehana kōkua ke hoʻāla i kēia mau loulou. No laila, i mea e palekana ai, ma waho aʻe o aria-disabled="true", e hoʻokomo pū i kahi tabindex="-1"hiʻohiʻona ma kēia mau loulou e pale aku iā lākou mai ka loaʻa ʻana o ka manaʻo keyboard, a hoʻohana i ka JavaScript maʻamau e hoʻopau i kā lākou hana.

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

Pihi pihi

E hana hou me nā pihi. Hōʻike ka pihi mana a i ʻole hana i nā pūʻulu o nā pihi no nā ʻāpana ʻē aʻe e like me nā hāmeʻa.

E hoʻololi i nā mokuʻāina

Hoʻohui data-toggle="button"e hoʻololi i ke kūlana o kahi pihi active. Inā hoʻololi mua ʻoe i kahi pihi, pono ʻoe e hoʻohui lima i ka .activepapa a aria-pressed="true" me ka <button>.

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

Pahu pahu a me nā pihi lekiō

Hiki ke hoʻohana ʻia ke ʻano o Bootstrap .buttoni nā mea ʻē aʻe, e like me <label>s, e hāʻawi i ka pahu pahu a i ʻole ke kaomi ʻana i ke pihi kaila lekiō. E hoʻohui data-toggle="buttons"i .btn-groupkēlā mau pihi i hoʻololi ʻia e hiki ai i kā lākou hana hoʻololi ʻana ma o JavaScript a hoʻohui .btn-group-togglei ke ʻano o nā <input>s i loko o kāu mau pihi. E hoʻomanaʻo e hiki iā ʻoe ke hana i nā pihi hoʻokomo hoʻokahi a i ʻole nā ​​hui o lākou.

Hōʻano hou ʻia ke kūlana i nānā ʻia no kēia mau pihi ma o clickka hanana ma ke pihi. Inā hoʻohana ʻoe i kahi ala ʻē aʻe e hoʻohou i ka hoʻokomo—e laʻa, me <input type="reset">ka hoʻohana lima ʻana i ka checkedwaiwai o ka mea hoʻokomo—pono ʻoe e hoʻololi .activei ka <label>lima.

E hoʻomaopopo i nā pihi i nānā mua ʻia e koi iā ʻoe e hoʻohui lima i ka .activepapa i ka hoʻokomo <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>

Nā ʻano hana