Kancing

Anggo gaya tombol khusus Bootstrap pikeun tindakan dina bentuk, dialog, sareng seueur deui kalayan dukungan pikeun sababaraha ukuran, kaayaan, sareng seueur deui.

Contona

Bootstrap kalebet sababaraha gaya tombol anu tos siap, masing-masing ngalayanan tujuan semantikna, sareng sababaraha tambahan anu dialungkeun pikeun langkung seueur 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>

Nonaktipkeun bungkus téks

Upami anjeun henteu hoyong téks tombol dibungkus, anjeun tiasa nambihan .text-nowrapkelas kana tombol. Dina Sass, anjeun tiasa nyetél $btn-white-space: nowrapnganonaktipkeun bungkus téks pikeun unggal tombol.

Tag tombol

Kelas .btndirancang pikeun dianggo sareng <button>unsur. Nanging, anjeun ogé tiasa nganggo kelas ieu <a>atanapi <input>elemen (sanaos sababaraha panyungsi tiasa nerapkeun rendering anu rada béda).

Nalika nganggo kelas tombol dina <a>elemen anu dianggo pikeun memicu fungsionalitas dina halaman (sapertos eusi runtuh), tinimbang ngahubungkeun ka halaman atanapi bagian énggal dina halaman ayeuna, tautan ieu kedah dipasihkeun role="button"pikeun leres-leres nepikeun tujuanana kana téknologi anu ngabantosan sapertos. pamiarsa layar.

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

Tombol outline

Peryogi tombol, tapi sanés warna latar anu ageung anu aranjeunna bawa? Ganti kelas modifier standar sareng .btn-outline-*anu ngahapus sadaya gambar latar sareng warna dina tombol naon waé.

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

Ukuran

Fancy tombol gedé atawa leutik? Tambihkeun .btn-lgatanapi .btn-smkanggo ukuran tambahan.

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

Nyiptakeun tombol tingkat blok - anu ngalegaan lebar pinuh ku indungna - ku nambihan .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>

kaayaan aktip

Tombol bakal muncul dipencet nalika aktip sareng latar anu langkung poék, wates anu langkung poék, sareng, nalika kalangkang diaktipkeun, kalangkang inset. Teu perlu pikeun nambahkeun kelas ka <button>s sabab ngagunakeun pseudo-kelas . Najan kitu, anjeun masih bisa maksakeun penampilan aktif sami kalawan .active(jeung kaasup aria-pressed=“true”atribut) mun anjeun kudu ngayakeun réplikasi kaayaan 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>

kaayaan ditumpurkeun

Jieun tombol kasampak teu aktif ku nambahkeun disabledatribut boolean kana <button>elemen naon.

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

Tombol ditumpurkeun ngagunakeun <a>unsur kalakuanana rada béda:

• <a>s teu ngarojong disabledatribut, jadi Anjeun kudu nambahan .disabledkelas pikeun make eta visually némbongan ditumpurkeun.
• Sababaraha gaya ramah-hareup kaasup pikeun nganonaktipkeun sadayana pointer-eventsdina tombol jangkar. Dina browser anu ngadukung sipat éta, anjeun moal ningali kursor anu ditumpurkeun.
• Tombol anu ditumpurkeun <a>kedah kalebet aria-disabled="true"atribut pikeun nunjukkeun kaayaan unsur pikeun téknologi anu ngabantosan.
• Tombol ditumpurkeun ngagunakeun <a> teu kudu kaasup hrefatribut.

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

Patalina fungsi caveat

Pikeun nutupan kasus dimana anjeun kudu tetep hrefatribut dina tumbu ditumpurkeun, .disabledkelas ngagunakeun pointer-events: nonenyoba nganonaktipkeun pungsi link <a>s. Catet yén sipat CSS ieu henteu acan standarisasi pikeun HTML, tapi sadaya panyungsi modéren ngadukung éta. Sajaba ti éta, sanajan dina panyungsi nu ngarojong pointer-events: none, navigasi kibor tetep teu kapangaruhan, hartina pamaké keyboard sighted jeung pamaké téknologi pitulung bakal tetep bisa ngaktipkeun Tumbu ieu. Janten aman, salian ti aria-disabled="true", kalebet ogé tabindex="-1"atribut dina tautan ieu pikeun nyegah aranjeunna nampi fokus keyboard, sareng nganggo JavaScript khusus pikeun nganonaktipkeun fungsionalitasna sadayana.

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

Ngalakukeun leuwih ku tombol. Tombol kontrol nyatakeun atanapi jieun grup tombol pikeun langkung seueur komponén sapertos tulbar.

Togél kaayaan

Tambahkeun data-toggle="button"ka toggle kaayaan hiji tombol active. Upami anjeun tos-toggling tombol, anjeun kedah sacara manual nambihan .activekelas sareng aria-pressed="true" ka <button>.

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

Kotak centang sareng tombol radio

Gaya Bootstrap .buttontiasa diterapkeun ka elemen sanés, sapertos <label>s, pikeun nyayogikeun kotak centang atanapi toggling tombol gaya radio. Tambahkeun data-toggle="buttons"ka a .btn-groupngandung eta tombol dirobah pikeun ngaktipkeun kabiasaan toggling maranéhanana via JavaScript tur nambahkeun .btn-group-togglekana gaya <input>s dina tombol Anjeun. Catet yén anjeun tiasa nyiptakeun tombol atanapi grup anu didamel ku input tunggal.

Kaayaan dipariksa pikeun tombol ieu ngan diropéa via clickacara on tombol. Upami anjeun nganggo metode anu sanés pikeun ngapdet input-contona, nganggo <input type="reset">atanapi ku cara manual ngalarapkeun checkedproperti input-anjeun kedah togél .activesacara <label>manual.

Catet yén tombol anu tos dipariksa meryogikeun anjeun nambihan .activekelas sacara manual kana input <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>

Métode