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 {
  border-radius: 0;
}
亲自试一试 »

如何添加特定颜色:

实例

.btn-default {
  background: #000;
  color: #fff;
}

.btn-default:hover {
  background: #fff;
  color: #000;
}
亲自试一试 »

如何添加阴影:

实例

.btn-default {
  box-shadow: 1px 2px 5px #000000;
}
亲自试一试 »