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 lang 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 klaro 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 pag-andar sa sulud sa panid (sama sa pagkahugno sa sulud), imbes nga mag-link sa mga bag-ong 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 nga gigamit <a>kinahanglan nga maglakip sa aria-disabled="true"hiyas aron ipakita ang kahimtang sa elemento sa mga teknolohiya nga makatabang.
Ang gigamit nga mga butones nga adunay kakulangan <a> kinahanglan dili maglakip sa hrefhiyas.

Panguna nga link Link

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Pag-link sa function caveat

Aron matabonan ang mga kaso diin kinahanglan nimong tipigan ang hrefattribute sa usa ka disabled link, ang .disabledklase naggamit pointer-events: nonesa pagsulay sa pag-disable sa link functionality sa <a>s. Timan-i nga kining CSS property wala pa gi-standardize para sa HTML, pero gisuportahan kini sa tanang modernong browser. 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.

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>

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.

Sa tan-aw, kini nga mga toggle button parehas sa checkbox toggle buttons . Bisan pa, lahi kini nga gipahayag pinaagi sa mga teknolohiya nga makatabang: ang mga toggle sa checkbox ipahibalo sa mga magbabasa sa screen nga "gisusi" / "wala gisusi" (tungod kay, bisan pa sa ilang hitsura, sila sa panguna mga checkbox), samtang kini nga mga toggle button ipahibalo ingon "button" / "button nga gipugos". Ang pagpili tali niining duha ka mga pamaagi magdepende sa matang sa toggle nga imong gimugna, ug kung ang toggle ba makahuluganon sa mga tiggamit kung gipahibalo isip usa ka checkbox o isip usa ka aktuwal nga buton.

I-toggle ang mga estado

Idugang data-bs-toggle="button"aron i-toggle ang activekahimtang sa buton. Kung nag-pre-toggling ka sa usa ka buton, kinahanglan nimo nga mano-mano nga idugang ang .activeklase ug aria-pressed="true" aron masiguro nga kini madala sa tukma sa mga teknolohiya nga makatabang.

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

I-toggle ang link Aktibo nga toggle link Na-disable ang 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 class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Pamaagi

Mahimo ka maghimo usa ka pananglitan sa buton gamit ang tigtukod sa buton, pananglitan:

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

Pamaagi	Deskripsyon
`toggle`	I-toggle ang kahimtang sa pagduso. Naghatag sa buton sa hitsura nga kini gi-aktibo.
`dispose`	Giguba ang buton sa elemento. (Gitangtang ang gitipigan nga datos sa elemento sa DOM)
`getInstance`	Static nga pamaagi nga nagtugot kanimo sa pagkuha sa buton nga pananglitan nga nalangkit sa usa ka elemento sa DOM, mahimo nimo kining gamiton sama niini:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Static nga pamaagi nga nagbalik sa usa ka buton nga pananglitan nga nalangkit sa usa ka elemento sa DOM o paghimo og bag-o kung wala kini gisugdan. Mahimo nimo kini gamiton sama niini:`bootstrap.Button.getOrCreateInstance(element)`

Pananglitan, aron i-toggle ang tanan nga mga buton

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

Sass

Mga variable

$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

Adunay tulo ka mga mixin alang sa mga buton: butones ug buton outline variant mixins (parehong gibase sa $theme-colors), plus usa ka buton gidak-on 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);
}

Mga loop

Ang mga variant sa buton (alang sa regular ug outline nga mga buton) naggamit sa ilang tagsa-tagsa ka mga mixin sa among $theme-colorsmapa aron makamugna ang mga klase sa modifier sa 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);
  }
}