Buttons按钮

~~Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.~~使用Bootstrap的自定义按钮样式进行表单、对话框等操作，并支持多种大小、状态等。

~~On this page~~本页内容

Examples例子

~~Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.~~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>

Conveying meaning to assistive technologies向辅助技术传达意义

~~Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.~~ 使用颜色来增加意义只能提供视觉指示，而不会传达给屏幕阅读器等辅助技术的用户。Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .visually-hidden class.确保由颜色表示的信息在内容本身（例如可见文本）中是明显的，或者通过其他方式包括，例如使用.visually-hidden类隐藏的其他文本。

Disable text wrapping禁用文本换行

~~If you don’t want the button text to wrap, you can add the .text-nowrap class to the button.~~ 如果不希望按钮文本换行，可以将.text-nowrap类添加到按钮。~~In Sass, you can set $btn-white-space: nowrap to disable text wrapping for each button.~~在Sass中，可以设置$btn-white-space: nowrap以禁用每个按钮的文本换行。

Button tags按钮标签

~~The .btn classes are designed to be used with the <button> element.~~ .btn类设计用于<button>元素。~~However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).~~但是，您也可以在<a>元素或<input>元素（尽管某些浏览器可能应用稍微不同的渲染）。

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.在<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">

Outline buttons轮廓按钮

~~In need of a button, but not the hefty background colors they bring?~~ 需要按钮，但不需要它们带来的厚重背景色？~~Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.~~将默认修改器类替换为.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>

~~Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.~~一些按钮样式使用相对较浅的前景色，并且应仅在深色背景上使用，以便具有足够的对比度。

Sizes尺寸

~~Fancy larger or smaller buttons?~~ 喜欢大的还是小的按钮？~~Add .btn-lg or .btn-sm for additional sizes.~~添加.btn-lg或.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禁用状态

~~Make buttons look inactive by adding the disabled boolean attribute to any <button> element.~~ 通过将disabled布尔属性添加到任何<button>元素，使按钮看起来不活跃。~~Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.~~禁用的按钮应用了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>

~~Disabled buttons using the <a> element behave a bit different:~~使用<a>元素的行为有点不同：

~~<a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.~~<a>不支持disabled属性，因此必须添加.disabled类以使其在视觉上显示为禁用。
~~Some future-friendly styles are included to disable all pointer-events on anchor buttons.~~包括一些将来的友好样式，以禁用锚按钮上的所有pointer-events。
~~Disabled buttons should include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.~~禁用按钮应包括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>

Link functionality caveat链接功能警告

~~The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized.~~ .disabled类使用pointer-events: none尝试禁用<a>s的链接功能，但是CSS属性还没有标准化。In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. 此外，即使在支持pointer-events: none的浏览器中，键盘导航仍然不受影响，这意味着有视力的键盘用户和辅助技术用户仍然能够激活这些链接。So to be safe, in addition to aria-disabled="true", also include a tabindex="-1" attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.所以为了安全起见，除了包含aria-disabled="true"，还应包含一个tabindex="-1"属性以防止它们接收键盘焦点，并使用自定义JavaScript完全禁用它们的功能。

Block buttons块按钮

~~Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities.~~ 创建全宽的响应堆栈，“块按钮”，如Bootstrap 4中的按钮，混合使用我们的显示和间隙实用程序。~~By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.~~通过使用实用程序而不是特定于按钮的类，我们可以更好地控制间距、对齐和响应行为。

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

~~Here we create a responsive variation, starting with vertically stacked buttons until the md breakpoint, where .d-md-block replaces the .d-grid class, thus nullifying the gap-2 utility.~~ 在这里，我们创建一个响应变化，从垂直堆叠的按钮开始，直到md断点，其中.d-md-block替换.d-grid类，从而使gap-2实用程序无效。~~Resize your browser to see them change.~~调整浏览器大小以查看它们的更改。

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

~~You can adjust the width of your block buttons with grid column width classes.~~ 可以使用网格列宽度类调整块按钮的宽度。~~For example, for a half-width “block button”, use .col-6.~~ 例如，对于半宽度的“块按钮”，使用.col-6。~~Center it horizontally with .mx-auto, too.~~也使用.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>

~~Additional utilities can be used to adjust the alignment of buttons when horizontal.~~ 当按钮水平时，可使用其他实用程序调整按钮的对齐方式。~~Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they’re no longer stacked.~~这里我们以前面的响应示例为例，在按钮上添加了一些flex实用程序和边距实用程序，以便在按钮不再堆叠时右对齐按钮。

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

Button plugin按钮插件

~~The button plugin allows you to create simple 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.~~ 添加data-bs-toggle="button"以切换按钮的活动状态。~~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.~~如果要预先切换按钮，则必须手动添加.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>

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)~~销毁元素的按钮(删除存储在DOM元素上的数据）
`getInstance`	~~Static method which allows you to get the button instance associated to a DOM element, you can use it like this:~~ 静态方法，它允许您获取与DOM元素关联的按钮实例，您可以这样使用它：`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.~~静态方法，该方法返回与DOM元素关联的按钮实例，或者在未初始化的情况下创建一个新的按钮实例。 ~~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.~~按钮有三种混合：按钮和按钮轮廓变体混合（均基于$theme-colors），加上按钮大小混合。

@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.~~按钮变体（对于常规按钮和轮廓按钮）使用它们各自与$theme-colors映射的混合来生成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);
}
}