按钮

使用 Bootstrap 的自定义按钮样式来执行表单、对话框等中的操作，并支持多种尺寸、状态等。

示例

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>

向辅助技术传达含义

仅使用颜色来添加含义只提供了一个视觉指示，而不会传达给辅助技术（例如屏幕阅读器）的用户。确保由颜色表示的信息要么从内容本身（例如可见文本）中显而易见，要么通过其他方式（例如使用 .sr-only 类隐藏的附加文本）包含在内。

禁用文本换行

如果你不希望按钮文本换行，可以将 .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 创建块级按钮——那些跨越父级整个宽度的按钮。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

活动状态

当按钮处于活动状态时，它们将显示为按下状态，具有更深的背景、更深的边框，并且在启用阴影时，具有内嵌阴影。无需向 <button> 添加类，因为它们使用伪类。但是，如果需要以编程方式复制状态，你仍然可以使用 .active 强制相同的活动外观（并包含 aria-pressed=“true” 属性）。

主要链接链接

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

禁用状态

通过向任何 <button> 元素添加 disabled 布尔属性，使按钮看起来不活动。

<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。在支持该属性的浏览器中，你根本看不到禁用的光标。
使用 <a> 的禁用按钮应包含 aria-disabled="true" 属性，以向辅助技术指示元素的状态。
使用 <a> 的禁用按钮不应包含 href 属性。

主要链接链接

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

链接功能注意事项

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

主要链接链接

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

按钮插件

使用按钮实现更多功能。控制按钮状态或创建按钮组，以用于工具栏等更多组件。

切换状态

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

复选框和单选按钮

Bootstrap 的 .button 样式可以应用于其他元素，例如 <label>，以提供复选框或单选按钮样式按钮切换。将 data-toggle="buttons" 添加到包含这些修改按钮的 .btn-group，以通过 JavaScript 启用其切换行为，并将 .btn-group-toggle 添加到按钮中的 <input> 以设置样式。请注意，您可以创建单个输入支持的按钮或其组。

这些按钮的选中状态仅通过按钮上的 click 事件更新。如果您使用其他方法更新输入（例如，使用 <input type="reset"> 或手动应用输入的 checked 属性），则需要手动切换 <label> 上的 .active。

请注意，预先选中的按钮要求您手动将 .active 类添加到输入的 <label>。

已选中

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

激活单选单选

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

方法

方法	说明
`$().button('toggle')`	切换推送状态。使按钮看起来好像已被激活。
`$().button('dispose')`	销毁一个元素的按钮。