Kancing

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

Dina kaca ieu

Contona

Bootstrap kalebet sababaraha gaya tombol anu tos siap, masing-masing ngalayanan tujuan semantikna, sareng sababaraha tambahan anu dialungkeun pikeun langkung seueur kontrol.

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>

Nepikeun harti kana téknologi anu ngabantosan

Ngagunakeun warna pikeun nambahkeun harti ngan nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi mantuan - kayaning pamiarsa layar. Pastikeun yén inpormasi anu dilambangkeun ku warna écés tina eusina sorangan (contona téks anu katingali), atanapi kalebet dina cara alternatif, sapertos téks tambahan disumputkeun sareng .visually-hiddenkelas.

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.

Tumbu

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

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

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>

Sababaraha gaya tombol ngagunakeun warna foreground anu kawilang terang, sareng ngan ukur dianggo dina latar anu poék supados gaduh kontras anu cekap.

Ukuran

Fancy tombol gedé atawa leutik? Tambihkeun .btn-lgatanapi .btn-smkanggo ukuran 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>

Anjeun malah tiasa ngagulung ukuran khusus anjeun sareng variabel 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>

kaayaan ditumpurkeun

Jieun tombol kasampak teu aktif ku nambahkeun disabledatribut boolean kana <button>elemen naon. Tombol ditumpurkeun geus pointer-events: nonedilarapkeun ka, nyegah hover jeung kaayaan aktip ti pemicu.

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>

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

Tumbu primér Tumbu

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>

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.

Tumbu primér Tumbu

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>

Tombol blokir

Nyiptakeun tumpukan responsif tina "tombol blok" lebar pinuh, sapertos anu aya dina Bootstrap 4 kalayan campuran utilitas tampilan sareng gap kami. Ku ngagunakeun utilitas tinimbang kelas husus tombol, urang boga kontrol leuwih gede kana spasi, alignment, sarta paripolah 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 dieu urang nyieun variasi responsif, dimimitian ku tombol vertikal tumpuk dugi mdbreakpoint nu, dimana .d-md-blockngagantikeun .d-gridkelas, sahingga nullifying gap-2utiliti. Ganti ukuran browser anjeun pikeun ningali aranjeunna robih.

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>

Anjeun tiasa nyaluyukeun lebar tombol blok anjeun kalayan kelas lebar kolom grid. Contona, pikeun satengah-lebar "tombol blok", make .col-6. Puseur sacara horisontal sareng .mx-autoogé.

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 tiasa dianggo pikeun nyaluyukeun alignment tombol nalika horizontal. Di dieu kami parantos nyandak conto responsif sateuacana sareng nambihan sababaraha utilitas fleksibel sareng utilitas margin dina tombol ka katuhu align tombol nalika aranjeunna henteu ditumpuk.

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 tombol

Tombol plugin ngidinan Anjeun pikeun nyieun basajan on / off tombol toggle.

Sacara visual, tombol toggle ieu idéntik jeung tombol toggle kotak centang . Tapi, aranjeunna dikirimkeun sacara béda ku téknologi anu ngabantosan: togél kotak centang bakal diumumkeun ku pamiarsa layar salaku "dipariksa" / "henteu dipariksa" (sabab, sanaos penampilanna, aranjeunna dina dasarna masih kotak centang), sedengkeun tombol togél ieu bakal diumumkeun salaku "tombol" / "tombol dipencet". Pilihan antara dua pendekatan ieu bakal gumantung kana jinis toggle anu anjeun ciptakeun, sareng naha togél éta bakal asup akal pikeun pangguna nalika diumumkeun salaku kotak centang atanapi salaku tombol anu saleresna.

Togél kaayaan

Tambahkeun data-bs-toggle="button"ka toggle kaayaan hiji tombol active. Upami anjeun tos togling tombol, anjeun kedah nambihan .activekelas sacara manual sareng aria-pressed="true" mastikeun yén éta dikirimkeun leres kana téknologi anu ngabantosan.

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>

Togél tautan Link toggle aktip Tumbu toggle ditumpurkeun

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>

Métode

Anjeun tiasa nyiptakeun conto tombol sareng konstruktor tombol, contona:

const bsButton = new bootstrap.Button('#myButton')

Métode	Katerangan
`dispose`	Ngancurkeun tombol unsur. (Ngahapus data anu disimpen dina unsur DOM)
`getInstance`	Metodeu statik anu ngamungkinkeun anjeun kéngingkeun conto tombol anu aya hubunganana sareng unsur DOM, anjeun tiasa nganggo sapertos kieu: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Métode statik anu ngabalikeun conto tombol anu aya hubunganana sareng unsur DOM atanapi nyiptakeun anu énggal upami henteu diinisialisasi. Anjeun tiasa nganggo sapertos kieu: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Toggles kaayaan push. Méré tombol tampilan yén éta geus diaktipkeun.

Contona, pikeun toggle sadaya tombol

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

CSS

Variabel

Ditambahkeun dina v5.2.0

Salaku bagian tina pendekatan variabel CSS Bootstrap anu ngembang, tombol ayeuna nganggo variabel CSS lokal .btnpikeun kustomisasi sacara real-time anu ditingkatkeun. Nilai pikeun variabel CSS diatur via Sass, jadi kustomisasi Sass masih dirojong, teuing.

  --#{$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);

Unggal .btn-*kelas modifier ngamutahirkeun variabel CSS luyu pikeun ngaleutikan aturan CSS tambahan kalawan kami button-variant(), button-outline-variant(), sarta button-size()mixins.

Ieu conto ngawangun .btn-*kelas modifier khusus sapertos anu urang lakukeun pikeun tombol-tombol anu unik pikeun dokumen urang ku cara napelkeun deui variabel CSS Bootstrap sareng campuran variabel CSS sareng Sass urang sorangan.

.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%)};
}

variabel 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%;

Sass mixins

Aya tilu mixins pikeun tombol: tombol jeung tombol outline varian mixins (duanana dumasar kana $theme-colors), ditambah hiji mixin ukuran tombol.

@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};
}

Sass puteran

Varian tombol (pikeun tombol biasa sareng outline) nganggo campuran masing-masing sareng $theme-colorspeta kami pikeun ngahasilkeun kelas modifier dina 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);
  }
}