Source

纽扣

将 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>s 添加类，因为它们使用伪类。但是，如果您需要以编程方式复制状态，您仍然可以强制使用.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>

禁用状态

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

<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>s 不支持该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>s 的链接功能，但该 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>s，以提供复选框或单选样式按钮切换。添加data-toggle="buttons"到.btn-group包含那些修改过的按钮以通过 JavaScript 启用它们的切换行为并添加以设置按钮中的 s.btn-group-toggle样式。请注意，您可以创建单个输入供电的按钮或它们的组。<input>

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

请注意，预先选中的按钮要求您手动将.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') 销毁元素的按钮。