in English

Tombol

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

Ing kaca iki

Tuladha

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

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>

Nuduhake makna kanggo teknologi assistive

Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (umpamane teks sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .visually-hiddenkelas.

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.

Link

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

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.

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>

Sawetara gaya tombol nggunakake werna latar ngarep sing rada entheng, lan mung kudu digunakake ing latar mburi peteng supaya kontras cukup.

Ukuran

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

Sampeyan malah bisa muter ukuran khusus dhewe karo 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>

negara dipatèni

Nggawe tombol katon ora aktif kanthi nambahake disabledatribut boolean menyang <button>unsur apa wae. Tombol dipatèni wis pointer-events: nonediterapake, nyegah hover lan status aktif saka micu.

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

pranala utami Link

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>

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.

pranala utami Link

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

Gawe tumpukan responsif "tombol pamblokiran" sing ambane kaya sing ana ing Bootstrap 4 kanthi campuran utilitas tampilan lan gap. Kanthi nggunakake utilitas tinimbang kelas khusus tombol, kita duwe kontrol sing luwih gedhe babagan spasi, alignment, lan prilaku 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>

Kene kita nggawe variasi responsif, miwiti karo tombol vertikal dibandhingke nganti mdbreakpoint, ngendi .d-md-blockngganti .d-gridkelas, mangkono nullifying gap-2sarana. Owahi ukuran browser sampeyan kanggo ndeleng owah-owahan.

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>

Sampeyan bisa nyetel ambane tombol blok karo kelas jembar kolom kothak. Contone, kanggo "tombol pamblokiran" setengah jembaré, gunakake .col-6. Pusat kasebut kanthi horisontal .mx-autouga.

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>

Utilitas tambahan bisa digunakake kanggo nyetel alignment tombol nalika horisontal. Ing kene, kita wis njupuk conto responsif sadurunge lan nambah sawetara utilitas fleksibel lan utilitas margin ing tombol kanggo nyelarasake tombol nalika ora ditumpuk maneh.

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

Plugin tombol ngidini sampeyan nggawe tombol toggle on / off sing gampang.

Secara visual, tombol toggle iki identik karo tombol toggle kothak centhang . Nanging, padha dikirim kanthi beda dening teknologi assistive: kothak centhang bakal diumumake dening pembaca layar minangka "dicenthang" / "ora dicenthang" (amarga, sanajan katon, dhasar kasebut isih kothak centhang), dene tombol pilihan kasebut bakal diumumake minangka "tombol" / "tombol ditekan". Pilihan ing antarane rong pendekatan iki bakal gumantung saka jinis pilihan sing sampeyan gawe, lan apa pilihan kasebut bakal migunani kanggo pangguna nalika diumumake minangka kothak centhang utawa minangka tombol nyata.

Ngalih negara

Tambah data-bs-toggle="button"kanggo ngalih status tombol active. Yen sampeyan wis ngalih tombol, sampeyan kudu nambah .activekelas kanthi manual lan aria-pressed="true" mesthekake yen wis dikirim kanthi tepat kanggo teknologi pitulung.

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>

Toggle link Link ngalih aktif Link toggle dipatèni

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>

Metode

Sampeyan bisa nggawe conto tombol nganggo konstruktor tombol, contone:

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

Metode	Katrangan
`dispose`	Ngancurake tombol unsur. (Mbusak data sing disimpen ing unsur DOM)
`getInstance`	Cara statis sing ngidini sampeyan entuk conto tombol sing ana gandhengane karo unsur DOM, sampeyan bisa nggunakake kaya iki: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Cara statis sing ngasilake conto tombol sing digandhengake karo unsur DOM utawa nggawe sing anyar yen ora diwiwiti. Sampeyan bisa nggunakake kaya iki: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Ngalih status push. Menehi tombol katon sing wis diaktifake.

Contone, kanggo ngalih kabeh tombol

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

CSS

Variabel

Ditambahake ing v5.2.0

Minangka bagéan saka pendekatan variabel CSS Bootstrap sing berkembang, tombol saiki nggunakake variabel CSS lokal .btnkanggo kustomisasi wektu nyata sing ditingkatake. Nilai kanggo variabel CSS disetel liwat Sass, supaya kustomisasi Sass isih didhukung.

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

Saben .btn-*kelas modifier nganyari variabel CSS sing cocok kanggo nyilikake aturan CSS tambahan karo button-variant(), button-outline-variant(), lan button-size()mixins kita.

Iki minangka conto nggawe .btn-*kelas modifier khusus kaya sing kita lakoni kanggo tombol sing unik kanggo dokumen kita kanthi ngganti variabel CSS Bootstrap kanthi campuran variabel CSS lan Sass kita dhewe.

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

Ana telung mixin kanggo tombol: tombol lan tombol outline varian mixin (loro adhedhasar $theme-colors), plus ukuran tombol mixin.

@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 (kanggo tombol reguler lan outline) nggunakake mixin masing-masing karo $theme-colorspeta kita kanggo ngasilake kelas modifier ing 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);
  }
}