章节
问答
课签
笔记
评论
占位
占位

按钮状态——禁用状态

和input等表单控件一样,在Bootstrap框架的按钮中也具有禁用状态的设置。禁用状态与其他状态按钮相比,就是背景颜色的透明度做了一定的处理,opcity的值从100%调整为65%。

在Bootstrap框架中,要禁用按钮有两种实现方式:

方法1:在标签中添加disabled属性

方法2:在元素标签中添加类名“disabled

两者的主要区别是:

“.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题,如果通过类名“.disable”来禁用按钮,其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

下面是两种方法的举例:

<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
<button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按钮</button>

运行效果如下或查看右侧结果窗口:

对应的样式代码请查阅bootstrap.css文件第2030行~第2039行:

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
  -webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}

同样的,其他风格按钮也具有这样的效果,只是颜色做了一定的调整,比如信息按钮(.btn-info)所示:
/*源码请查看bootstrap.css文件第2182行~第2199行*/

.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
background-color: #5bc0de;
border-color: #46b8da;
}

到此有关于按钮的基础知识就算是介绍完了,同样的,大家可以通过buttons.less或者_buttons.scss来自定义按钮风格。

 

 

任务

我来试试:完成下面任务

在右侧代码编辑中使用为reset按钮添加“.disabled”样式的方法使reset按钮处于禁止状态,试一试,reset按钮的重置行为是否没有被禁止。

?不会了怎么办

备注:这一小节没有正确性验证,请查看结果窗口,从而判断输入代码是否正确。

 

||
1
2
<!doctype html>
<html lang="en"
    >
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
body {
padding: 50px
      200px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / Will2018
类名里的disabled禁用了按钮

最新回答 / 慕移动9181930
我发现我用的是html5的开头部分,就是图中显示的这样,换成html其他版本就正常显示了,不知道这是为什么?注释是写程序良好的习惯哦~

最赞回答 / JoKer49
因为设置了 pointer-events:none;  把所有事件全部禁掉了,包括hover click等 所以cursor 也没有了 

最赞回答 / 依韵_宵音
问题 已经解决在这儿演示的时候是可以的,应该是环境问题,这里的测试环境应该还引用了别的东西。自己新建页面去写,只引用<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">这个样式表,是禁止不了行为的,测试代码如下:<...code...>

最新回答 / 慕丝1033313
为什么要有disabled="false"?

最新回答 / dou1235
课程上不是说disabled属性会取消默认行为 而.disabled只禁止但不取消默认行为么

已采纳回答 / 李晓健
less 或 scss文件 应该把一些关键的样式都定义成变量了(我没去看过源码,只是猜的),你只需要把这些变量的值改掉就行了。

最新回答 / 浅草是彬
不是在慕课网上,在本地执行也是这样, 目前的版本两种disabled添加方式应该都会禁用默认行为 ..你可以在你的本地执行试一下..

最赞回答 / 于梦中
在3.1.1版本中,无论是用disabled类还是disabled属性的方法,链接行为都被禁止了看源码,btn.disabled第一句就是pointer-events:none;阻止鼠标事件。。。按钮的点击操作肯定都不行了

最赞回答 / lianke008
<...code...>譬如这样只要通过在botton的class属性中添加/去掉disabled值就可以对比效果了

最赞回答 / 渊翼
disabled属性只有表单元素才有的~如果要禁用 a 的默认事件,只能用javascript

最赞回答 / Luyoyo
因为设置了 pointer-events:none;  把所有点击事件全部禁掉了,所有cursor 也没有了

已采纳回答 / purple_yao
是的,都会禁止默认行为。
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言