按鈕（Buttons）

使用Bootstrap自定義的按鈕樣式來進行表單、對話框等操作，并支持多種大小、狀態等。

On this page

示例

Bootstrap包含了幾個預定義的按鈕樣式，每個樣式都有自己的語義目的，并加入了更多的控制。

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

向輔助技術傳達意義

使用顏色來增加意義只會提供一種視覺指示，而不會傳達給輔助技術（如屏幕閱讀器）的用戶。確保由顏色表示的信息在內容本身（例如可見文本）中是明顯的，或者通過其他方式包含，例如使用 .visually-hidden類隱藏的其他文本。

禁止文字換行

如果不希望按鈕文本換行，可以將 .text-nowrap類添加到按鈕。在Sass中，可以將$btn-white-space: nowrap設置為禁用每個按鈕的文本換行。

按鈕標簽

.btn類設計用于button元素。但是，您也可以在a或input元素上使用這些類（盡管某些瀏覽器可能應用稍微不同的呈現）。

在a元素上使用按鈕類來觸發頁內功能（如折疊內容），而不是鏈接到當前頁面中的新頁面或節時，應為這些鏈接賦予role="button"以適當地將其目的傳達給屏幕閱讀器等輔助技術

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

外邊框按鈕

需要一個按鈕，卻不需要它們帶來的厚重背景色？將默認修飾符類替換為.btn-outline-*類，以刪除任何按鈕上的所有背景圖像和顏色。

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

有些按鈕樣式使用相對較淺的前景色，為了有足夠的對比度，只能在深色背景上使用。

Sizes

喜歡大的還是小的按鈕？添加.btn-lg or .btn-sm以獲得其他尺寸。

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

Disabled state

通過向任何button元素添加禁用的布爾屬性，使按鈕看起來不活動。禁用的按鈕具有 pointer-events: none，應用于防止觸發懸停和活動狀態。

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

使用a元素禁用的按鈕的行為有些不同：

a不支持disabled屬性，因此必須添加.disabled類以使其在視覺上顯示為禁用。
包括一些未來友好的樣式來禁用錨按鈕上的所有 pointer-events。
禁用的按鈕應該包含 aria-disabled="true" 屬性，以指示輔助技術的元素狀態。

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

鏈接功能警告

disabled類使用pointer-events: none 來嘗試禁用a的鏈接功能，但是CSS屬性還沒有標準化。此外，即使在支持指針事件（none）的瀏覽器中，鍵盤導航也不會受到影響，這意味著有視力的鍵盤用戶和輔助技術用戶仍然能夠激活這些鏈接。因此，為了安全起見，除了aria-disabled="true"之外，還要在這些鏈接上包含tabindex="-1"屬性，以防止它們接收鍵盤焦點，并使用自定義JavaScript完全禁用它們的功能。

區塊按鈕

混合使用display和gap通用類別，建立跟Bootstrap 4一樣的響應式、滿版的的內存塊級別按鈕堆疊。透過使用通用類別而非指定button class，你可以更好的控制間距、對齊以及響應式等行為。

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

以下為一個響應式的示例，從垂直堆疊的按鈕群組開始，直到遇到md斷點才會把.d-grid替換為.d-md-block，進而使gap-2通用類別無效化。縮放瀏覽器的大小以觀察它們的改變。

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

可以使用網格系統的欄（column）類別來調整內存塊級別按鈕的寬度。舉例來說，可以用.col-6建立寬度50%的內存塊級別按鈕，再用.mx-auto將其水平置中。

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

方向為水平時，可以添加通用類別來對齊、調整按鈕。以下用我們前一個響應式的示例進行修改，在按鈕上加入了一些flex，margin通用類別，使其在非堆疊的情況下對齊右邊。

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

按鈕插件

可以使用按鈕插件建立簡單的on/off切換按鈕。

視覺上，這些切換按鈕跟核取方塊切換按鈕是相同的。然而它們透過輔助性技術所傳遞的信息是不一樣的：復選框切換按鈕會被屏幕閱讀器傳達為“勾選”/“未勾選”（因為就算它們外表為按鈕，本質上仍然是復選框）；然而本節的切換按鈕則會被傳達為“按鈕”/“按下按鈕”。這兩種方法之間的選擇取決于你想要建立哪一種切換，以及此按鈕是被傳達為核取方塊還是實際按鈕這件事會不會對用戶造成影響。

切換狀態

加入data-bs-toggle="button"來切換按鈕的active狀態。如果想要預先切換按鈕狀態，則必須手動添加.active以及aria-pressed="true"以確保狀態有正確的傳達至輔助性技術。

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

方法

可以使用按鈕構造函數創建按鈕實例，例如：

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)

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