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>

Hagarika gupfunyika inyandiko

Niba udashaka ko buto yinyandiko irangira, urashobora kongeramo urwego .text-nowrapkuri buto. Muri Sass, urashobora gushiraho $btn-white-space: nowrapkugirango uhagarike inyandiko ipfunyika kuri buri buto.

Utubuto

Amasomo .btnyagenewe gukoreshwa hamwe nibintu <button>. Ariko, urashobora kandi gukoresha aya masomo kuri <a>cyangwa <input>ibintu (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.

<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 iyo ukora hamwe numwijima wijimye, umupaka wijimye, kandi, mugihe igicucu gishoboye, igicucu. 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.

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

• <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 ukoresheje <a>ugomba gushyiramo aria-disabled="true"ikiranga kwerekana imiterere yibintu bifasha tekinoroji.
• Utubuto twahagaritswe ukoresheje <a> ntigomba gushyiramo hrefikiranga.

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

Ihuza imikorere caveat

Kugirango utwikire imanza aho ugomba kugumana hrefikiranga kumurongo wamugaye, urwego .disabledrukoresha pointer-events: nonekugirango ugerageze guhagarika imikorere yimikorere ya <a>s. Menya ko uyu mutungo wa CSS utarasanzwe kuri HTML, ariko mushakisha zose zigezweho zirabishyigikira. 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, usibye aria-disabled="true", ushyiremo tabindex="-1"ikiranga kuriyi miyoboro kugirango ubabuze kwakira intumbero ya clavier, kandi ukoreshe JavaScript yihariye kugirango uhagarike imikorere yabo yose.

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

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

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

Uburyo