纽扣
将 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
锚按钮。在支持该属性的浏览器中,您根本不会看到禁用的光标。 - 使用的禁用按钮
<a>
应包含aria-disabled="true"
向辅助技术指示元素状态的属性。 - 使用的禁用按钮
<a>
不应包含该href
属性。
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
链接功能警告
为了涵盖必须将href
属性保留在禁用链接上的情况,.disabled
该类使用pointer-events: none
尝试禁用<a>
s 的链接功能。请注意,此 CSS 属性尚未针对 HTML 进行标准化,但所有现代浏览器都支持它。此外,即使在支持 的浏览器中pointer-events: none
,键盘导航也不受影响,这意味着有视力的键盘用户和辅助技术用户仍然能够激活这些链接。所以为了安全起见,除了 之外aria-disabled="true"
,还要在这些链接上包含一个tabindex="-1"
属性以防止它们接收键盘焦点,并使用自定义 JavaScript 完全禁用它们的功能。
<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>
按钮插件
用按钮做更多事情。控制按钮状态或为更多组件(如工具栏)创建按钮组。
切换状态
添加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') |
销毁元素的按钮。 |