in English

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.

<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

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

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

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

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.

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

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 kedah kalebet aria-disabled="true"atribut pikeun nunjukkeun kaayaan unsur pikeun téknologi anu ngabantosan.

Tumbu primér Tumbu

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

Patalina fungsi caveat

Kelas .disabledngagunakeun pointer-events: nonepikeun nyobaan mareuman fungsionalitas link <a>s, tapi éta sipat CSS teu acan standarisasi. 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.

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.

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

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

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

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

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>

Togél tautan Link toggle aktip Tumbu toggle ditumpurkeun

<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 href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Métode

Anjeun tiasa nyiptakeun conto tombol sareng konstruktor tombol, contona:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

Métode	Katerangan
`toggle`	Toggles kaayaan push. Méré tombol tampilan yén éta geus diaktipkeun.
`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)`

Contona, pikeun toggle sadaya tombol

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Sass

Variabel

$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:              $link-color;
$btn-link-hover-color:        $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

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)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    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)
) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

Gelung

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} {
    @include button-variant($value, $value);
  }
}

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