Bootstrap3 按钮-禁用状态

来源:互联网 发布:java instance 编辑:程序博客网 时间:2024/06/04 19:07

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。

button 元素
<button> 元素添加 disabled 属性,使其表现出禁用状态。

这里写图片描述

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button><button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

链接(<a>)元素
为基于 <a> 元素创建的按钮添加 .disabled 类。

这里写图片描述

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a><a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

我们把 .disabled 作为工具类使用,就像 .active 类一样,因此不需要增加前缀。

链接的原始功能不受影响
上面提到的类只是通过设置 pointer-events: none 来禁止 <a> 元素作为链接的原始功能,但是,这一 CSS 属性并没有被标准化,并且 Opera 18 及更低版本的浏览器并没有完全支持这一属性,同样,Internet Explorer 11 也不支持。因此,为了安全起见,建议通过 JavaScript 代码来禁止链接的原始功能。

Context-specific usage
虽然按钮类可以应用到 <a><button> 元素上,但是,导航和导航条只支持 <button> 元素。


—–下面有个“顶”字,你懂得O(∩_∩)O哈哈~
—–乐于分享,共同进步!
—–更多文章请看:http://blog.csdn.net/duruiqi_fx


1 0