in English

Mga butones

Gamita ang custom button styles sa Bootstrap para sa mga aksyon sa mga porma, mga dialog, ug uban pa nga adunay suporta sa daghang gidak-on, estado, ug uban pa.

Niini nga panid

Mga pananglitan

Ang Bootstrap naglakip sa pipila ka gitakda nang daan nga mga estilo sa buton, ang matag usa nagsilbi sa kaugalingong semantiko nga katuyoan, nga adunay pipila ka mga ekstra nga gilabay alang sa dugang nga 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>

Paghatag kahulogan sa mga teknolohiya sa pagtabang

Ang paggamit og kolor aron makadugang og kahulogan naghatag lamang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang impormasyon nga gipaila sa kolor mahimong dayag gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .visually-hiddenklase.

I-disable ang pagputos sa teksto

Kung dili nimo gusto nga maputos ang buton nga teksto, mahimo nimong idugang ang .text-nowrapklase sa buton. Sa Sass, mahimo nimong itakda ang $btn-white-space: nowrappag-disable sa pagputos sa teksto alang sa matag buton.

Mga tag sa butones

Ang .btnmga klase gilaraw aron magamit sa <button>elemento. Bisan pa, mahimo usab nimo gamiton kini nga mga klase sa <a>o <input>mga elemento (bisan kung ang pipila nga mga browser mahimo’g magamit ang usa ka gamay nga lahi nga paghubad).

Kung gigamit ang mga klase sa butones sa <a>mga elemento nga gigamit aron ma-trigger ang in-page nga pagpaandar (sama sa pagkahugno sa sulud), imbes nga mag-link sa bag-ong mga panid o seksyon sa sulod sa karon nga panid, kini nga mga link kinahanglan hatagan usa ka role="button"tukma nga pagpahayag sa ilang katuyoan sa mga teknolohiya nga makatabang sama sa mga magbabasa sa screen.

Link

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

Mga buton sa outline

Nanginahanglan usa ka butones, apan dili ang daghang kolor sa background nga ilang gidala? Ilisan ang mga klase sa default modifier sa .btn-outline-*mga magtangtang sa tanan nga mga imahe sa background ug kolor sa bisan unsang butones.

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

Pipila sa mga estilo sa butones naggamit ug medyo gaan nga kolor sa foreground, ug kinahanglan lang gamiton sa ngitngit nga background aron adunay igo nga kalainan.

Mga gidak-on

Gusto nga mas dako o mas gagmay nga mga buton? Idugang .btn-lgo .btn-smpara sa dugang nga mga gidak-on.

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

Baldado nga estado

Himua nga dili aktibo ang mga buton pinaagi sa pagdugang sa disabledboolean nga attribute sa bisan unsang <button>elemento. Gipadapat ang mga buton nga pointer-events: nonenabalda, nga nagpugong sa pag-hover ug aktibo nga mga estado gikan sa pag-trigger.

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

Ang mga disabled nga buton nga naggamit sa <a>elemento adunay lahi nga kinaiya:

<a>s dili mosuporta sa disabledhiyas, mao nga kinahanglan nimong idugang ang .disabledklase aron kini makita nga walay kakulangan.
Ang pipila ka mga istilo nga mahigalaon sa umaabot gilakip aron ma-disable ang tanan pointer-eventssa mga buton sa angkla.
Ang mga disabled nga buton kinahanglang maglakip sa aria-disabled="true"hiyas aron ipakita ang kahimtang sa elemento ngadto sa mga teknolohiyang makatabang.

Panguna nga link Link

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

Pag-link sa function caveat

Ang .disabledklase naggamit pointer-events: nonesa pagsulay sa pag-disable sa link functionality sa <a>s, apan kana nga CSS property dili pa estandard. Dugang pa, bisan sa mga browser nga nagsuporta pointer-events: none, ang pag-navigate sa keyboard nagpabilin nga wala maapektuhan, nagpasabut nga ang mga nakit-an nga tiggamit sa keyboard ug mga tiggamit sa mga teknolohiya nga makatabang mahimo gihapon nga ma-aktibo kini nga mga link. Busa aron luwas, dugang sa aria-disabled="true", ilakip usab ang usa ka tabindex="-1"hiyas niini nga mga link aron mapugngan sila nga makadawat sa focus sa keyboard, ug gamiton ang custom nga JavaScript aron ma-disable ang ilang functionality sa hingpit.

I-block ang mga buton

Paghimo responsive stacks sa bug-os nga gilapdon, "block buttons" sama sa sa Bootstrap 4 uban sa usa ka mix sa atong display ug gap utilities. Pinaagi sa paggamit sa mga utilities imbes sa butones nga piho nga mga klase, kita adunay mas dako nga kontrol sa gilay-on, pag-align, ug responsive nga mga kinaiya.

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

Dinhi naghimo kami og usa ka responsive nga kausaban, sugod sa vertically stacked buttons hangtud sa mdbreakpoint, diin .d-md-blockgipulihan ang .d-gridklase, sa ingon nagwagtang sa gap-2utility. Usba ang gidak-on sa imong browser aron makita sila nga nagbag-o.

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

Mahimo nimong i-adjust ang gilapdon sa imong mga block button nga adunay mga klase sa gilapdon sa kolum sa grid. Pananglitan, alang sa tunga sa gilapdon nga "block button", gamita ang .col-6. Isentro kini nga pinahigda uban ang .mx-auto, usab.

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

Ang dugang nga mga utilities mahimong magamit sa pag-adjust sa pag-align sa mga buton kung pinahigda. Dinhi among gikuha ang among miaging responsive nga pananglitan ug gidugang ang pipila ka mga flex utilities ug usa ka margin utility sa buton aron i-align sa tuo ang mga buton kung wala na sila na-stack.

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

Butang nga plugin

Ang button nga plugin nagtugot kanimo sa paghimo og yano nga on/off toggle buttons.

Visually, these toggle buttons are identical to the checkbox toggle buttons. However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked”/“not checked” (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as “button”/“button pressed”. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.

Toggle states

Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies.

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

Toggle link Active toggle link Disabled toggle link

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

Methods

You can create a button instance with the button constructor, for example:

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

Method	Description
`toggle`	Toggles push state. Gives the button the appearance that it has been activated.
`dispose`	Destroys an element's button. (Removes stored data on the DOM element)
`getInstance`	Static method which allows you to get the button instance associated to a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Static method which returns a button instance associated to a DOM element or create a new one in case it wasn't initialised. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)`

For example, to toggle all buttons

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

Sass

Variables

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

Mixins

There are three mixins for buttons: button and button outline variant mixins (both based on $theme-colors), plus a button size 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)
) {
  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);
}

Loops

Button variants (for regular and outline buttons) use their respective mixins with our $theme-colors map to generate the modifier classes in 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);
  }
}