按钮（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);
}
}
返回顶部