logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 组件总览
  • 通用
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Text 文本
    • Link 链接
    • Typography 排版
  • 布局
    • Grid 栅格
    • Layout 布局
    • Stack 堆栈
  • 表单
    • Input 输入框
    • Select 选择器
    • Radio 单选框
    • Checkbox 复选框
    • Input group 输入组
    • Float label 浮动标签
    • ColorPicker 颜色选择器
    • Slider 滑块
    • Switch 开关
    • Upload 文件上传
    • Form 表单
  • 导航
    • Affix 固钉
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • NavBar 导航栏
    • NavMenu 导航菜单
    • Tabs 标签页
    • Pagination 分页
  • 数据
    • Table 表格
    • Tag 标签
    • Progress 进度条
    • Badge 徽章
    • Avatar 头像
最后更新时间：
Icon 图标Text 文本
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

Button 按钮

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

基本用法

通过.btn 类，设置基本样式，例如填充和内容对齐。默认情况下，.btn 控件具有透明边框和背景颜色，不具有任何明确的焦点和悬停样式。

WARNING

如果你单独使用 .btn 类，记得至少定义一些显式的 :focus 和/或 :focus-visible 样式。这样可以确保按钮在获得焦点时具有可见的指示，提高用户体验和可访问性。

变体

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

INFO

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

禁用文本换行

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

按钮标签

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

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

轮廓按钮

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

INFO

某些按钮样式使用了相对较浅的前景色，因此只有在深色背景上使用时才能确保足够的对比度。

尺寸

添加 .btn-lg 或 .btn-sm 以获取其他尺寸。 你甚至可以使用 CSS 变量来调整自己的自定义大小：

禁用状态

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

按钮禁用

链接按钮禁用

使用 <a> 元素的禁用按钮的行为有点不同：

  • <a> 不支持 disabled 属性，因此你必须添加 .disabled 类以使其在视觉上显示为禁用。

  • 其中包含一些面向未来的样式，以禁用锚按钮上的所有 pointer-events。

  • 使用 <a> 的禁用按钮应包含 aria-disabled="true" 属性，以向辅助技术指示元素的状态。

  • 使用 <a> 的禁用按钮不应包含 href 属性。

链接按钮注意事项

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

块按钮

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

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

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

可以使用其他工具来调整水平按钮的对齐方式。在这里，我们采用了之前的响应式示例，并在按钮上添加了一些 Flex 工具和边距工具，以便在按钮不再堆叠时将按钮右对齐。

按钮插件

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

INFO

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

切换状态

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

方法

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

const bsButton = new bootstrap.Button('#myButton')
方法描述
dispose销毁元素的按钮。（移除 DOM 元素上存储的数据）
getInstance静态方法，允许你获取与 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()
})
index.html
<button type="button" class="btn">Base class</button>
index.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>
index.html
<button type="button" class="btn btn-lg btn-primary text-nowrap">
  Primary button
</button>
index.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">
index.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>
index.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>


<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>


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