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 pag-andar sa sulud sa panid (sama sa pagkahugno sa sulud), imbes nga mag-link sa mga bag-ong 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 kung aktibo nga adunay mas ngitngit nga background, mas itom nga utlanan, ug, kung ang mga anino mahimo, usa ka inset nga anino. Dili kinahanglan nga idugang ang usa ka klase sa <button>s tungod kay naggamit sila usa ka pseudo-class . Bisan pa, mahimo nimong pugson 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 nga gigamit <a>kinahanglan nga maglakip sa aria-disabled="true"hiyas aron ipakita ang kahimtang sa elemento sa mga teknolohiya nga makatabang.
• Ang gigamit nga mga butones nga adunay kakulangan <a> kinahanglan dili maglakip sa hrefhiyas.

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

Pag-link sa function caveat

Aron matabonan ang mga kaso diin kinahanglan nimong tipigan ang hrefattribute sa usa ka disabled link, ang .disabledklase naggamit pointer-events: nonesa pagsulay sa pag-disable sa link functionality sa <a>s. Timan-i nga kining CSS property wala pa gi-standardize para sa HTML, pero gisuportahan kini sa tanang modernong browser. Dugang pa, bisan sa mga browser nga nagsuporta pointer-events: none, ang pag-navigate sa keyboard nagpabilin nga wala maapektuhan, nagpasabut nga ang mga nakit-an nga tiggamit sa keyboard ug mga tiggamit sa mga teknolohiya nga makatabang mahimo gihapon nga ma-aktibo kini nga mga link. Busa aron luwas, dugang sa aria-disabled="true", ilakip usab ang usa ka tabindex="-1"hiyas niini nga mga link aron mapugngan sila nga makadawat sa focus sa keyboard, ug gamiton ang custom nga JavaScript aron ma-disable ang ilang functionality sa hingpit.

<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