W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

Bootstrap JS 按钮



按钮 (button.js)

按钮(Button)在 Bootstrap 按钮 一章中介绍过。通过按钮(Button)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组。

如果想了解按钮相关知识,请阅读我们的 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 启用按钮(Button)插件,如下所示:

$('.btn').button();

选项

None

方法

下表列出了所有可用的按钮方法。

方法 描述 实例
.button("toggle") 切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。 测 试
.button("loading") 当加载时,按钮是禁用的,且文本变为 button 元素的 data-loading-text 属性的值。 测 试
.button("reset") 重置按钮状态,文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时,该方法非常有用。 测 试
.button("string") 该方法中的字符串是指由用户声明的任何字符串。使用该方法,重置按钮状态,并添加新的内容。 测 试

Examples

更多实例

使用CSS自定义按钮

如何去除圆形边框:

Example

.btn-default {
    border-radius: 0;
}
尝试一下 »

如何添加特定颜色:

Example

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

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

如何添加阴影:

Example

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