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.

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>

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

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

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.

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>

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.

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>

Mahimo pa nimo i-roll ang imong kaugalingon nga kostumbre nga pagsukod gamit ang mga variable sa 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>

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.

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>

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

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>

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

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>

I-block ang mga buton

Paghimo og mga responsive nga stack sa full-width, "block buttons" sama sa naa sa Bootstrap 4 nga adunay kombinasyon sa among display ug gap utilities. Pinaagi sa paggamit sa mga utilities imbes sa buton nga piho nga mga klase, kita adunay mas dako nga kontrol sa gilay-on, pag-align, ug responsive nga mga kinaiya.

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>

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.

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>

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.

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>

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.

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>

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 gipasa pinaagi sa mga teknolohiya nga makatabang: ang mga toggle sa checkbox ipahibalo sa mga magbabasa sa screen ingon "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 kon 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.

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>

I-toggle ang link Aktibo nga toggle link Na-disable ang toggle link

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>

Pamaagi

Makahimo ka og usa ka pananglitan sa buton gamit ang button constructor, pananglitan:

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

Pamaagi	Deskripsyon
`dispose`	Giguba ang buton sa elemento. (Gikuha ang gitipigan nga datos sa elemento sa DOM)
`getInstance`	Static nga pamaagi nga nagtugot kanimo nga makuha ang buton nga pananglitan nga nalangkit sa usa ka elemento sa DOM, mahimo nimo kini gamiton sama niini: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Static nga pamaagi nga nagbalik sa usa ka buton nga pananglitan nga nalambigit 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)`.
`toggle`	I-toggle ang estado sa pagduso. Naghatag sa buton sa hitsura nga kini gi-aktibo.

Pananglitan, aron i-toggle ang tanan nga mga buton

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

CSS

Mga variable

Gidugang sa v5.2.0

Isip kabahin sa nag-uswag nga CSS variables approach sa Bootstrap, ang mga butones karon naggamit sa lokal nga CSS variables .btnpara sa gipaayo nga real-time nga pag-customize. Ang mga kantidad alang sa mga variable sa CSS gitakda pinaagi sa Sass, busa ang pag-customize sa Sass gisuportahan usab.

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

Ang matag .btn-*klase sa modifier nag-update sa angay nga mga variable sa CSS aron maminusan ang dugang nga mga lagda sa CSS gamit ang among button-variant(), button-outline-variant(), ug button-size()mixin.

Ania ang usa ka pananglitan sa paghimo og usa ka custom .btn-*modifier nga klase sama sa among gibuhat alang sa mga buton nga talagsaon sa among mga docs pinaagi sa pag-reassign sa Bootstrap's CSS variables nga adunay sagol sa among kaugalingong CSS ug Sass variables.

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

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

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

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