Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
Check
in English

Mga Pindutan

Gamitin ang mga custom na istilo ng button ng Bootstrap para sa mga aksyon sa mga form, dialog, at higit pa na may suporta para sa maraming laki, estado, at higit pa.

Sa pahinang ito

Mga halimbawa

Kasama sa Bootstrap ang ilang paunang natukoy na mga istilo ng button, bawat isa ay nagsisilbi sa sarili nitong semantic na layunin, na may ilang mga dagdag na itinapon para sa higit na 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>
Naghahatid ng kahulugan sa mga pantulong na teknolohiya

Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .visually-hiddenklase.

I-disable ang text wrapping

Kung ayaw mong i-wrap ang text ng button, maaari mong idagdag ang .text-nowrapklase sa button. Sa Sass, maaari mong itakda $btn-white-space: nowrapna huwag paganahin ang text wrapping para sa bawat button.

Mga tag ng pindutan

Ang .btnmga klase ay idinisenyo upang magamit kasama ng <button>elemento. Gayunpaman, maaari mo ring gamitin ang mga klase na ito sa <a>o mga <input>elemento (bagaman ang ilang mga browser ay maaaring maglapat ng bahagyang naiibang pag-render).

Kapag gumagamit ng mga klase ng button sa <a>mga elemento na ginagamit upang mag-trigger ng in-page na functionality (tulad ng pag-collapse ng content), sa halip na mag-link sa mga bagong page o seksyon sa loob ng kasalukuyang page, ang mga link na ito ay dapat bigyan ng isang role="button"upang naaangkop na maihatid ang kanilang layunin sa mga pantulong na teknolohiya tulad ng mga screen reader.

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 pindutan ng outline

Nangangailangan ng isang pindutan, ngunit hindi ang mabigat na kulay ng background na dinadala nila? Palitan ang mga default na klase ng modifier ng .btn-outline-*mga mag-aalis ng lahat ng larawan sa background at mga kulay sa anumang button.

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>
Gumagamit ang ilan sa mga istilo ng button ng medyo maliwanag na kulay ng foreground, at dapat lang gamitin sa madilim na background upang magkaroon ng sapat na contrast.

Mga sukat

Gusto mo ba ng mas malaki o mas maliit na mga pindutan? Magdagdag .btn-lgo .btn-smpara sa mga karagdagang laki.

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>

Maaari mo ring i-roll ang iyong sariling custom na sizing gamit ang mga variable ng 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>

Estadong may kapansanan

Gawing hindi aktibo ang mga button sa pamamagitan ng pagdaragdag ng disabledboolean attribute sa anumang <button>elemento. Ang mga naka-disable na button ay pointer-events: noneinilapat sa, na pumipigil sa pag-hover at mga aktibong estado mula 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>

<a>Medyo naiiba ang pagkilos ng mga naka- disable na button gamit ang elemento:

  • <a>s ay hindi sumusuporta sa disabledkatangian, kaya dapat mong idagdag ang .disabledklase upang makita itong hindi pinagana.
  • Ang ilang mga istilong panghinaharap sa hinaharap ay kasama upang hindi paganahin ang lahat pointer-eventssa mga pindutan ng anchor.
  • Ang mga naka- disable na button na gumagamit <a>ay dapat magsama ng aria-disabled="true"katangian upang ipahiwatig ang estado ng elemento sa mga teknolohiyang pantulong.
  • Ang mga naka- disable na button na gumagamit <a> ay hindi dapat magsama ng hrefattribute.
Pangunahing 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>

Upang masakop ang mga kaso kung saan kailangan mong panatilihin ang hrefkatangian sa isang hindi pinaganang link, .disabledginagamit ng klase pointer-events: noneupang subukang huwag paganahin ang paggana ng link ng <a>s. Tandaan na ang CSS property na ito ay hindi pa na-standardize para sa HTML, ngunit sinusuportahan ito ng lahat ng modernong browser. Bilang karagdagan, kahit na sa mga browser na sumusuporta pointer-events: none, ang keyboard navigation ay nananatiling hindi naaapektuhan, ibig sabihin, ang mga nakikitang user ng keyboard at mga user ng mga pantulong na teknolohiya ay maa-activate pa rin ang mga link na ito. Kaya para maging ligtas, bilang karagdagan sa aria-disabled="true", magsama rin ng tabindex="-1"attribute sa mga link na ito upang pigilan silang makatanggap ng focus sa keyboard, at gumamit ng custom na JavaScript upang ganap na i-disable ang kanilang functionality.

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

Gumawa ng mga tumutugong stack ng buong lapad, "mga block button" tulad ng mga nasa Bootstrap 4 na may kumbinasyon ng aming mga utility sa display at gap. Sa pamamagitan ng paggamit ng mga utility sa halip na mga klase na partikular sa button, mayroon kaming higit na higit na kontrol sa spacing, alignment, at tumutugon na gawi.

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>

Dito, lumikha kami ng isang tumutugon na pagkakaiba-iba, na nagsisimula sa mga patayong nakasalansan na mga pindutan hanggang sa mdbreakpoint, kung saan .d-md-blockpinapalitan ang .d-gridklase, kaya pinawalang-bisa ang gap-2utility. Baguhin ang laki ng iyong browser upang makitang nagbabago ang mga ito.

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>

Maaari mong ayusin ang lapad ng iyong mga block button na may mga klase sa lapad ng column ng grid. Halimbawa, para sa kalahating lapad na "block button", gamitin ang .col-6. Igitna ito nang pahalang gamit ang .mx-auto, masyadong.

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>

Maaaring gamitin ang mga karagdagang kagamitan upang ayusin ang pagkakahanay ng mga pindutan kapag pahalang. Dito kinuha namin ang aming nakaraang tumutugon na halimbawa at nagdagdag ng ilang flex utilities at margin utility sa button para i-align sa kanan ang mga button kapag hindi na naka-stack ang mga ito.

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

Binibigyang-daan ka ng plugin ng button na lumikha ng mga simpleng on/off toggle button.

Biswal, ang mga toggle button na ito ay magkapareho sa checkbox toggle buttons . Gayunpaman, naiiba ang mga ito sa pamamagitan ng mga pantulong na teknolohiya: ang mga checkbox toggle ay iaanunsyo ng mga screen reader bilang "naka-check" / "hindi naka-check" (dahil, sa kabila ng kanilang hitsura, sila ay mga checkbox pa rin sa panimula), samantalang ang mga toggle button na ito ay iaanunsyo bilang “button”/“pindot na pinindot”. Ang pagpili sa pagitan ng dalawang approach na ito ay depende sa uri ng toggle na iyong ginagawa, at kung ang toggle ay magiging makabuluhan o hindi sa mga user kapag inihayag bilang isang checkbox o bilang isang aktwal na button.

I-toggle ang mga estado

Idagdag data-bs-toggle="button"upang i-toggle ang activekatayuan ng isang button. Kung pre-toggling mo ang isang button, dapat mong manu-manong idagdag ang .activeklase at aria-pressed="true" upang matiyak na naaangkop ito sa mga pantulong na teknolohiya.

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 Aktibong toggle link Naka-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>

Paraan

Maaari kang lumikha ng isang halimbawa ng pindutan gamit ang tagabuo ng pindutan, halimbawa:

const bsButton = new bootstrap.Button('#myButton')
Pamamaraan Paglalarawan
dispose Sinisira ang button ng isang elemento. (Aalisin ang nakaimbak na data sa elemento ng DOM)
getInstance Static na paraan na nagbibigay-daan sa iyong makuha ang button na instance na nauugnay sa isang elemento ng DOM, maaari mo itong gamitin tulad nito: bootstrap.Button.getInstance(element).
getOrCreateInstance Static na paraan na nagbabalik ng instance ng button na nauugnay sa isang elemento ng DOM o lumikha ng bago kung sakaling hindi ito nasimulan. Magagamit mo ito tulad nito: bootstrap.Button.getOrCreateInstance(element).
toggle I-toggle ang estado ng push. Binibigyan ang pindutan ng hitsura na ito ay na-activate.

Halimbawa, upang i-toggle ang lahat ng mga pindutan

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

CSS

Mga variable

Idinagdag sa v5.2.0

Bilang bahagi ng umuusbong na mga variable ng CSS ng Bootstrap, ginagamit na ngayon ng mga button ang mga lokal na variable ng CSS .btnpara sa pinahusay na real-time na pag-customize. Ang mga halaga para sa mga variable ng CSS ay itinakda sa pamamagitan ng Sass, kaya sinusuportahan pa rin ang pag-customize ng Sass.

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

Ina-update ng bawat .btn-*klase ng modifier ang naaangkop na mga variable ng CSS upang mabawasan ang mga karagdagang panuntunan ng CSS gamit ang aming button-variant(), button-outline-variant(), at button-size()mixin.

Narito ang isang halimbawa ng pagbuo ng custom na .btn-*klase ng modifier tulad ng ginagawa namin para sa mga button na natatangi sa aming mga doc sa pamamagitan ng muling pagtatalaga sa mga variable ng CSS ng Bootstrap na may pinaghalong sarili naming mga variable ng CSS at Sass.

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

May tatlong mixin para sa mga button: button at button outline na variant mixin (parehong batay sa $theme-colors), kasama ang isang button na mixin na laki.

@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 ng button (para sa mga regular at outline na button) ay gumagamit ng kani-kanilang mga mixin sa aming $theme-colorsmapa upang bumuo ng mga klase ng 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);
  }
}