纽扣

将Bootstrap的自定义按钮样式用于表单,对话框等中的操作,并支持多种尺寸,状态等。

例子

Bootstrap包括几种预定义的按钮样式,每种样式都有其自己的语义目的,并添加了一些额外的控件,以进行更多控制。

<button class="btn btn-primary" type="button"> 主 </button>
<button class="btn btn-secondary" type="button"> 次要 </button>
<button class="btn btn-success" type="button"> 成功 </button>
<button class="btn btn-danger" type="button"> 危险 </button>
<button class="btn btn-warning" type="button"> 警告 </button>
<button class="btn btn-info" type="button"> Info </button>
<button class="btn btn-light" type="button"> 光 </button>
<button class="btn btn-dark" type="button"> Dark </button>
<button class="btn btn-link" type="button"> Link </button>

向辅助技术传达意义

使用颜色添加含义仅提供视觉指示,而不会传达给辅助技术的用户（例如屏幕阅读器）。确保用颜色表示的信息从内容本身来看是显而易见的（例如可见的文字）,或通过其他方式（例如, .sr-only 类。

禁用文本换行

如果您不希望自动换行,请添加 .text-nowrap 该按钮的类。在Sass中,您可以设置 $btn-white-space: nowrap 禁用每个按钮的文本换行。

按钮标签

The .btn 这些类旨在与 <button> 元件。但是,您也可以在 <a> or <input> 元素（尽管某些浏览器可能会使用略有不同的呈现方式）。

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

Link

<a class="btn btn-primary" href="#" role="button"> Link </a>
<button class="btn btn-primary" type="submit"> 按键 </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 class="btn btn-outline-primary" type="button"> 主 </button>
<button class="btn btn-outline-secondary" type="button"> 次要 </button>
<button class="btn btn-outline-success" type="button"> 成功 </button>
<button class="btn btn-outline-danger" type="button"> 危险 </button>
<button class="btn btn-outline-warning" type="button"> 警告 </button>
<button class="btn btn-outline-info" type="button"> Info </button>
<button class="btn btn-outline-light" type="button"> 光 </button>
<button class="btn btn-outline-dark" type="button"> Dark </button>

尺码

喜欢更大或更小的按钮吗？ Add .btn-lg or .btn-sm 以获得其他尺寸。

<button class="btn btn-primary btn-lg" type="button"> 大按钮 </button>
<button class="btn btn-secondary btn-lg" type="button"> 大按钮 </button>

<button class="btn btn-primary btn-sm" type="button"> 小按钮 </button>
<button class="btn btn-secondary btn-sm" type="button"> 小按钮 </button>

通过添加来创建块级按钮（跨越父级的整个宽度的按钮） .btn-block.

<button class="btn btn-primary btn-lg btn-block" type="button"> 块级按钮 </button>
<button class="btn btn-secondary btn-lg btn-block" type="button"> 块级按钮 </button>

活跃状态

处于活动状态时,按钮将显示为按下状态（背景变暗,边框变暗和阴影变暗）。 无需添加课程 <button> ,因为他们使用伪类 。但是,您仍然可以使用 .active （并包括 aria-pressed="true" 属性）,您是否需要以编程方式复制状态。

主要连结 Link

<a aria-pressed="true" class="btn btn-primary btn-lg active" href="#" role="button"> 主要连结 </a>
<a aria-pressed="true" class="btn btn-secondary btn-lg active" href="#" role="button"> Link </a>

禁用状态

通过添加按钮使按钮看起来不活动 disabled 布尔属性 <button> 元件。

<button class="btn btn-lg btn-primary" disabled="" type="button"> 主按钮 </button>
<button class="btn btn-secondary btn-lg" disabled="" type="button"> 按键 </button>

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

<a> 不支持 disabled 属性,因此您必须添加 .disabled 类以使其在视觉上显得已禁用。
包括一些未来友好的样式以禁用所有 pointer-events 在锚按钮上。在支持该属性的浏览器中,您根本看不到禁用的光标。
禁用的按钮应包括 aria-disabled="true" 属性指示辅助技术元素的状态。

主要连结 Link

<a aria-disabled="true" class="btn btn-primary btn-lg disabled" href="#" role="button" tabindex="-1"> 主要连结 </a>
<a aria-disabled="true" class="btn btn-secondary btn-lg disabled" href="#" role="button" tabindex="-1"> Link </a>

链接功能警告

The .disabled 课堂使用 pointer-events: none 尝试禁用的链接功能 <a> ,但是CSS属性尚未标准化。此外,即使在支持该功能的浏览器中 pointer-events: none ,键盘导航不会受到影响,这意味着有视力的键盘用户和辅助技术用户仍将能够激活这些链接。为了安全起见,请添加一个 tabindex="-1" 属性在这些链接上（以防止它们获得键盘焦点）,并使用自定义JavaScript禁用其功能。

按钮插件

使用按钮执行更多操作。控制按钮状态或为更多组件（如工具栏）创建按钮组。

切换状态

Add data-toggle="button" 切换按钮的 active 州。如果您要预切换按钮,则必须手动添加 .active 类 and aria-pressed="true" 到了 <button>.

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

复选框和单选按钮

引导程序 .button 样式可以应用于其他元素,例如 <label> s,提供复选框或单选样式按钮的切换。 Add data-toggle="buttons" to a .btn-group 包含那些经过修改的按钮,以通过JavaScript启用其切换行为并添加 .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 checked="" type="checkbox"/> 经过 </label>
</div>

活性无线电无线电

<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input checked="" id="option1" name="options" type="radio"/> 活性 </label>
<label class="btn btn-secondary">
<input id="option2" name="options" type="radio"/> 无线电 </label>
<label class="btn btn-secondary">
<input id="option3" name="options" type="radio"/> 无线电 </label>
</div>

方法

方法	描述
`$().button('toggle')`	切换推动状态。使按钮具有已被激活的外观。
`$().button('dispose')`	销毁元素的按钮。

Bootstrap/docs/4.5/components/buttons

目录

纽扣

例子