Bootstrap JS 按钮参考
JS Button (button.js)
如果您想更好地控制按钮，请使用此插件。
有关按钮的教程，请阅读我们的 our 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();
Button 按钮选项
| None |
Button 按钮方法
下表列出了所有可用的按钮方法。
注释: 对于这个插件，方法也可以通过数据属性传递； 将方法名称附加到 data-，如在 data-toggle 或 data-loading 中。
| 方法 | 描述 | 试一试 |
|---|---|---|
| .button("toggle") | 使按钮看起来被按下 | 测试一下 |
| .button("loading") | 禁用按钮并将按钮文本更改为"正在加载..." | 测试一下 |
| .button("reset") | 将按钮文本更改为原始文本（如果更改） | 测试一下 |
| .button("string") | 指定一个新的按钮文本 | 测试一下 |
更多实例
使用 CSS 自定义按钮
如何去除圆角:
如何添加特定颜色:
实例
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
}
亲自试一试 »
如何添加阴影:
