Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的,在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是,Bootstrap框架做了一些样式风格的处理:

使用方法为:只需要在需要禁用的表单控件上加上“disabled”即可:

<input class="form-control" type="text" placeholder="表单已禁用,不能输入" disabled>

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

在使用了“form-control”的表单控件中,样式设置了禁用表单背景色为灰色,而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”,禁用的控件只会有一个不准输入的手型出来。

在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态。

<form role="form">
<fieldset disabled>
  <div class="form-group">
  <label for="disabledTextInput">禁用的输入框</label>
    <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
  </div>
  <div class="form-group">
  <label for="disabledSelect">禁用的下拉框</label>
    <select id="disabledSelect" class="form-control">
  <option>不可选择</option>
  </select>
  </div>
  <div class="checkbox">
  <label>
    <input type="checkbox">无法选择
  </label>
  </div>
  <button type="submit" class="btnbtn-primary">提交</button>
</fieldset>
</form>

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

据说对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用的。我们一起来验证一下:

<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /></legend>

</fieldset>
</form>

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

Bootstrap 表单控件状态(禁用状态)的更多相关文章

  1. Bootstrap 表单控件状态(验证状态)

    在制作表单时,不免要做表单验证.同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果.1..has-warning:警告状态(黄色)2..has-error:错误状态(红色)3.. ...

  2. Bootstrap历练实例:表单控件状态(禁用的字段集fieldset)

    禁用的字段集 fieldset 对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件. <!DOCTYPE html>& ...

  3. Bootstrap历练实例:表单控件状态(禁用)

    禁用的输入框 input 如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式. < ...

  4. Bootstrap中表单控件状态(验证状态)

      Bootstrap 表单 http://www.runoob.com/try/try2.php?filename=bootstrap3-form-controlstate (这链接里有简介) &l ...

  5. Bootstrap之表单控件状态

    Bootstrap中的表单控件状态主要有三种:焦点状态,禁用状态,验证状态.   一.焦点状态:该状态告诉用户可输入或选择东西 焦点状态通过伪类“:focus”以实现. bootstrap.css相应 ...

  6. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:表单控件状态

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. Bootstrap历练实例:表单控件状态(焦点)

    输入框焦点 当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow. <!DOCTYPE html><html><head& ...

  9. bootstrap 表单元素、按钮、链接的禁用

    在Bootstra中,表单元素,按钮通过在标签内设置 disabled 或 disabled="disabled" 可以禁用表单元素,按钮.链接需要加入class="di ...

随机推荐

  1. CSS制作响应式正方形及其应用

    CSS制作响应式正方形?什么鬼?干嘛用的?干嘛用的没人有每人的需求,本人也正好是由于公司正在做的业务须要,想做个照片展示的功能(当然得符合响应式了).而这个照片展示必须符合下面几点功能:1.用三张图片 ...

  2. C# 数据库备份与还原 小妹做了一个winform系统,需要对sql2000数据库备份和还原(小妹妹你太狠了)

      成功了,把代码帖出来给大家看看,跟我刚开始帖出来的差不多,是需要杀掉进程的,我之前调用的存储过程,可能有点问题,现在改成sql了/// <summary>        /// 数据库 ...

  3. ssdb底层实现——ssdb底层是leveldb,leveldb根本上是skiplist(例如为存储多个list items,必然有多个item key,而非暴力string cat),用它来做redis的list和set等,势必在数据结构和算法层面上有诸多不适

    我已经在用ssdb的hash结构,存储了很多数据了,但是我现在的用法正确吗? 我使用hash结构合理吗? 1. ssdb数据库说是类似redis,而且他们都有hash结构,但是他们的命名有点不同,ss ...

  4. STL 集合部分操作

    3.28更新 在EOJ 1641 集合栈计算机中,使用并集和补集时候,第五个参数使用x.begin()会报错:assignment of read-only location,而使用inserter( ...

  5. iOS获取相册/相机图片-------自定义获取图片小控件

    一.功能简介 1.封装了一个按钮,点击按钮,会提示从何处获取图片:如果设备支持相机,可以从相机获取,同时还可以从手机相册获取图片. 2.选择图片后,有一个block回调,根据需求,将获得的图片拿来使用 ...

  6. Flink之流处理理论基础

    目录 Introduction to Stateful Stream Processing Traditional Data Infrastructures Stateful Stream Proce ...

  7. PCB MS SERVER 数据导出与导入操作步骤----使用第3方工具

    工作每天都与数据库打交道,经常会遇到一些需要将数据库中的数据导出来或将数据导入到数据库 而用微软数据库客户端自带的功能操作步骤好麻烦的,用过的大家都会有相同的感受吧. 微软客户端不好之处整理:这里吐槽 ...

  8. 复习HTML+CSS(7)

    n  HTML 注释 <--! 注释内容 --> 注意:注释内容不会显示,注释是为了将来维护方面. n  图片热点(图像地图) 图像热点:给一张图片加多个链接,默认情况下,一张图片只能加一 ...

  9. HTML简单入门

    - Java攻城狮学习路线 - 基本结构 标准文档:www.w3.org <!DOCTYPE html> <html> <head> <meta charse ...

  10. 前端HTML中float学习笔记

    float元素原本的作用是用来使文字包裹图片,现在人们更多的是用来进行布局(ps:有没有点滥用的意思) 也就是说本来你排好的界面设计,但是因为浮动会导致元素脱离文档流,使得其他非浮动的块级元素会无视这 ...