Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Bootstrap 内置了几种预定义的按钮样式，每种样式都有自己的语义目的，并添加了一些额外的按钮includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

如果你不希望按钮中的文字换行的话，可以为按钮添加 .text-nowrap 类。在 Sass 代码中，你可以设置 $btn-white-space: nowrap 来禁止所有按钮中的文本换行。

.btn 系列类（class）被设计为用于 元素。不过，你也可以将这些类用于 或 元素（但是某些浏览器可能会使用略有不同的渲染方式）。

当 .btn 系列类（class）用于 元素并触发页面上的功能（例如折叠内容），而不是链接到新页面或当前页面中的内容部分时，应当为这些链接设置 role="button" 属性，以便将链接的目的以适当的方式传递给类似屏幕阅读器的辅助工具。

当你需要使用按钮，但不希望按钮带有背景颜色时，请将默认的修饰符类（modifier class）替换为 .btn-outline-* 系列类（class），已去除按钮上的所有背景图片和颜色。

需要更大或更小的按钮吗？使用 .btn-lg 或 .btn-sm 类可以设置按钮的不同尺寸。

通过添加 .btn-block 类来创建块级按钮（即，按钮占满了整个父级元素的宽度）。

当按钮处于活动状态时，按钮将表现为被按下的效果，即背景和边框变暗，如果启用了阴影效果，将会有 inset 阴影。由于这一效果是基于伪类（pseudo-class）实现的，因此无需为 添加任何类（class）。但是，如果需要以编程方式强制复现这一效果的话，可以使用 .active 类（并设置 aria-pressed=“true” 属性）。

通过为 元素设置 disabled 属性（此属性是布尔类型的）可以使按钮看起来处于不可用状态。

使用 元素创建的处于禁用状态的按钮具有些许不同的行为：

To cover cases where you have to keep the href attribute on a disabled link, the .disabled class uses pointer-events: none to try to disable the link functionality of s. Note that this CSS property is not yet standardized for HTML, but all modern browsers support it. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to aria-disabled="true", also include a tabindex="-1" attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

添加 data-toggle="button" 以切换按钮的 active 状态。如果要预先切换的状态，则必须手动为 元素添加 .active 类 和 aria-pressed="true" 属性。

Bootstrap’s .button styles can be applied to other elements, such as s, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the s within your buttons. Note that you can create single input-powered buttons or groups of them.

The checked state for these buttons is only updated via click event on the button. If you use another method to update the input—e.g., with or by manually applying the input’s checked property—you’ll need to toggle .active on the manually.

Note that pre-checked buttons require you to manually add the .active class to the input’s .