Langkau ke kandungan utama Langkau ke navigasi dokumen
Check
in English

Butang

Gunakan gaya butang tersuai Bootstrap untuk tindakan dalam bentuk, dialog dan banyak lagi dengan sokongan untuk berbilang saiz, keadaan dan banyak lagi.

Pada halaman ini

Contoh

Bootstrap termasuk beberapa gaya butang yang dipratentukan, masing-masing memenuhi tujuan semantiknya sendiri, dengan beberapa tambahan yang diberikan untuk lebih kawalan.

html 
<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 .visually-hiddenkelas.

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.

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

html 
<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>
Sesetengah gaya butang menggunakan warna latar depan yang agak terang dan hanya boleh digunakan pada latar belakang gelap untuk mempunyai kontras yang mencukupi.

Saiz

Inginkan butang yang lebih besar atau lebih kecil? Tambah .btn-lgatau .btn-smuntuk saiz tambahan.

html 
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
html 
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Anda juga boleh melancarkan saiz tersuai anda sendiri dengan pembolehubah CSS:

html 
<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

Keadaan kurang upaya

Jadikan butang kelihatan tidak aktif dengan menambahkan disabledatribut boolean pada mana-mana <button>elemen. Butang yang dilumpuhkan telah pointer-events: nonedigunakan, menghalang tuding dan keadaan aktif daripada dicetuskan.

html 
<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

Butang 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.
  • Butang yang dilumpuhkan menggunakan <a>harus termasuk aria-disabled="true"atribut untuk menunjukkan keadaan elemen kepada teknologi bantuan.
  • Butang yang dilumpuhkan menggunakan <a> tidak harus termasuk hrefatribut.
Pautan utama Pautan
html 
<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

Untuk menampung kes di mana anda perlu menyimpan hrefatribut pada pautan yang dilumpuhkan, .disabledkelas menggunakan pointer-events: noneuntuk 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.

Pautan utama Pautan
html 
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Sekat butang

Cipta tindanan responsif "butang blok" lebar penuh seperti yang terdapat dalam Bootstrap 4 dengan gabungan utiliti paparan dan jurang kami. Dengan menggunakan utiliti dan bukannya kelas khusus butang, kami mempunyai kawalan yang lebih besar ke atas jarak, penjajaran dan gelagat responsif.

html 
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Di sini kami mencipta variasi responsif, bermula dengan butang bertindan menegak sehingga mdtitik putus, di mana .d-md-blockmenggantikan .d-gridkelas, sekali gus membatalkan gap-2utiliti. Ubah saiz pelayar anda untuk melihatnya berubah.

html 
<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Anda boleh melaraskan lebar butang blok anda dengan kelas lebar lajur grid. Contohnya, untuk "butang blok" separuh lebar, gunakan .col-6. Pusatkannya secara mendatar dengan .mx-auto, juga.

html 
<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Utiliti tambahan boleh digunakan untuk melaraskan penjajaran butang apabila mendatar. Di sini kami telah mengambil contoh responsif kami sebelum ini dan menambah beberapa utiliti fleksibel dan utiliti margin pada butang untuk menjajarkan butang ke kanan apabila ia tidak lagi disusun.

html 
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Plugin butang

Pemalam butang membolehkan anda mencipta butang togol hidup/mati yang mudah.

Secara visual, butang togol ini adalah sama dengan butang togol kotak semak . Walau bagaimanapun, ia disampaikan secara berbeza oleh teknologi bantuan: togol kotak pilihan akan diumumkan oleh pembaca skrin sebagai "ditandai"/"tidak ditanda" (kerana, walaupun penampilannya, ia pada asasnya masih kotak pilihan), manakala butang togol ini akan diumumkan sebagai “butang”/“butang ditekan”. Pilihan antara kedua-dua pendekatan ini bergantung pada jenis togol yang anda buat dan sama ada togol itu akan masuk akal kepada pengguna apabila diumumkan sebagai kotak semak atau sebagai butang sebenar atau tidak.

Togol keadaan

Tambahkan data-bs-toggle="button"untuk menogol keadaan butang active. Jika anda pratogol butang, anda mesti menambah .activekelas secara manual dan aria-pressed="true" memastikan ia disampaikan dengan sewajarnya kepada teknologi bantuan.

html 
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
Togol pautan Pautan togol aktif Pautan togol dilumpuhkan
html 
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Kaedah

Anda boleh membuat contoh butang dengan pembina butang, sebagai contoh:

const bsButton = new bootstrap.Button('#myButton')
Kaedah Penerangan
dispose Memusnahkan butang elemen. (Mengalih keluar data yang disimpan pada elemen DOM)
getInstance Kaedah statik yang membolehkan anda mendapatkan contoh butang yang dikaitkan dengan elemen DOM, anda boleh menggunakannya seperti ini: bootstrap.Button.getInstance(element).
getOrCreateInstance Kaedah statik yang mengembalikan contoh butang yang dikaitkan dengan elemen DOM atau mencipta yang baharu sekiranya ia tidak dimulakan. Anda boleh menggunakannya seperti ini: bootstrap.Button.getOrCreateInstance(element).
toggle Togol keadaan tolak. Memberi butang rupa bahawa ia telah diaktifkan.

Contohnya, untuk menogol semua butang

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

Pembolehubah

Ditambah dalam v5.2.0

Sebagai sebahagian daripada pendekatan pembolehubah CSS Bootstrap yang sedang berkembang, butang kini menggunakan pembolehubah CSS tempatan hidup .btnuntuk penyesuaian masa nyata yang dipertingkatkan. Nilai untuk pembolehubah CSS ditetapkan melalui Sass, jadi penyesuaian Sass masih disokong juga.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Setiap .btn-*kelas pengubah suai mengemas kini pembolehubah CSS yang sesuai untuk meminimumkan peraturan CSS tambahan dengan button-variant(), button-outline-variant(), dan button-size()campuran kami.

Berikut ialah contoh membina .btn-*kelas pengubah suai tersuai seperti yang kami lakukan untuk butang unik pada dokumen kami dengan menugaskan semula pembolehubah CSS Bootstrap dengan campuran pembolehubah CSS dan Sass kami sendiri.

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Pembolehubah Sass

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Campuran Sass

Terdapat tiga campuran untuk butang: adunan varian butang dan garis luar butang (kedua-duanya berdasarkan $theme-colors), serta campuran saiz butang.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

gelung Sass

Varian butang (untuk butang biasa dan garis besar) menggunakan campuran masing-masing dengan $theme-colorspeta kami untuk menjana kelas pengubah suai dalam scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}