Bootstrap5 按钮（Buttons）

示例

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>

在线运行

辅助技术的意义

按钮通过使用不同的颜色代表着不同意义，确保用相对的颜色传达的信息是显而易见的，如红色代表警告，黄色代表异常。

禁止换行

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

按钮标签

.btn类设计为与<button>元素一起使用。但是，也可以在<a>或<input>元素上使用（尽管某些浏览器可能会使用略有不同的呈现方式）。

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

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

在线运行

按钮大小

喜欢更大或更小的按钮吗？添加.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>

在线运行

块按钮

通过添加.btn-block，创建块级按钮（跨越父级的整个宽度）。

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

在线运行

禁用状态

通过将disabled布尔属性添加到<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属性，以指示辅助技术的元素状态。

<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属性尚未标准化。另外，即使在支持pointer-events: none的浏览器中，keyboard导航也不受影响，这意味着有键盘用户和辅助技术用户仍将能够激活这些链接。为安全起见，请在这些链接上添加tabindex="-1"属性（以防止它们获得键盘焦点），并使用自定义JavaScript禁用其功能。

按钮插件

按钮插件使您可以创建简单的on/off（开/关）切换按钮。

切换状态

添加data-toggle="button"来切换按钮的有效状态。如果要预切换按钮，则必须手动将.active类和aria-pressed="true"添加到<button>中。

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

在线运行

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

在线运行

方法	描述
toggle	切换按压状态。给予按钮已被激活的外观。
dispose	销毁元素的按钮。

例如，切换所有按钮

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

在线运行