Tombol

Gunakake gaya tombol khusus Bootstrap kanggo tumindak ing formulir, dialog, lan liya-liyane kanthi dhukungan kanggo macem-macem ukuran, negara, lan liya-liyane.

Tuladha

Bootstrap kalebu sawetara gaya tombol sing wis ditemtokake, saben duwe tujuan semantik dhewe, kanthi sawetara tambahan sing dibuwang kanggo kontrol liyane.

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

Pateni bungkus teks

Yen sampeyan ora pengin teks tombol kanggo mbungkus, sampeyan bisa nambah .text-nowrapkelas kanggo tombol. Ing Sass, sampeyan bisa nyetel $btn-white-space: nowrapkanggo mateni bungkus teks kanggo saben tombol.

Tag tombol

Kelas .btnkasebut dirancang kanggo digunakake karo <button>unsur kasebut. Nanging, sampeyan uga bisa nggunakake kelas iki ing <a>utawa <input>unsur (sanajan sawetara browser bisa nggunakake rendering rada beda).

Nalika nggunakake kelas tombol ing <a>unsur sing digunakake kanggo micu fungsi ing kaca (kaya ambruk isi), tinimbang ngubungake menyang kaca anyar utawa bagean ing kaca saiki, pranala iki kudu diwenehi role="button"kanggo tepat ngirim tujuane kanggo teknologi bantuan kayata maca 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

Mbutuhake tombol, nanging ora werna latar mburi dibalèkaké padha nggawa? Ganti kelas modifier standar karo .btn-outline-*sing kanggo mbusak kabeh gambar latar mburi lan werna ing tombol sembarang.

<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

Apik tombol luwih gedhe utawa luwih cilik? Tambah .btn-lgutawa .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>

Nggawe tombol tingkat pemblokiran-sing ukurane jembar lengkap saka wong tuwa-kanthi nambahake .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>

Status aktif

Tombol bakal katon ditekan nalika aktif kanthi latar mburi sing luwih peteng, wates sing luwih peteng, lan, yen bayangan diaktifake, bayangan inset. Ora perlu nambah kelas kanggo <button>s amarga padha nggunakake pseudo-kelas . Nanging, sampeyan isih bisa meksa katon aktif padha karo .active(lan kalebu aria-pressed=“true”atribut) yen sampeyan kudu nurun negara 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>

negara dipatèni

Nggawe tombol katon ora aktif kanthi nambahake disabledatribut boolean menyang <button>unsur apa wae.

<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 sing dipateni nggunakake <a>unsur tumindak rada beda:

• <a>s ora ndhukung disabledatribut, dadi sampeyan kudu nambah .disabledkelas kanggo nggawe visual katon dipatèni.
• Sawetara gaya ramah mangsa kalebu kanggo mateni kabeh pointer-eventstombol anchor. Ing browser sing ndhukung properti kasebut, sampeyan ora bakal bisa ndeleng kursor sing dipateni.
• Tombol dipatèni nggunakake <a>kudu kalebu aria-disabled="true"atribut kanggo nunjukaké negara unsur kanggo teknologi assistive.
• Tombol dipatèni nggunakake <a> ngirim ora kalebu 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>

Kaveat fungsi link

Kanggo nutupi kasus ngendi sampeyan kudu nyimpen hrefatribut ing link dipatèni, .disabledkelas digunakake pointer-events: nonekanggo nyoba kanggo mateni fungsi link saka <a>s. Elinga yen properti CSS iki durung standar kanggo HTML, nanging kabeh browser modern ndhukung. Kajaba iku, sanajan ing browser sing ndhukung pointer-events: none, pandhu arah keyboard tetep ora kena pengaruh, tegese pangguna keyboard sing katon lan pangguna teknologi pitulung isih bisa ngaktifake tautan kasebut. Supaya aman, saliyane aria-disabled="true", uga kalebu tabindex="-1"atribut ing pranala kasebut kanggo nyegah wong-wong mau nampa fokus keyboard, lan nggunakake JavaScript khusus kanggo mateni fungsine kabeh.

<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

Apa liyane karo tombol. Tombol kontrol nyatakake utawa nggawe klompok tombol kanggo komponen liyane kaya toolbar.

Ngalih negara

Tambah data-toggle="button"kanggo ngalih status tombol active. Yen sampeyan wis ngowahi tombol, sampeyan kudu nambahake .activekelas lan aria-pressed="true" menyang <button>.

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

Kotak centhang lan tombol radio

Gaya Bootstrap .buttonbisa diterapake ing unsur liyane, kayata <label>s, kanggo nyedhiyakake kothak centhang utawa tombol gaya radio. Tambah data-toggle="buttons"menyang sing .btn-groupngemot tombol sing diowahi kanggo ngaktifake prilaku toggling liwat JavaScript lan nambah .btn-group-togglegaya <input>s ing tombol sampeyan. Elinga yen sampeyan bisa nggawe tombol siji input-powered utawa klompok saka wong-wong mau.

Negara sing dicenthang kanggo tombol kasebut mung dianyari liwat clickacara ing tombol kasebut. Yen sampeyan nggunakake cara liya kanggo nganyari input-contone, kanthi <input type="reset">utawa kanthi manual ngetrapake checkedproperti input-sampeyan kudu ngalih .activekanthi <label>manual.

Elinga yen tombol sing wis dicenthang mbutuhake sampeyan nambahake kelas kanthi manual .activemenyang 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>

Metode