Bootstrap 按钮（Button）插件

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

创新互联是一家专注于网站建设、成都网站制作与策划设计,利津网站建设哪家好?创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:利津等地区。利津做网站价格咨询:028-86922220

加载状态

如需向按钮添加加载状态，只需要简单地向 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
>

尝试一下 »

结果如下所示：

当前标题：创新互联Bootstrap教程：Bootstrap按钮（Button）插件
文章地址：http://www.shufengxianlan.com/qtweb/news14/493964.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联