按钮

使用 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 类隐藏这些必要的内容。

按钮标签

.btn 是设计为了于 <button> 元素一起使用。 但是,你也可以在 <a><input> 元素上使用这些 Class(尽管有些浏览器可能会使用稍微不同的渲染)。

当在用于触发页面内功能(例如折叠内容)的 <a> 元素上使用按钮类,而不是链接到新页面或当前页面中的部分时,这些 <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-* 替换默认修饰用的 Class,以移除任何按钮上的所有背景色及背景图。

<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>添加一个 Class,因为它们使用伪类。但是,如果你需要以动态方式改变状态,则可以使用 .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>

停用状态

通过将 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> 元素的停用略有不同:

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>

The .disabled 使用 pointer-events: none 来禁用 <a>的链接功能,但该 CSS 属性尚未标准化。此外,即使在支持 pointer-events: none 的浏览器中,键盘导览仍然不受影响,这意味著键盘使用者和辅助性技术的使用者仍然可以启动这些链接。为了安全起见,在这些链接上添加一个 tabindex="-1" 属性防止他们应用 focus,并使用自定义的 JavaScript 来禁用它们的功能。

按钮插件

让按钮可以做更多,控制按钮状态或群组按钮等相关的元件。

切换状态

增加 data-toggle="button" 来切换按钮 active 状态。 如果你预先需要切换按钮,则必须手动将 .active class aria-pressed="true" 添加到 <button> 中。

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

复选框和选项按钮

Bootstrap’s .button 样式可以应用于其他元素,例如 <label>以提供复选框或选项按钮样式进行按钮切换。 将 data-toggle="buttons" 加到包含这些按钮的 .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 type="checkbox" checked autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

方法

方法 描述
$().button('toggle') 切换状态,给予按钮已经启用的外观。
$().button('dispose') 销毁一个元素的按钮。