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

Lumpuhkan pembalut teks

Jika anda tidak mahu teks butang dibalut, anda boleh menambah .text-nowrapkelas pada butang. Dalam Sass, anda boleh menetapkan $btn-white-space: nowrapuntuk melumpuhkan pembalut teks untuk setiap butang.

Tag butang

Kelas .btndireka 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-lgatau .btn-smuntuk 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 (dengan latar belakang yang lebih gelap, jidar yang lebih gelap dan bayang sisipan) apabila aktif. 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 disabledatribut 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 yang dilumpuhkan menggunakan <a>elemen berkelakuan agak berbeza:

• <a>s tidak menyokong disabledatribut, jadi anda mesti menambah .disabledkelas untuk menjadikannya kelihatan dilumpuhkan secara visual.
• Beberapa gaya mesra masa depan disertakan untuk melumpuhkan semua pointer-eventspada butang sauh. Dalam penyemak imbas yang menyokong harta itu, anda tidak akan melihat kursor yang dilumpuhkan sama sekali.
• Butang yang dilumpuhkan harus mengandungi aria-disabled="true"atribut untuk menunjukkan keadaan elemen kepada teknologi bantuan.

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

Togol keadaan

Tambahkan data-toggle="button"untuk menogol keadaan butang active. Jika anda pra-menogol butang, anda mesti menambah .activekelas secara manual dan aria-pressed="true" pada <button>.

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

Kotak semak dan butang radio

Gaya Bootstrap .buttonboleh digunakan pada elemen lain, seperti <label>s, untuk menyediakan kotak semak atau togol butang gaya radio. Tambahkan data-toggle="buttons"pada yang .btn-groupmengandungi butang yang diubah suai tersebut untuk mendayakan gelagat togol mereka melalui JavaScript dan tambah .btn-group-toggleuntuk menggayakan <input>s dalam butang anda. Ambil perhatian bahawa anda boleh membuat satu butang berkuasa input atau kumpulan daripadanya.

Keadaan yang ditandai untuk butang ini hanya dikemas kini melalui clickacara 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 .activesecara <label>manual.

Ambil perhatian bahawa butang prasemak memerlukan anda menambah .activekelas 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