Mabhatani

Shandisa Bootstrap's tsika bhatani masitaera ezviito mumafomu, dialog, uye nezvimwe nerutsigiro rwehukuru hwakawanda, nyika, nezvimwe.

Mienzaniso

Bootstrap inosanganisira akati wandei akafanotsanangurwa mabhatani masitaera, imwe neimwe ichishandira yayo semantic chinangwa, iine mashoma ekuwedzera akakandwa mukati kuti awedzere kutonga.

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

Dzima kupeta zvinyorwa

Kana iwe usingade kuti bhatani riputirwe, unogona kuwedzera .text-nowrapkirasi kubhatani. MuSass, unogona $btn-white-space: nowrapkuseta kudzima kupeta mameseji kwebhatani rega rega.

Button tags

Iwo .btnmakirasi akagadzirirwa kushandiswa <button>nechinhu. Nekudaro, iwe unogona zvakare kushandisa aya makirasi pane <a>kana <input>zvinhu (kunyangwe mamwe mabhurawuza anogona kushandisa akati siyanei kupa).

Paunenge uchishandisa mabhatani makirasi pane <a>zvinhu zvinoshandiswa kukonzeresa mukati-peji kushanda (sekudonha zvemukati), pane kubatanidza kune mapeji matsva kana zvikamu mukati peji razvino, izvi zvinongedzo zvinofanirwa kupihwa role="button"kuti vaendese chinangwa chavo nenzira kwayo kune tekinoroji inobatsira senge. vanoverenga 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">

Mabhatani erondedzero

Mukuda bhatani, asi kwete iwo hefty kumashure mavara avanounza? Tsiva makirasi ekugadzirisa makirasi neayo .btn-outline-*kuti ubvise mifananidzo yese yekumashure uye mavara pane chero bhatani.

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

Saizi

Unoda mabhatani makuru kana madiki? Wedzera .btn-lgkana .btn-smkuwedzera saizi.

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

Gadzira mabhatani e block level — ayo anotambanudzira upamhi hwakazara hwemubereki — nekuwedzera .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>

Active state

Mabhatani anozoonekwa akadzvanywa kana achishanda ane yakasviba kumashure, yakasviba muganho, uye, kana mimvuri yagoneswa, mumvuri wemukati. Hapana chikonzero chekuwedzera kirasi kune <button>s sezvavanoshandisa pseudo-kirasi . Nekudaro, iwe unogona kuramba uchimanikidza chitarisiko chimwechete chinoshanda ne .active(uye sanganisira aria-pressed=“true”hunhu) kana iwe uchinge uchinge uchinge uchinge uchinge uchinge uchinge uchinge uchinge uchinge uchinge uchinge uchinge uchingedzera nyika.

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

Disabled state

Ita kuti mabhatani ataridzike asingashande nekuwedzera iyo disabledboolean hunhu kune chero <button>chinhu.

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

Mabhatani akaremara achishandisa <a>chinhu anoita zvakati siyanei:

• <a>s haitsigire disabledhunhu, saka unofanirwa kuwedzera .disabledkirasi kuti iite seyakaremara.
• Mamwe masitaera ane hushamwari anosanganisirwa kudzima zvese pointer-eventspamabhatani eanchor. Mumabhurawuza anotsigira chivakwa ichocho, hauzooni yakaremara cursor zvachose.
• Mabhatani akaremara anoshandisa <a>anofanirwa kusanganisira aria-disabled="true"hunhu kuratidza mamiriro echinhu kune zvinobatsira tekinoroji.
• Akaremara mabhatani uchishandisa <a> haafanire kusanganisira hrefhunhu.

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

Link functionality caveat

Kuvhara nyaya dzaunofanirwa kuchengetedza hrefhunhu pane akaremara chinongedzo, .disabledkirasi inoshandisa pointer-events: nonekuyedza kudzima iyo link kushanda kwe <a>s. Ziva kuti iyi CSS pfuma haisati yamira paHTML, asi mabhurawuza ese emazuva ano anoitsigira. Pamusoro pezvo, kunyangwe mumabhurawuza anotsigira pointer-events: none, keyboard navigation inoramba isina kukanganiswa, zvichireva kuti vanoona vashandisi vekhibhodi nevashandisi veanobatsira matekinoroji vachiri kukwanisa kumisa aya malink. Saka kuve wakachengeteka, kuwedzera kune aria-disabled="true", zvakare sanganisira tabindex="-1"hunhu pane aya malink kuvadzivirira kubva pakugashira keyboard, uye shandisa tsika JavaScript kudzima mashandiro avo zvachose.

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

Bhatani plugin

Ita zvakawanda nemabhatani. Kudzora bhatani rinotaura kana kugadzira mapoka emabhatani ezvimwe zvinhu zvakaita sematurusi.

Toggle states

Wedzera data-toggle="button"kusandura mamiriro ebhatani active. Kana uri kufanobatidza bhatani, unofanira kuwedzera .activekirasi nemaoko aria-pressed="true" kune <button>.

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

Checkbox nemabhatani eredhiyo

Zvitaera zveBootstrap .buttonzvinogona kuiswa kune zvimwe zvinhu, senge <label>s, kupa bhokisi rekutarisa kana redhiyo bhatani redhiyo. Wedzera data-toggle="buttons"kune .btn-groupine iwo mabhatani akagadziridzwa kuti agonese maitiro avo ekuchinja kuburikidza neJavaScript uye wedzera .btn-group-togglekustaira <input>s mukati mabhatani ako. Ziva kuti unogona kugadzira mabhatani ekuisa-ane simba rimwe chete kana mapoka awo.

Iyo yakatariswa mamiriro emabhatani aya inongogadziridzwa kuburikidza clicknechiitiko pabhatani. Kana iwe ukashandisa imwe nzira kugadzirisa zvinopinza - semuenzaniso, <input type="reset">nekuisa kana nemaoko nekuisa checkedmidziyo - unozofanirwa kuchinjika .activepamaoko <label>.

Ziva kuti mabhatani afanotariswa anoda kuti iwe uwedzere .activekirasi kune yekupinda <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>

Nzira