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>

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 ku fonksiyonên navrûpelê bişopînin (mîna naverok hilweşandî) têne bikar anîn, 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 mebesta xwe bi rêkûpêk bi teknolojiyên arîkar re ragihînin, 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 çalak be dê bişkokên pêlkirî xuya bibin (bi paşxaneyek tarîtir, sînorê tarîtir û siya hundurîn). 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şkokên neçalak divê aria-disabled="true"taybetmendiyê bihewînin da ku rewşa hêmanê ji teknolojiyên alîkar re destnîşan 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 jî 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ê lê 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" autocomplete="off">
  Single toggle
</button>

Bişkojkên kontrolê û 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î ji we re hewce dike 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 autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Methods