Mga Pindutan
Gamitin ang mga custom na istilo ng button ng Bootstrap para sa mga aksyon sa mga form, dialog, at higit pa na may suporta para sa maraming laki, estado, at higit pa.
Kasama sa Bootstrap ang ilang paunang natukoy na mga istilo ng button, bawat isa ay nagsisilbi sa sarili nitong semantic na layunin, na may ilang mga dagdag na itinapon para sa higit na kontrol.
Naghahatid ng kahulugan sa mga pantulong na teknolohiya
Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .sr-only
klase.
Ang .btn
mga klase ay idinisenyo upang magamit kasama ng <button>
elemento. Gayunpaman, maaari mo ring gamitin ang mga klase na ito sa <a>
o mga <input>
elemento (bagaman ang ilang mga browser ay maaaring maglapat ng bahagyang naiibang pag-render).
Kapag gumagamit ng mga klase ng button sa <a>
mga elemento na ginagamit upang mag-trigger ng in-page na functionality (tulad ng pag-collapse ng content), sa halip na mag-link sa mga bagong page o seksyon sa loob ng kasalukuyang page, ang mga link na ito ay dapat bigyan ng isang role="button"
upang naaangkop na maihatid ang kanilang layunin sa mga pantulong na teknolohiya tulad ng mga screen reader.
Nangangailangan ng isang pindutan, ngunit hindi ang mabigat na kulay ng background na dinadala nila? Palitan ang mga default na klase ng modifier ng .btn-outline-*
mga mag-aalis ng lahat ng larawan sa background at mga kulay sa anumang button.
Gusto mo ba ng mas malaki o mas maliit na mga pindutan? Magdagdag .btn-lg
o .btn-sm
para sa mga karagdagang laki.
Gumawa ng mga block level na button—yaong sumasaklaw sa buong lapad ng isang magulang—sa pamamagitan ng pagdaragdag ng .btn-block
.
Ang mga pindutan ay lalabas na pinindot (na may mas madilim na background, mas madilim na hangganan, at inset na anino) kapag aktibo. Hindi na kailangang magdagdag ng klase sa <button>
s dahil gumagamit sila ng pseudo-class . Gayunpaman, maaari mo pa ring pilitin ang parehong aktibong hitsura sa .active
(at isama ang aria-pressed="true"
katangian) kung kailangan mong kopyahin ang estado sa programmatically.
Gawing hindi aktibo ang mga button sa pamamagitan ng pagdaragdag ng disabled
boolean attribute sa anumang <button>
elemento.
<a>
Medyo naiiba ang pagkilos ng mga naka- disable na button gamit ang elemento:
<a>
s ay hindi sumusuporta sadisabled
katangian, kaya dapat mong idagdag ang.disabled
klase upang makita itong hindi pinagana.- Ang ilang mga istilong panghinaharap sa hinaharap ay kasama upang hindi paganahin ang lahat
pointer-events
sa mga pindutan ng anchor. Sa mga browser na sumusuporta sa property na iyon, hindi mo talaga makikita ang naka-disable na cursor. - Dapat isama ng mga naka-disable na button ang
aria-disabled="true"
attribute para ipahiwatig ang estado ng elemento sa mga teknolohiyang pantulong.
Babala sa pagpapaandar ng link
.disabled
Ginagamit ng klase pointer-events: none
upang subukang huwag paganahin ang pag-andar ng link ng s <a>
, ngunit ang pag-aari ng CSS ay hindi pa na-standardize. Bilang karagdagan, kahit na sa mga browser na sumusuporta pointer-events: none
, ang keyboard navigation ay nananatiling hindi naaapektuhan, ibig sabihin, ang mga nakikitang user ng keyboard at mga user ng mga pantulong na teknolohiya ay maa-activate pa rin ang mga link na ito. Kaya para maging ligtas, magdagdag ng tabindex="-1"
attribute sa mga link na ito (upang pigilan ang mga ito na makatanggap ng focus sa keyboard) at gumamit ng custom na JavaScript upang i-disable ang kanilang functionality.
Gumawa ng higit pa gamit ang mga pindutan. Ang control button ay nagsasaad o lumikha ng mga pangkat ng mga button para sa higit pang mga bahagi tulad ng mga toolbar.
Idagdag data-toggle="button"
upang i-toggle ang active
katayuan ng isang button. Kung pre-toggling mo ang isang button, dapat mong manual na idagdag ang .active
klase at aria-pressed="true"
sa <button>
.
Ang mga estilo ng Bootstrap .button
ay maaaring ilapat sa iba pang mga elemento, tulad ng <label>
s, upang magbigay ng checkbox o radio style button na toggling. Idagdag data-toggle="buttons"
sa isang .btn-group
naglalaman ng mga binagong button na iyon upang paganahin ang kanilang pag-uugali sa pag-togg sa pamamagitan ng JavaScript at idagdag .btn-group-toggle
sa istilo ang mga <input>
s sa loob ng iyong mga button. Tandaan na maaari kang lumikha ng iisang input-powered na button o grupo ng mga ito.
Ang naka-check na estado para sa mga button na ito ay ina- update lamang sa pamamagitan ng click
kaganapan sa button. Kung gagamit ka ng ibang paraan upang i-update ang input—hal., gamit <input type="reset">
o sa pamamagitan ng manu-manong paglalapat ng checked
property ng input—kakailanganin mong i-toggle .active
ang <label>
manual.
Tandaan na ang mga paunang na-check na button ay nangangailangan sa iyo na manu-manong idagdag ang .active
klase sa input ng <label>
.
Pamamaraan | Paglalarawan |
---|---|
$().button('toggle') |
I-toggle ang estado ng push. Binibigyan ang pindutan ng hitsura na ito ay na-activate. |
$().button('dispose') |
Sinisira ang button ng isang elemento. |