View on GitHub

按钮

将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" 以适当地将其目的传达给屏幕阅读器等辅助技术。

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>
有些按钮样式使用相对较浅的前景色，为了有足够的对比度，只能在深色背景上使用。

尺码

喜欢大的还是小的纽扣？添加 .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” 属性） 强制相同的活动外观。

Primary link Link 
<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 。在支持该属性的浏览器中，您根本看不到禁用的光标。
  • 禁用的按钮应该包含 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属性还没有标准化。此外，即使在支持 pointer-events: none的浏览器中，键盘导航也不会受到影响，这意味着有视力的键盘用户和辅助技术用户仍然能够激活这些链接。为了安全起见，在这些链接上添加 tabindex="-1" 属性（防止它们接收键盘焦点），并使用自定义JavaScript禁用它们的功能。

按钮插件

更多的按钮。控制按钮状态或为更多组件（如工具栏）创建按钮组。

切换状态

添加 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') 销毁元素的按钮。