Utubuto

Koresha Bootstrap yihariye ya buto yuburyo bwibikorwa muburyo, ibiganiro, nibindi byinshi hamwe nubufasha kubunini bwinshi, leta, nibindi byinshi.

Ingero

Bootstrap ikubiyemo buto yuburyo bwateganijwe mbere, buri kimwe gikora intego yacyo, hamwe ninyongera zijugunywe kubindi bigenzura.

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

Gutanga ibisobanuro kubuhanga bufasha

Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (urugero: inyandiko igaragara), cyangwa bigashyirwa muburyo butandukanye, nk'inyandiko y'inyongera ihishe hamwe .sr-onlyn'ishuri.

Utubuto

Amasomo .btnyagenewe gukoreshwa hamwe nibintu <button>. Ariko, urashobora kandi gukoresha aya masomo kumurongo <a>cyangwa <input>ibice (nubwo mushakisha zimwe zishobora gukoresha uburyo butandukanye).

Mugihe ukoresheje ibyiciro bya buto kubintu <a>bikoreshwa mugukurura page mumikorere (nkibintu bisenyuka), aho guhuza page cyangwa ibice bishya kurupapuro rwubu, aya mahuza agomba guhabwa a role="button"kugirango yerekane neza intego zabo muburyo bwikoranabuhanga bufasha nka abasomyi ba ecran.

Ihuza

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

Urucacagu Utubuto

Ukeneye buto, ariko ntabwo amabara meza cyane bazana? Simbuza ibyiciro byahinduye ibyiciro hamwe .btn-outline-*nibyo kugirango ukureho amashusho yose yibara n'amabara kuri buto iyariyo yose.

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

Ingano

Ibyiza binini cyangwa bito? Ongeraho .btn-lgcyangwa .btn-smkubunini bwinyongera.

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

Kora urwego rwo guhagarika buto-izenguruka ubugari bwuzuye bwababyeyi - wongeyeho .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>

Leta ikora

Utubuto tuzagaragara gukanda (hamwe numwijima wijimye, umupaka wijimye, no gushiramo igicucu) mugihe ukora. Ntibikenewe ko wongera urwego kuri <button>s nkuko bakoresha pseudo-urwego . Ariko, urashobora guhatira isura imwe igaragara hamwe .active(kandi ushizemo aria-pressed="true"ikiranga) mugihe ukeneye kwigana leta gahunda.

Ihuza ryibanze Ihuza

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

Leta yamugaye

Kora buto isa nkidakora wongeyeho disabledikiranga boolean kubintu byose <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>

Utubuto twahagaritswe ukoresheje <a>element yitwara gato:

<a>s ntushyigikire disabledikiranga, ugomba rero kongeramo urwego .disabledkugirango bigaragare ko byahagaritswe.
Bimwe mubihe bizaza-byinshuti zirimo guhagarika byose pointer-eventskuri buto ya ankor. Muri mushakisha ishyigikira uwo mutungo, ntuzabona indanga yahagaritswe na gato.
Utubuto twahagaritswe tugomba gushyiramo aria-disabled="true"ikiranga kugirango twerekane imiterere yibintu bifasha tekinoroji.

Ihuza ryibanze Ihuza

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

Ihuza imikorere caveat

Icyiciro .disabledgikoresha pointer-events: nonekugirango ugerageze guhagarika imikorere yimikorere ya <a>s, ariko uwo mutungo wa CSS nturagerwaho. Mubyongeyeho, no muri mushakisha zishyigikira pointer-events: none, kugendana na clavier bikomeza kutagira ingaruka, bivuze ko abakoresha clavier babonye hamwe nabakoresha tekinoroji ifasha bazakomeza gukora iyo miyoboro. Kugirango rero ugire umutekano, ongeramo tabindex="-1"ikiranga kuriyi miyoboro (kugirango ubabuze kwakira intumbero ya clavier) hanyuma ukoreshe JavaScript yihariye kugirango uhagarike imikorere yabo.

Gucomeka

Kora byinshi hamwe na buto. Kugenzura buto ivuga cyangwa gukora amatsinda ya buto kubindi bikoresho nkibikoresho.

Toggle ivuga

Ongeraho data-toggle="button"kugirango uhindure buto ya activeleta. Niba ubanziriza guhinduranya buto, ugomba gukoresha intoki wongeyeho .activeurwego no aria-pressed="true" kuri <button>.

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

Kugenzura agasanduku na buto ya radio

Imisusire ya Bootstrap .buttonirashobora gukoreshwa mubindi bintu, nka <label>s, kugirango itange agasanduku cyangwa radio imiterere ya buto. Ongeraho data-toggle="buttons"ikubiyemo .btn-groupibyo byahinduwe kugirango ushoboze imyitwarire yabo ihindagurika ukoresheje JavaScript hanyuma wongere .btn-group-togglemuburyo bwa <input>s muri buto yawe. Menya ko ushobora gukora ikintu kimwe cyinjijwe-na buto cyangwa amatsinda yabyo.

Igenzurwa rya leta kuriyi buto ivugururwa gusa binyuze clickmubyabaye kuri buto. Niba ukoresheje ubundi buryo bwo kuvugurura ibyinjijwe - urugero, hamwe <input type="reset">cyangwa ukoresheje intoki ukoresheje checkedumutungo winjiza - uzakenera guhinduranya .activeintoki <label>.

Menya ko mbere-yagenzuwe buto igusaba kwongera intoki ibyiciro .activebyinjira <label>.

Kugenzurwa

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>

Bikora Radiyo Radiyo

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

Uburyo

Uburyo	Ibisobanuro
`$().button('toggle')`	Toggles gusunika leta. Itanga buto igaragara ko yakoreshejwe.
`$().button('dispose')`	Gusenya buto yibintu.