Bootstrap 按钮（Button）插件

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

加载状态

如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可，如下面实例所示：

实例

<
button

id
=
"
fat-btn
"

class
=
"
btn btn-primary
"

data-loading-text
=
"
Loading...
"

type
=
"
button
"
>
加载状态
</
button
>

<
script
>
$(function() { $(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() { // $(this).button('reset'); // $(this).dequeue(); }); }); });
</
script
>


尝试一下 »

结果如下所示：

单个切换

如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 作为其属性即可，如下面实例所示：

实例

<
button

type
=
"
button
"

class
=
"
btn btn-primary
"

data-toggle
=
"
button
"
>
单个切换
</
button
>


尝试一下 »

结果如下所示：

复选框（Checkbox）

您可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换。

实例

<
div

class
=
"
btn-group
"

data-toggle
=
"
buttons
"
>

<
label

class
=
"
btn btn-primary
"
>

<
input

type
=
"
checkbox
"
>
选项 1
</
label
>

<
label

class
=
"
btn btn-primary
"
>

<
input

type
=
"
checkbox
"
>
选项 2
</
label
>

<
label

class
=
"
btn btn-primary
"
>

<
input

type
=
"
checkbox
"
>
选项 3
</
label
>

</
div
>


尝试一下 »

结果如下所示：

单选按钮（Radio）

类似地，您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加单选按钮组的切换。

实例

<
div

class
=
"
btn-group
"

data-toggle
=
"
buttons
"
>

<
label

class
=
"
btn btn-primary
"
>

<
input

type
=
"
radio
"

name
=
"
options
"

id
=
"
option1
"
>
选项 1
</
label
>

<
label

class
=
"
btn btn-primary
"
>

<
input

type
=
"
radio
"

name
=
"
options
"

id
=
"
option2
"
>
选项 2
</
label
>

<
label

class
=
"
btn btn-primary
"
>

<
input

type
=
"
radio
"

name
=
"
options
"

id
=
"
option3
"
>
选项 3
</
label
>

</
div
>


尝试一下 »

结果如下所示：

用法

您可以 通过 JavaScript 启用按钮（Button）插件，如下所示：

$('.btn').button()

选项

没有选项。

方法

下面是一些按钮（Button）插件中有用的方法：

$().button('toggle')

$().button('loading')

$().button('reset')

$().button(string)

实例

下面的实例演示了上面方法的用法：

实例

<
h2
>
点击每个按钮查看方法效果
</
h2
>

<
h4
>
演示 .button('toggle') 方法
</
h4
>

<
div

id
=
"
myButtons1
"

class
=
"
bs-example
"
>

<
button

type
=
"
button
"

class
=
"
btn btn-primary
"
>
原始
</
button
>

</
div
>

<
h4
>
演示 .button('loading') 方法
</
h4
>

<
div

id
=
"
myButtons2
"

class
=
"
bs-example
"
>

<
button

type
=
"
button
"

class
=
"
btn btn-primary
"

data-loading-text
=
"
Loading...
"
>
原始
</
button
>

</
div
>

<
h4
>
演示 .button('reset') 方法
</
h4
>

<
div

id
=
"
myButtons3
"

class
=
"
bs-example
"
>

<
button

type
=
"
button
"

class
=
"
btn btn-primary
"

data-loading-text
=
"
Loading...
"
>
原始
</
button
>

</
div
>

<
h4
>
演示 .button(string) 方法
</
h4
>

<
button

type
=
"
button
"

class
=
"
btn btn-primary
"

id
=
"
myButton4
"

data-complete-text
=
"
Loading finished
"
>
请点击我
</
button
>

<
script
>
$
(
function

(
)

{
$
(
"
#myButtons1 .btn
"
)
.
click
(
function
(
)
{
$
(
this
)
.
button
(
'
toggle
'
)
;
}
)
;
}
)
; $
(
function
(
)

{
$
(
"
#myButtons2 .btn
"
)
.
click
(
function
(
)
{
$
(
this
)
.
button
(
'
loading
'
)
.
delay
(
1000
)
.
queue
(
function
(
)

{

}
)
;
}
)
;
}
)
; $
(
function
(
)

{
$
(
"
#myButtons3 .btn
"
)
.
click
(
function
(
)
{
$
(
this
)
.
button
(
'
loading
'
)
.
delay
(
1000
)
.
queue
(
function
(
)

{
$
(
this
)
.
button
(
'
reset
'
)
;
}
)
;
}
)
;
}
)
; $
(
function
(
)

{
$
(
"
#myButton4
"
)
.
click
(
function
(
)
{
$
(
this
)
.
button
(
'
loading
'
)
.
delay
(
1000
)
.
queue
(
function
(
)

{
$
(
this
)
.
button
(
'
complete
'
)
;
}
)
;
}
)
;
}
)
;
</
script
>


尝试一下 »

结果如下所示：