Bootstrap V5.3 : Buttons 按钮中文翻译版

将 Bootstrap 的自定义按钮样式用于表单、对话框等中的作，并支持多种大小、状态等。

基类

Bootstrap 有一个基类，用于设置基本样式，例如填充和内容对齐。默认情况下，控件具有透明边框和背景颜色，并且缺少任何显式焦点和悬停样式。.btn.btn

[HTML全文]

<button type="button" class="btn">Base class</button>

该类旨在与我们的按钮变体结合使用，或作为您自己的自定义样式的基础。.btn

如果您单独使用该类，请记住至少定义一些显式和/或样式。.btn:focus:focus-visible

变种

Bootstrap 包括几个按钮变体，每个按钮都有自己的语义目的，并添加了一些额外的功能以获得更多控制。

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

无障碍提示：使用颜色添加含义仅提供视觉指示，不会传达给屏幕阅读器等辅助技术的用户。请确保从内容本身中可以明显看出含义（例如，具有足够颜色对比度的可见文本）或通过替代方式包含，例如与类一起隐藏的附加文本。.visually-hidden

禁用文本换行

如果不希望按钮文本换行，可以将类添加到按钮中。在 Sass 中，您可以设置为禁用每个按钮的文本换行。.text-nowrap$btn-white-space: nowrap

按钮标签

这些类设计为与元素一起使用。但是，您也可以在 or 元素上使用这些类（尽管某些浏览器可能会应用略有不同的渲染）。.btn<button><a><input>

在用于触发页面内功能（如折叠内容）的元素上使用按钮类时，而不是链接到当前页面中的新页面或部分，应为这些链接提供一个，以便将其用途适当地传达给辅助技术，例如屏幕阅读器。<a>role="button"

链接

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

轮廓按钮

需要一个按钮，但不需要它们带来的厚重背景颜色？将默认修饰符类替换为删除任何按钮上所有背景图像和颜色的修饰符类。.btn-outline-*

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

某些按钮样式使用相对较浅的前景色，并且只能在深色背景上使用，以获得足够的对比度。

大小

喜欢更大或更小的按钮？添加或用于其他尺寸。.btn-lg.btn-sm

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

您甚至可以使用 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>

禁用状态

通过向任何元素添加布尔属性，使按钮看起来不活跃。禁用的按钮已应用于，防止触发悬停和活动状态。disabled<button>pointer-events: none

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

<a>不支持该属性，因此必须添加该类以使其在视觉上显示为禁用。disabled.disabled
包括一些面向未来的样式，以禁用所有锚点按钮。pointer-events
禁用的按钮应包含属性，以指示辅助技术元素的状态。<a>aria-disabled="true"
禁用的按钮不应包含该属性。<a>href

主链接链接

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

链接功能警告

为了涵盖必须将属性保留在禁用链接上的情况，该类用于尝试禁用 s 的链接功能。请注意，此 CSS 属性尚未针对 HTML 进行标准化，但所有现代浏览器都支持它。此外，即使在支持的浏览器中，键盘导航也不受影响，这意味着视力正常的键盘用户和辅助技术用户仍然能够激活这些链接。因此，为了安全起见，除了之外，还要在这些链接上包含一个属性，以防止它们接收键盘焦点，并使用自定义 JavaScript 完全禁用它们的功能。href.disabledpointer-events: none<a>pointer-events: nonearia-disabled="true"tabindex="-1"

主链接链接

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

阻止按钮

创建响应式全宽“块按钮”堆栈，就像 Bootstrap 4 中的按钮一样，混合使用我们的显示和间隙实用程序。通过使用实用程序而不是特定于按钮的类，我们可以更好地控制间距、对齐方式和响应行为。

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

在这里，我们创建一个响应式变体，从垂直堆叠的按钮开始，直到断点，其中替换了类，从而使实用程序无效。调整浏览器大小以查看它们的变化。md.d-md-block.d-gridgap-2

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

您可以使用网格列宽类调整块按钮的宽度。例如，对于半角“块按钮”，请使用。也将其水平居中。.col-6.mx-auto

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

其他实用程序可用于调整水平时按钮的对齐方式。在这里，我们采用了之前的响应式示例，并在按钮上添加了一些 flex 实用程序和一个边距实用程序，以便在按钮不再堆叠时右对齐按钮。

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

按钮插件

按钮插件允许您创建简单的开/关切换按钮。

从视觉上看，这些切换按钮与复选框切换按钮相同。但是，辅助技术以不同的方式传达它们：复选框切换将由屏幕阅读器宣布为“选中”/“未选中”（因为尽管它们看起来如此，但它们基本上仍然是复选框），而这些切换按钮将被宣布为“按钮”/“按钮按下”。这两种方法之间的选择将取决于您正在创建的切换类型，以及当切换作为复选框或实际按钮宣布时，该切换对用户是否有意义。

切换状态

添加以切换按钮的状态。如果要预先切换按钮，则必须手动添加类，并确保将其正确传达给辅助技术。data-bs-toggle="button"active.activearia-pressed="true"

[HTML全文]

<p class="d-inline-flex gap-1">
  <button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
  <button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
  <button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>
<p class="d-inline-flex gap-1">
  <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>
</p>

切换链接活动切换链接禁用切换链接

[HTML全文]

<p class="d-inline-flex gap-1">
  <a href="#" class="btn" role="button" data-bs-toggle="button">Toggle link</a>
  <a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
  <a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</p>
<p class="d-inline-flex gap-1">
  <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>
</p>

方法

您可以使用按钮构造函数创建按钮实例，例如：

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

方法	描述
`dispose`	销毁元素的按钮。（删除 DOM 元素上存储的数据）
`getInstance`	Static 方法，允许您获取与 DOM 元素关联的按钮实例，您可以像这样使用它：。`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	静态方法，返回与 DOM 元素关联的按钮实例或创建一个新实例，以防它未初始化。你可以这样使用它： .`bootstrap.Button.getOrCreateInstance(element)`
`toggle`	切换推送状态。使按钮看起来像是已激活。

例如，要切换所有按钮

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

CSS系统

变量

在 v5.2.0 中添加

作为 Bootstrap 不断发展的 CSS 变量方法的一部分，按钮现在使用本地 CSS 变量来增强实时自定义。CSS 变量的值是通过 Sass 设置的，因此仍然支持 Sass 自定义。.btn

scss/_buttons.scss

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

每个修饰符类都会更新适当的 CSS 变量，以最大限度地减少使用我们的、和 mixin 的其他 CSS 规则。.btn-*button-variant()button-outline-variant()button-size()

这是一个构建自定义修饰符类的示例，就像我们为文档独有的按钮所做的那样，通过使用我们自己的 CSS 和 Sass 变量的混合来重新分配 Bootstrap 的 CSS 变量。.btn-*

site/src/scss/_buttons.scss

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --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 变量

scss/_variables.scss

$btn-color:                   var(--#{$prefix}body-color);
$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;
$btn-link-focus-shadow-rgb:   to-rgb(mix(color-contrast($link-color), $link-color, 15%));

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           var(--#{$prefix}border-radius);
$btn-border-radius-sm:        var(--#{$prefix}border-radius-sm);
$btn-border-radius-lg:        var(--#{$prefix}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 混合

按钮有三种混合：按钮和按钮轮廓变体混合（均基于）以及按钮大小混合。$theme-colors

scss/mixins/_buttons.scss

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

scss/mixins/_buttons.scss

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

scss/mixins/_buttons.scss

@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 循环

按钮变体（用于常规按钮和轮廓按钮）使用它们各自的混合和我们的映射来生成中的修饰符类。$theme-colorsscss/_buttons.scss

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

Bootstrap V5.3 中文手册

入门指南 Getting started

定制化 Customize

布局方式 Layout

内容样式 Content

表单控件 Forms

组件集合 Components

辅助工具 Helpers

工具类库 Utilities

功能扩展 Extend

关于Bootstrap

Buttons 按钮

基类

变种

禁用文本换行

按钮标签

轮廓按钮

大小

禁用状态

链接功能警告

阻止按钮

按钮插件

切换状态

方法

CSS系统

变量

Sass 变量

Sass 混合

Sass 循环