Vifungo

Tumia mitindo maalum ya vitufe vya Bootstrap kwa vitendo katika fomu, mazungumzo, na zaidi kwa usaidizi wa saizi nyingi, majimbo, na zaidi.

Mifano

Bootstrap inajumuisha mitindo kadhaa ya vitufe iliyofafanuliwa awali, kila moja ikitumikia madhumuni yake ya kisemantiki, na nyongeza chache hutupwa kwa udhibiti zaidi.

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

Zima ufungaji wa maandishi

Ikiwa hutaki maandishi ya kitufe kufungwa, unaweza kuongeza .text-nowrapdarasa kwenye kitufe. Katika Sass, unaweza kuweka $btn-white-space: nowrapkuzima ufungaji maandishi kwa kila kitufe.

Lebo za kitufe

Madarasa .btnyameundwa kutumiwa na <button>kipengee. Hata hivyo, unaweza pia kutumia madarasa haya kwenye <a>au <input>vipengele (ingawa baadhi ya vivinjari vinaweza kutumia utoaji tofauti kidogo).

Unapotumia madarasa ya vitufe kwenye <a>vipengee vinavyotumika kuanzisha utendakazi wa ndani ya ukurasa (kama vile maudhui yanayoporomoka), badala ya kuunganisha kwa kurasa mpya au sehemu ndani ya ukurasa wa sasa, viungo hivi vinapaswa kutolewa role="button"ili kuwasilisha madhumuni yao ipasavyo kwa teknolojia saidizi kama vile. visoma skrini.

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

Vifungo vya muhtasari

Je, unahitaji kitufe, lakini si rangi nyingi za mandharinyuma wanazoleta? Badilisha darasa za kirekebishaji chaguo-msingi na .btn-outline-*zile ili kuondoa picha na rangi zote za mandharinyuma kwenye kitufe chochote.

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

Ukubwa

Ungependa vitufe vikubwa au vidogo? Ongeza .btn-lgau .btn-smkwa saizi za ziada.

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

Unda vitufe vya kiwango cha kuzuia—vile vinavyochukua upana kamili wa mzazi—kwa kuongeza .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>

Hali hai

Vifungo vitaonekana vimebonyezwa vinapotumika na mandharinyuma meusi zaidi, mpaka mweusi zaidi, na vivuli vikiwashwa, kivuli kilichowekwa. Hakuna haja ya kuongeza darasa kwa <button>s wanapotumia pseudo-class . Walakini, bado unaweza kulazimisha mwonekano amilifu sawa na .active(na kujumuisha aria-pressed=“true”sifa) ikiwa utahitaji kuiga hali kwa utaratibu.

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

Jimbo la walemavu

Fanya vitufe vionekane visivyotumika kwa kuongeza disabledsifa ya boolean kwa <button>kipengele chochote.

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

Vifungo vilivyozimwa kwa kutumia <a>kipengele hufanya tofauti kidogo:

• <a>s haiungi mkono disabledsifa, kwa hivyo lazima uongeze .disableddarasa ili kuifanya ionekane kuwa imelemazwa.
• Baadhi ya mitindo ifaayo siku zijazo imejumuishwa ili kuzima zote pointer-eventskwenye vitufe vya kushikilia. Katika vivinjari vinavyotumia sifa hiyo, hutaona kielekezi kilichozimwa hata kidogo.
• Vifungo vilivyozimwa vinavyotumiwa <a>vinapaswa kujumuisha aria-disabled="true"sifa ili kuonyesha hali ya kipengele kwa teknolojia za usaidizi.
• Vifungo vilivyozimwa kwa kutumia <a> haipaswi kujumuisha hrefsifa.

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

Tahadhari ya utendaji wa kiungo

Ili kufunika kesi ambapo lazima uweke hrefsifa kwenye kiungo kilichozimwa, .disableddarasa hutumia pointer-events: nonekujaribu kuzima utendakazi wa kiungo cha <a>s. Kumbuka kuwa kipengele hiki cha CSS bado hakijasanifiwa kwa HTML, lakini vivinjari vyote vya kisasa vinaiunga mkono. Kwa kuongeza, hata katika vivinjari vinavyotumia pointer-events: none, urambazaji wa kibodi bado haujaathiriwa, kumaanisha kuwa watumiaji wa kibodi wanaoonekana na watumiaji wa teknolojia saidizi bado wataweza kuwezesha viungo hivi. Kwa hivyo kuwa salama, pamoja na aria-disabled="true", pia ni pamoja na tabindex="-1"sifa kwenye viungo hivi ili kuvizuia kupokea umakini wa kibodi, na tumia JavaScript maalum kuzima utendakazi wao kabisa.

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

Kitufe programu-jalizi

Fanya zaidi na vifungo. Kitufe cha kudhibiti kinasema au unda vikundi vya vitufe vya vipengee zaidi kama vile upau wa vidhibiti.

Geuza majimbo

Ongeza data-toggle="button"ili kugeuza hali ya kitufe active. Ikiwa unageuza kitufe mapema, lazima uongeze .activedarasa mwenyewe na aria-pressed="true" kwa <button>.

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

Vifungo vya kuteua na redio

Mitindo ya Bootstrap .buttoninaweza kutumika kwa vipengele vingine, kama vile <label>s, ili kutoa kisanduku cha kuteua au ugeuzaji wa kitufe cha mtindo wa redio. Ongeza data-toggle="buttons"kwenye .btn-groupiliyo na vitufe vilivyorekebishwa ili kuwezesha tabia yao ya kugeuza kupitia JavaScript na uongeze .btn-group-togglemtindo wa <input>s ndani ya vitufe vyako. Kumbuka kwamba unaweza kuunda vitufe vinavyotumia ingizo moja au vikundi vyavyo.

Hali iliyochaguliwa ya vitufe hivi inasasishwa tu kupitia clicktukio lililo kwenye kitufe. Ukitumia mbinu nyingine kusasisha ingizo—km, kwa kutumia au kwa kutumia mwenyewe sifa ya <input type="reset">ingizo checked—utahitaji kuwasha wewe mwenyewe..active<label>

Kumbuka kuwa vitufe vilivyoangaliwa awali vinakuhitaji uongeze .activedarasa wewe mwenyewe kwa ingizo <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>

Mbinu