Mga butones

Gamita ang custom button styles sa Bootstrap para sa mga aksyon sa mga porma, mga dialog, ug uban pa nga adunay suporta sa daghang gidak-on, estado, ug uban pa.

Mga pananglitan

Ang Bootstrap naglakip sa pipila ka gitakda nang daan nga mga estilo sa buton, ang matag usa nagsilbi sa kaugalingong semantiko nga katuyoan, nga adunay pipila ka mga ekstra nga gilabay alang sa dugang nga 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 pagputos sa teksto

Kung dili nimo gusto nga maputos ang buton nga teksto, mahimo nimong idugang ang .text-nowrapklase sa buton. Sa Sass, mahimo nimong itakda ang $btn-white-space: nowrappag-disable sa pagputos sa teksto alang sa matag buton.

Mga tag sa butones

Ang .btnmga klase gilaraw aron magamit sa <button>elemento. Bisan pa, mahimo usab nimo gamiton kini nga mga klase sa <a>o <input>mga elemento (bisan kung ang pipila nga mga browser mahimo’g magamit ang usa ka gamay nga lahi nga paghubad).

Kung gigamit ang mga klase sa butones sa <a>mga elemento nga gigamit aron ma-trigger ang in-page nga pagpaandar (sama sa pagkahugno sa sulud), imbes nga mag-link sa bag-ong mga panid o seksyon sa sulod sa karon nga panid, kini nga mga link kinahanglan hatagan usa ka role="button"tukma nga pagpahayag sa ilang katuyoan sa mga teknolohiya nga makatabang sama sa mga magbabasa sa screen.

<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 buton sa outline

Nanginahanglan usa ka butones, apan dili ang daghang kolor sa background nga ilang gidala? Ilisan ang mga klase sa default modifier sa .btn-outline-*mga magtangtang sa tanan nga mga imahe sa background ug kolor sa bisan unsang butones.

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

Gusto nga mas dako o mas gagmay nga mga buton? Idugang .btn-lgo .btn-smpara sa dugang nga mga gidak-on.

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

Paghimo og block level nga mga buton—kadtong mosangkad sa tibuok gilapdon sa ginikanan—pinaagi sa pagdugang .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>

Aktibo nga kahimtang

Ang mga buton makita nga gipugos (nga adunay mas itom nga background, mas ngitngit nga utlanan, ug inset anino) kung aktibo. Dili kinahanglan nga idugang ang usa ka klase sa <button>s tungod kay naggamit sila usa ka pseudo-class . Bisan pa, mahimo nimong ipugos ang parehas nga aktibo nga hitsura sa .active(ug ilakip ang aria-pressed="true"hiyas) kung kinahanglan nimo nga kopyahon 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>

Baldado nga estado

Himua nga dili aktibo ang mga buton pinaagi sa pagdugang sa disabledboolean nga attribute sa bisan unsang <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>

Ang mga disabled nga buton nga naggamit sa <a>elemento adunay lahi nga kinaiya:

• <a>s dili mosuporta sa disabledhiyas, mao nga kinahanglan nimong idugang ang .disabledklase aron kini makita nga walay kakulangan.
• Ang pipila ka mga istilo nga mahigalaon sa umaabot gilakip aron ma-disable ang tanan pointer-eventssa mga buton sa angkla. Sa mga browser nga nagsuporta sa maong kabtangan, dili nimo makita ang disabled nga cursor.
• Ang mga disabled nga buton kinahanglang maglakip sa aria-disabled="true"hiyas aron ipakita ang kahimtang sa elemento ngadto sa mga teknolohiyang makatabang.

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

Butang nga plugin

Buhata ang labi pa gamit ang mga buton. Ang control button nag-ingon o paghimo og mga grupo sa mga buton alang sa dugang nga mga sangkap sama sa mga toolbar.

I-toggle ang mga estado

Idugang data-toggle="button"aron i-toggle ang activekahimtang sa buton. Kung nag-pre-toggling ka sa usa ka buton, kinahanglan nimo nga mano-mano nga idugang ang .activeklase ug aria-pressed="true" sa <button>.

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

Checkbox ug radio button

Ang mga estilo sa Bootstrap .buttonmahimong magamit sa ubang mga elemento, sama sa <label>s, aron mahatagan ang checkbox o radio style button toggling. Idugang data-toggle="buttons"ngadto sa usa ka .btn-groupsulod niadtong giusab nga mga buton aron mahimo ang ilang toggling nga kinaiya pinaagi sa JavaScript ug idugang .btn-group-togglesa estilo sa mga <input>s sulod sa imong mga buton. Timan-i nga makahimo ka og usa ka input-powered nga buton o mga grupo niini.

Ang gisusi nga estado alang niini nga mga buton gi -update lamang pinaagi sa clickpanghitabo sa buton. Kung mogamit ka og lain nga pamaagi sa pag-update sa input—pananglitan, uban <input type="reset">o pinaagi sa manual nga paggamit sa checkedkabtangan sa input—kinahanglan nimo nga i-toggle .activeang <label>manual.

Timan-i nga ang mga buton nga gisusi nang daan nanginahanglan nimo nga mano-mano nga idugang ang .activeklase sa input's <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>

Pamaagi