Bootstrap JS 按钮
JS 按钮 (button.js)
如果您想对按钮进行更多控制,请使用此插件。
有关按钮的教程,请阅读我们的 Bootstrap 按钮教程。
按钮插件类
下面的类可用于设置任何 <a>、<button> 或 <input> 元素的样式
类 | 描述 | 示例 |
---|---|---|
.btn | 为任何按钮添加基本样式 | 试一试 |
.btn-default | 表示默认/标准按钮 | 试一试 |
.btn-primary | 提供额外的视觉权重,并识别一组按钮中的主要操作 | 试一试 |
.btn-success | 表示成功或积极的操作 | 试一试 |
.btn-info | 用于信息警报消息的上下文按钮 | 试一试 |
.btn-warning | 表示此操作应谨慎进行 | 试一试 |
.btn-danger | 表示危险或潜在的负面操作 | 试一试 |
.btn-link | 使按钮看起来像链接(仍具有按钮功能) | 试一试 |
.btn-lg | 制作大号按钮 | 试一试 |
.btn-sm | 制作小号按钮 | 试一试 |
.btn-xs | 制作超小号按钮 | 试一试 |
.btn-block | 制作块级按钮(跨越父元素的全部宽度) | 试一试 |
.active | 使按钮显示为按下状态 | 试一试 |
.disabled | 使按钮失效 | 试一试 |
通过 JavaScript
使用以下命令手动启用:
$('.btn').button();
按钮选项
无 |
按钮方法
下表列出了所有可用的按钮方法。
注意: 对于此插件,也可以通过 data 属性传递方法;将方法名称附加到 data-,例如 data-toggle 或 data-loading。
方法 | 描述 | 试一试 |
---|---|---|
.button("toggle") | 使按钮看起来为按下状态 | 试一试 |
.button("loading") | 禁用按钮并将按钮文本更改为“loading...” | 试一试 |
.button("reset") | 将按钮文本更改为原始文本(如果已更改) | 试一试 |
.button("string") | 指定新的按钮文本 | 试一试 |
更多示例
使用 CSS 自定义按钮
如何移除圆角边框
如何添加特定颜色
示例
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
}
自己动手试一试 »
如何添加阴影