Bootstrap JS 按钮
JS Button (button.js)
如果您想更好地控制您的按钮，可以使用这个插件。
要学习更多相关知识，请访问本站的 Bootstrap 按钮教程.
Button 插件类
下面的类可用于设置任何 <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 Options
| None |
Button 方法
下表列出了所有可用的按钮方法。
注意：对于这个插件，方法也可以通过数据属性传递；将方法名称附加到 data-，如在 data-toggle 或者 data-loading。
| 方法 | 描述 | 试一试 |
|---|---|---|
| .button("toggle") | 使按钮看起来按下了 | 试一试 |
| .button("loading") | 禁用按钮并将按钮文本更改为 "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;}