使用 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"
以优化用户使用屏幕阅读器等辅助性技术时的体验。
<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"
属性) 应用相同的启用外观。
<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>
不支持 disabled
属性,所以你必须添加 .disabled
使它在视觉上看起来被禁用。<a>
按钮上的所有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>
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') |
销毁一个元素的按钮。 |