Butang
Gunakan gaya butang tersuai Bootstrap untuk tindakan dalam bentuk, dialog dan banyak lagi dengan sokongan untuk berbilang saiz, keadaan dan banyak lagi.
Contoh
Bootstrap termasuk beberapa gaya butang yang dipratentukan, masing-masing memenuhi tujuan semantiknya sendiri, dengan beberapa tambahan yang diberikan untuk lebih kawalan.
<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>
Menyampaikan makna kepada teknologi bantuan
Menggunakan warna untuk menambah makna hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (cth teks yang boleh dilihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .sr-only
kelas.
Lumpuhkan pembalut teks
Jika anda tidak mahu teks butang dibalut, anda boleh menambah .text-nowrap
kelas pada butang. Dalam Sass, anda boleh menetapkan $btn-white-space: nowrap
untuk melumpuhkan pembalut teks untuk setiap butang.
Tag butang
Kelas .btn
direka bentuk untuk digunakan dengan <button>
elemen. Walau bagaimanapun, anda juga boleh menggunakan kelas <a>
atau <input>
elemen ini (walaupun sesetengah penyemak imbas mungkin menggunakan pemaparan yang berbeza sedikit).
Apabila menggunakan kelas butang pada <a>
elemen yang digunakan untuk mencetuskan kefungsian dalam halaman (seperti kandungan runtuh), dan bukannya memaut ke halaman atau bahagian baharu dalam halaman semasa, pautan ini harus diberikan role="button"
untuk menyampaikan tujuannya dengan sewajarnya kepada teknologi bantuan seperti pembaca skrin.
<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">
Butang garis besar
Memerlukan butang, tetapi bukan warna latar belakang yang besar yang mereka bawa? Gantikan kelas pengubah suai lalai dengan kelas .btn-outline-*
untuk mengalih keluar semua imej latar belakang dan warna pada sebarang butang.
<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>
Saiz
Inginkan butang yang lebih besar atau lebih kecil? Tambah .btn-lg
atau .btn-sm
untuk saiz 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>
Buat butang tahap blok—yang menjangkau lebar penuh ibu bapa—dengan menambahkan .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>
Keadaan aktif
Butang akan kelihatan ditekan apabila aktif dengan latar belakang yang lebih gelap, sempadan yang lebih gelap dan, apabila bayang didayakan, bayang sisipan. Tidak perlu menambah kelas kepada <button>
s kerana mereka menggunakan kelas pseudo . Walau bagaimanapun, anda masih boleh memaksa penampilan aktif yang sama dengan .active
(dan sertakan aria-pressed=“true”
atribut) sekiranya anda perlu meniru keadaan secara pemrograman.
<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>
Keadaan kurang upaya
Jadikan butang kelihatan tidak aktif dengan menambahkan disabled
atribut boolean pada mana-mana <button>
elemen.
<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>
Butang dilumpuhkan menggunakan <a>
elemen berkelakuan agak berbeza:
<a>
s tidak menyokongdisabled
atribut, jadi anda mesti menambah.disabled
kelas untuk menjadikannya kelihatan dilumpuhkan secara visual.- Beberapa gaya mesra masa depan disertakan untuk melumpuhkan semua
pointer-events
pada butang sauh. Dalam penyemak imbas yang menyokong harta itu, anda tidak akan melihat kursor yang dilumpuhkan sama sekali. - Butang yang dilumpuhkan menggunakan
<a>
harus termasukaria-disabled="true"
atribut untuk menunjukkan keadaan elemen kepada teknologi bantuan. - Butang yang dilumpuhkan menggunakan
<a>
tidak harus termasukhref
atribut.
<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 pautan
Untuk menampung kes di mana anda perlu menyimpan href
atribut pada pautan yang dilumpuhkan, .disabled
kelas menggunakan pointer-events: none
untuk cuba melumpuhkan fungsi pautan <a>
s. Ambil perhatian bahawa sifat CSS ini belum lagi diseragamkan untuk HTML, tetapi semua penyemak imbas moden menyokongnya. Selain itu, walaupun dalam penyemak imbas yang menyokong pointer-events: none
, navigasi papan kekunci kekal tidak terjejas, bermakna pengguna papan kekunci yang kelihatan dan pengguna teknologi bantuan masih boleh mengaktifkan pautan ini. Jadi untuk selamat, sebagai tambahan kepada aria-disabled="true"
, sertakan tabindex="-1"
atribut pada pautan ini untuk menghalangnya daripada menerima fokus papan kekunci dan menggunakan JavaScript tersuai untuk melumpuhkan fungsinya sama sekali.
<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 butang
Lakukan lebih banyak dengan butang. Butang kawalan menyatakan atau buat kumpulan butang untuk lebih banyak komponen seperti bar alat.
Toggle states
Add data-toggle="button"
to toggle a button’s active
state. If you’re pre-toggling a button, you must manually add the .active
class and aria-pressed="true"
to the <button>
.
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
Single toggle
</button>
Checkbox and radio buttons
Bootstrap’s .button
styles can be applied to other elements, such as <label>
s, to provide checkbox or radio style button toggling. Add data-toggle="buttons"
to a .btn-group
containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle
to style the <input>
s within your buttons. Note that you can create single input-powered buttons or groups of them.
Keadaan yang ditandai untuk butang ini hanya dikemas kini melalui click
acara pada butang. Jika anda menggunakan kaedah lain untuk mengemas kini input—cth, dengan <input type="reset">
atau dengan menggunakan sifat input secara manual checked
—anda perlu menogol .active
secara <label>
manual.
Ambil perhatian bahawa butang prasemak memerlukan anda menambah .active
kelas secara manual pada 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>
Kaedah
Kaedah | Penerangan |
---|---|
$().button('toggle') |
Togol keadaan tolak. Memberi butang rupa bahawa ia telah diaktifkan. |
$().button('dispose') |
Memusnahkan butang elemen. |