Buttons

Ji bo çalakiyên di form, diyalog û hêj bêtir bi piştgirî ji bo gelek pîvan, dewlet û hêj bêtir şêwazên bişkojka xwerû yên Bootstrap bikar bînin.

Examples

Bootstrap gelek şêwazên bişkokê yên ji berê ve diyarkirî vedihewîne, her yek ji armanca xweya semantîkî re xizmet dike, digel ku çend pêvek ji bo bêtir kontrolê têne avêtin.

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

Rakirina nivîsê neçalak bike

Heke hûn nexwazin ku nivîsa bişkojkê biqelişe, hûn dikarin .text-nowrappolê li bişkokê zêde bikin. Di Sass de, hûn dikarin ji $btn-white-space: nowrapbo her bişkokê pêçana nivîsê neçalak bikin.

Etîketên bişkokê

Ders .btntêne çêkirin ku bi hêmanan re bêne bikar anîn <button>. Lêbelê, hûn dikarin van dersan li ser <a>an <input>hêmanan jî bikar bînin (her çend hin gerok dikarin vegotinek hinekî cûda bicîh bînin).

Dema ku çînên bişkojkê li ser <a>hêmanên ku têne bikar anîn da ku fonksiyonên navrûpelê bişopînin (mîna naverok hilweşandî), li şûna girêdana bi rûpelan an beşên nû yên di hundurê rûpela heyî de, divê van lînkan ji bo role="button"ku armanca xwe bi rêkûpêk veguhezînin teknolojiyên arîkar ên wekî xwendevanên ekranê.

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

Bişkojkên Outline

Pêdivî bi bişkokek heye, lê ne rengên paşxanê yên giran ku ew tînin? Çînên guhêrbar ên xwerû bi wan re .btn-outline-*biguhezînin da ku hemî wêne û rengan li ser her bişkokê jêbirin.

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

Sizes

Bişkokên mezintir an piçûktir dixwazin? Zêde bikin .btn-lgan .btn-smji bo pîvanên din.

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

Bişkojkên asta blokê biafirînin - yên ku bi tevahî firehiya dêûbav vedigirin - bi lêzêdekirina .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>

Dewleta çalak

Dema ku bi paşxaneyek tarîtir, sînorê tarîtir, û dema ku siya çalak bin, bi siyayek xêzkirî çalak bin, dê bişkok xuya bikin. Ne hewce ye ku çînek li <button>s zêde bikin ji ber ku ew çînek pseudo bikar tînin . Lêbelê, hûn hîn jî dikarin heman xuyangê çalak bi zorê bikin .active(û aria-pressed=“true”taybetmendiyê têxin nav xwe) heke hûn hewce ne ku dewletê bi bernamekî dubare bikin.

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

Dewlet seqet

Bi zêdekirina disabledtaybetmendiya boolean li her hêmanekê , bişkokan neçalak xuya bikin <button>.

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

Bişkojkên neçalakkirî yên ku <a>hêmanê bikar tînin hinekî cûda tevdigerin:

• <a>disableds taybetmendiyê piştgirî nakin , ji ber vê yekê divê hûn .disabledpolê lê zêde bikin da ku ew bi dîtbarî neçalak xuya bike.
• Hin şêwazên paşerojê-heval tê de hene ku hemî pointer-eventsli ser bişkokên lengerê neçalak bikin. Di gerokên ku wê taybetmendiyê piştgirî dikin, hûn ê kursorê neçalak qet nabînin.
• Bişkojkên neçalakkirî yên ku têne bikar anîn <a>divê aria-disabled="true"taybetmendiyek hebe ku rewşa hêmanê ji teknolojiyên alîkar re destnîşan bike.
• Bişkokên neçalakkirî yên ku têne bikar anîn divê <a> taybetmendiyêhref nehewînin.

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

Hişyariya fonksiyona girêdanê

Ji bo vegirtina rewşên ku hûn neçar in ku hreftaybetmendiyê li ser girêdanek neçalak bihêlin, .disabledçîn pointer-events: nonehewl dide ku fonksiyona girêdanê ya <a>s neçalak bike. Têbînî ku ev taybetmendiya CSS hîn ji bo HTML-ê ne standardkirî ye, lê hemî gerokên nûjen wê piştgirî dikin. Wekî din, tewra di gerokên ku piştgirî dikin pointer-events: nonede, navîgasyona klavyeyê bêbandor dimîne, tê vê wateyê ku bikarhênerên klavyeyê yên dîtbar û bikarhênerên teknolojiyên arîkar dê hîn jî karibin van girêdanan çalak bikin. Ji ber vê yekê ji bo ku ewle bin, ji bilî aria-disabled="true", li tabindex="-1"ser van lînkan taybetmendiyek jî têxin nav xwe da ku pêşî li wergirtina bala klavyeyê bigirin, û JavaScript-a xwerû bikar bînin da ku fonksiyona wan bi tevahî neçalak bikin.

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

Pêveka bişkokê

Zêdetir bi bişkokan bikin. Rewşên bişkojka kontrol bikin an ji bo hêmanên zêdetir ên mîna darikên amûran komên bişkokan biafirînin.

Dewletên veguherîn

Ji data-toggle="button"bo guheztina rewşa bişkokekê zêde bike active. Ger hûn bişkokek pêş-guhartin, divê hûn bi destan .activepolê û aria-pressed="true" li <button>.

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

Qutiya kontrolê û bişkokên radyoyê

Şêweyên Bootstrap .buttondikarin li hêmanên din, wek <label>s, werin sepandin da ku qutiya kontrolê an bişkojka şêwaza radyoyê peyda bikin. Zêde data-toggle="buttons"bikin ku .btn-groupwan bişkokên guhertî tê de hene da ku tevgera wan a guheztinê bi JavaScript-ê ve çalak bikin û s-yên di nav bişkokên .btn-group-togglexwe de şêwaz bikin . Bala xwe bidinê ku hûn dikarin bişkokên yekane yên bi têketinê an komên wan biafirînin.<input>

Rewşa kontrolkirî ya van bişkokan tenê bi clickbûyera li ser bişkokê tê nûve kirin. Ger hûn rêbazek din ji bo nûvekirina têketinê bikar bînin -mînak, bi <input type="reset">an bi checkeddesta sepandina taybetmendiya têketinê- hûn ê hewce bikin .activeku <label>bi destan veguhezînin.

Bala xwe bidinê ku bişkokên pêş-kontrolkirî hewce dikin ku hûn bi destan .activepolê li têketinê zêde bikin <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>

Methods