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.

Mga halimbawa

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.

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

I-disable ang text wrapping

Kung ayaw mong i-wrap ang text ng button, maaari mong idagdag ang .text-nowrapklase sa button. Sa Sass, maaari mong itakda $btn-white-space: nowrapna huwag paganahin ang text wrapping para sa bawat button.

Mga tag ng pindutan

Ang .btnmga 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.

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

Mga pindutan ng outline

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.

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

Mga sukat

Gusto mo ba ng mas malaki o mas maliit na mga pindutan? Magdagdag .btn-lgo .btn-smpara sa mga karagdagang laki.

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

Gumawa ng mga block level na button—yaong sumasaklaw sa buong lapad ng isang magulang—sa pamamagitan ng pagdaragdag ng .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>

Aktibong estado

Ang mga pindutan ay lalabas na pinindot kapag aktibo na may mas madilim na background, mas madilim na hangganan, at, kapag ang mga anino ay pinagana, isang inset na anino. 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.

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

Estadong may kapansanan

Gawing hindi aktibo ang mga button sa pamamagitan ng pagdaragdag ng disabledboolean attribute sa anumang <button>elemento.

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

<a>Medyo naiiba ang pagkilos ng mga naka- disable na button gamit ang elemento:

• <a>s ay hindi sumusuporta sa disabledkatangian, kaya dapat mong idagdag ang .disabledklase upang makita itong hindi pinagana.
• Ang ilang mga istilong panghinaharap sa hinaharap ay kasama upang hindi paganahin ang lahat pointer-eventssa mga pindutan ng anchor. Sa mga browser na sumusuporta sa property na iyon, hindi mo talaga makikita ang naka-disable na cursor.
• Ang mga naka- disable na button na gumagamit <a>ay dapat magsama ng aria-disabled="true"katangian upang ipahiwatig ang estado ng elemento sa mga teknolohiyang pantulong.
• Ang mga naka- disable na button na gumagamit <a> ay hindi dapat magsama ng hrefattribute.

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

Babala sa pagpapaandar ng link

Upang masakop ang mga kaso kung saan kailangan mong panatilihin ang hrefkatangian sa isang hindi pinaganang link, .disabledginagamit ng klase pointer-events: noneupang subukang huwag paganahin ang paggana ng link ng <a>s. Tandaan na ang CSS property na ito ay hindi pa na-standardize para sa HTML, ngunit sinusuportahan ito ng lahat ng modernong browser. 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, bilang karagdagan sa aria-disabled="true", magsama rin ng tabindex="-1"attribute sa mga link na ito upang pigilan silang makatanggap ng focus sa keyboard, at gumamit ng custom na JavaScript upang ganap na i-disable ang kanilang functionality.

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

Plugin ng pindutan

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.

I-toggle ang mga estado

Idagdag data-toggle="button"upang i-toggle ang activekatayuan ng isang button. Kung pre-toggling mo ang isang button, dapat mong manual na idagdag ang .activeklase at aria-pressed="true" sa <button>.

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

Mga checkbox at radio button

Ang mga estilo ng Bootstrap .buttonay 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-groupnaglalaman ng mga binagong button na iyon upang paganahin ang kanilang pag-uugali sa pag-togg sa pamamagitan ng JavaScript at idagdag .btn-group-togglesa 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 clickkaganapan 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 checkedproperty ng input—kakailanganin mong i-toggle .activeang <label>manual.

Tandaan na ang mga paunang na-check na button ay nangangailangan sa iyo na manu-manong idagdag ang .activeklase sa input ng <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>

Paraan