Mabatani
Gwiritsani ntchito masitayilo a Bootstrap pamabatani kuti muchitepo kanthu m'mitundu, zokambirana, ndi zina zambiri mothandizidwa ndi makulidwe angapo, zigawo, ndi zina zambiri.
Bootstrap imaphatikizapo masitayelo angapo ofotokozedweratu, iliyonse imagwira ntchito yakeyake, ndi zina zowonjezera zomwe zimaponyedwa kuti ziziwongolera.
Kupereka tanthauzo ku matekinoloje othandizira
Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .sr-only
kalasi.
Maphunzirowa .btn
amapangidwa kuti agwiritsidwe ntchito ndi <button>
element. Komabe, mutha kugwiritsanso ntchito makalasi awa <a>
kapena <input>
zinthu (ngakhale asakatuli ena atha kugwiritsa ntchito kumasulira kosiyana pang'ono).
Mukamagwiritsa ntchito mabatani azinthu <a>
zomwe zimagwiritsidwa ntchito kuyambitsa ntchito zapatsamba (monga kugwa), m'malo molumikizana ndi masamba atsopano kapena magawo omwe ali patsamba lapano, maulalo awa ayenera kuperekedwa role="button"
kuti afotokozere moyenera cholinga chawo kuukadaulo wothandizira monga. owerenga chophimba.
Mukufuna batani, koma osati mitundu yayikulu yakumbuyo yomwe amabweretsa? Bwezerani m'malo mwa makalasi osintha .btn-outline-*
kuti muchotse zithunzi zonse zakumbuyo ndi mitundu pa batani lililonse.
Mukufuna mabatani akulu kapena ang'onoang'ono? Onjezani .btn-lg
kapena .btn-sm
ma size owonjezera.
Pangani mabatani a block level—omwe amatambasula m'lifupi mwa kholo lonse—powonjezera .btn-block
.
Mabatani adzawoneka atapanikizidwa (ndi maziko akuda, malire akuda, ndi mthunzi wamkati) akamagwira ntchito. Palibe chifukwa chowonjezera kalasi ku <button>
s pomwe amagwiritsa ntchito kalasi yabodza . Komabe, mutha kukakamizabe mawonekedwe omwewo .active
(ndikuphatikizanso aria-pressed="true"
) ngati mungafunikire kubwereza boma mwadongosolo.
Pangani mabatani kuti awoneke ngati osagwira ntchito powonjezera mawonekedwe a disabled
boolean ku <button>
chinthu chilichonse.
Mabatani olemala omwe amagwiritsa ntchito <a>
chinthucho amachita mosiyana pang'ono:
<a>
s sizigwirizana ndidisabled
chikhalidwecho, chifukwa chake muyenera kuwonjezera.disabled
kalasi kuti iwoneke ngati yolumala.- Masitayelo ena ogwirizana ndi mtsogolo akuphatikizidwa kuti muyimitse zonse pamabatani
pointer-events
a nangula. M'masakatuli omwe amathandizira katunduyo, simudzawona cholozera choyimitsidwa konse. - Mabatani olemala akuyenera kukhala ndi mawonekedwe
aria-disabled="true"
owonetsa momwe zinthu zilili kuukadaulo wothandizira.
Link magwiridwe antchito chenjezo
The .disabled
class uses pointer-events: none
to try to disable the link functionality of <a>
s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none
, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a tabindex="-1"
attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
Add data-toggle="button"
to toggle a button’s active
state. If you’re pre-toggling a button, you must manually add the .active
class and aria-pressed="true"
to the <button>
.
Bootstrap’s .button
styles can be applied to other elements, such as <label>
s, to provide checkbox or radio style button toggling. Add data-toggle="buttons"
to a .btn-group
containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle
to style the <input>
s within your buttons. Note that you can create single input-powered buttons or groups of them.
The checked state for these buttons is only updated via click
event on the button. If you use another method to update the input—e.g., with <input type="reset">
or by manually applying the input’s checked
property—you’ll need to toggle .active
on the <label>
manually.
Zindikirani kuti mabatani omwe adasankhidwa kale amafuna kuti muwonjezere .active
kalasi pa zolowetsa <label>
.
Njira | Kufotokozera |
---|---|
$().button('toggle') |
Imatembenuza dziko lokankhira. Imawonetsa batani kuwonekera kuti yayatsidwa. |
$().button('dispose') |
Iwononga batani la chinthu. |