读书频道 > web开发 > 其他综合 > 深入理解Bootstrap
2.禁用状态
2014-05-09 14:51:34     我来说两句 
收藏    我要投稿   

本文所属图书 > 深入理解Bootstrap

本书是目前Bootstrap领域技术版本最新、内容最全面、介绍最详细、实战性最强、最具深度的著作。它是资深Web技术专家多年工作经验的结晶,不仅授人以鱼,全面讲解了Bootstrap各个功能组件的使用方法,以及对现有插  立即去当当网订购

禁用状态的实现方式主要是完善默认disabled状态的显示状态,使用方式和普通的disabled一样,只需要在禁用元素上使用disabled属性即可。使用方法如下:
<input type="text" placeholder="Disabled input here..." disabled>

源码主要是设置了不准输入的鼠标样式和背景颜色(灰色)。注意,只有带.form-control样式的控件才会更改背景色。请看下面的源码
// 源码1725行
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  /* 若form-control控件或fieldset元素被禁用,显示不允许输入手形图标*/
  cursor: not-allowed;
  background-color: #eee;
  opacity: 1;
}

而如果不使用上述样式,直接在普通的元素上使用disabled属性,则只会显示一个不能输入的手形图标。源码如下:
// 源码1780行
input[type="radio"][disabled],
input[type="checkbox"][disabled],
.radio[disabled],
.radio-inline[disabled],
.checkbox[disabled],
.checkbox-inline[disabled],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"],
fieldset[disabled] .radio,
fieldset[disabled] .radio-inline,
fieldset[disabled] .checkbox,
fieldset[disabled] .checkbox-inline {
  cursor: not-allowed;
}

从上述源码可以看出,fieldset如果使用了disabled属性,则fieldset内部的input、select、textarea或应用了.form-control样式的其他控件也将为禁用状态。让我们来验证一下,示例如下:
<fieldset disabled>
     <legend><input></legend>
     <input type="text" placeholder="Disabled input">
     <select>
        <option>不可选择</option>
     </select>
     <div class="checkbox">
        <label><input type="checkbox">记住密码</label>
     </div>
     <button type="submit" class="btn btn-primary">提交</button>
</fieldset>

运行效果如图3-25所示。我们发现大部分都被禁用了,但是legend内的input却没有被禁用,依然可以输入文本,这是因为这是HTML5的一个限制,即fieldset内的第一个legend元素不受disabled的影响。Bootstrap为了遵守这一规则(其实实现起来也很复杂,要用JavaScript代码进行实现)就继续保持原状了,大家使用过程中要特别注意。

 

注意

由于IE不支持fieldset下的disabled属性(比如,IE10不支持input和button),所以IE下的开发者需要用JavaScript代码再进行特殊处理。

fieldset上应用disabled时,fieldset内部的a标签在所有浏览器下的单击行为都不能被禁用(比如:<a class="btn btn-default">),需要使用JavaScript代码再进行特殊处理。

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:3.5.5 控件状态
下一篇:3.验证提示状态
相关文章
图文推荐
3.2 Windows 7设置
3.1 DNS解析
2.3 HTTP协议
2.2 TCP/IP协议与So
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站