目录

Bootstrap JS 按钮

❮ 上一节下一节 ❯

JS 按钮 (button.js)

如果您想更好地控制按钮，请使用此插件。

有关按钮的教程，请阅读我们的Bootstrap 按钮教程。

按钮插件类

下面的类可用于设置任何 <a>、<button> 或 <input> 元素的样式：

Class	Description	Example
.btn	Adds basic styling to any button	尝试一下
.btn-default	Indicates a default/standard button	尝试一下
.btn-primary	Provides extra visual weight and identifies the primary action in a set of buttons	尝试一下
.btn-success	Indicates a successful or positive action	尝试一下
.btn-info	Contextual button for informational alert messages	尝试一下
.btn-warning	Indicates caution should be taken with this action	尝试一下
.btn-danger	Indicates a dangerous or potentially negative action	尝试一下
.btn-link	Makes a button look like a link (will still have button behavior)	尝试一下
.btn-lg	Makes a large button	尝试一下
.btn-sm	Makes a small button	尝试一下
.btn-xs	Makes an extra small button	尝试一下
.btn-block	Makes a block-level button (spans the full width of the parent element)	尝试一下
.active	Makes the button appear pressed	尝试一下
.disabled	Makes the button disabled	尝试一下

通过JavaScript

手动启用：

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

按钮选项

None

按钮方法

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

笔记：对于这个插件，方法也可以通过数据属性来传递；将方法名称附加到 data-，如 data-toggle 或 data-loading。

Method	Description	尝试一下
.button("toggle")	Makes the button look pressed	尝试一下
.button("loading")	Disables the button and changes the button text to "loading..."	尝试一下
.button("reset")	Changes the button text to original text (if changed)	尝试一下
.button("string")	Specifies a new button text	尝试一下

更多示例

使用 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;
}

亲自试一试 »

❮ 上一节下一节 ❯