1、disabled:

(1)在input中加入disabled可使表单禁用,如图:

<input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用,不可输入" disabled></div>

(2)如果fieldset设置了disabled属性,整个域都将处于被禁用状态,如图:

<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>
</fieldset>

2、legend:如果legend中有输入框的话,这个输入框是无法被禁用的,如图:

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

3、表单验证状态:加上has-feedback,并且加一个

<span class="glyphiconglyphicon-ok form-control-feedback"></span>

标签,才会出现小图标;在<input>下面加上<span class="help-block">来显示“你们输入的正确信息”。

<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="help-block">你输入的信息是正确的</span>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
<span class="help-block">请输入正确信息</span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
<span class="help-block">你是输入的信息是错误的</span>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>

关于bootstrap--表单控件(disabled表单禁用、显示表单验证的样式)的更多相关文章

  1. 如何给动态添加的form表单控件添加表单验证

    最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...

  2. html5 新增表单控件和表单属性

    新的输入型控件 email:电子邮箱文本框,跟普通的没什么区别 当输入不是邮箱的时候,验证通不过 移动端的键盘会有变化         tel:电话号码 一般用于手机端,是一个键盘切换 url:网页的 ...

  3. html5新增表单控件和表单属性

    表单验证 Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false) 阻止默认验证:ev.preventDefault() formnova ...

  4. HTML5自学笔记[ 2 ]新增表单控件和表单属性

    新增<input>属性type="email",自动验证,若输入不为邮箱,则不能提交. 新增<input>属性type="tel",在移 ...

  5. 前端笔记——如何控制表单控件中的disabled

    0.前言     本文主要说明如何使能或禁止表单控件.表单控件具有disabled属性,通过设置该属性可以禁止所有的input控件,input的更多属性请参考资料[1].下面就通过一个简单的例子说明如 ...

  6. Bootstrap关于表单控件(Radio,CheckBox)

    表单控件(复选框checkbox和单选择按钮radio) Bootstrap框架中checkbox和radio有点特殊,Bootstrap针对他们做了一些特殊化处理,主要是checkbox和radio ...

  7. 表单控件之select

    一.表单控件之表单 1.依次获取表单里的所有控件: for (i = 0; i < document.getElementById("formName").length; i ...

  8. FineUI第六天---表单控件

    表单控件 所有表单控件都有的属性有: ShowLabel:是否显示标签(默认值:true). ShowEmptyLabel:是否显示空白的标签(默认值:false). Label:标签文本(默认值:& ...

  9. Angular19 自定义表单控件

    1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...

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

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

随机推荐

  1. JavaScript 单例模式实现

    Singleton模式指的是调用一个类,任何时候返回的都是同一个实例. 对于Node来说,模块文件可以看成是一个类.怎么保证每次执行这个模块文件,返回的都是同一个实例呢? 很容易想到,可以把实例放到顶 ...

  2. JS~模拟表单在新窗口打开,避免广告拦截

    说起广告拦截,这应该是浏览器的一个特性,它会将window.open产生的窗口默认为一个广告,将它进行拦截,但有时,这不是我们所希望的,有时,我们就是需要它在客户端的浏览器上弹出一个新窗口,以展示数据 ...

  3. 【HPP开发】让所有中小企业拥有自己的APP

    HPP hybirdApp或者hbuilderApp, 指通过html,css,js语言开发出ios和android两个版本的APP, 开发效率成倍上升,开发时间大幅缩减,开发成本同样也大大缩减. 移 ...

  4. QML设计登陆界面

    QML设计登陆界面 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN7 开发环境:Qt5.2 说明: 用QML设计一个应用的登陆界面 ...

  5. 获取布局 ActionBar

    LayoutInflater inflater = getLayoutInflater();View imageLayout = inflater.inflate(R.layout.preferenc ...

  6. structured sparsity model

    Data representation往往基于如下最小化问题:         (1) 其中X是观测到的数据的特征矩阵,D是字典,Z是字典上的描述.约束项和使得字典dictionary和描述code具 ...

  7. android 删除的警告对话框

    在图形界面之中,对话框也是人机交互的一种重要的形式,程序可以通过对话框对用户进行一些信息的提示,而 用户也可以通过对话框和程序进行一些简单的交互操作. 在Android的开发之中,所有的对话框都是从a ...

  8. 使用VisualVM查看Java Heap Dump

    浏览Heap Dump 可以使用VisualVM浏览heap dump文件的内容,从而快速查看在堆中分配的对象.Heap dumps在主窗口的heap dump子标签页中显示.你可以打开保存在本地的h ...

  9. poj1418 Viva Confetti 判断圆是否可见

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Viva Confetti Time Limit: 1000MS   Memory ...

  10. OSG调试信息显示

    调试信息显示 OSG 可以将各式各样的调试信息输出到std:cout.这在开发OSG 程序时十分有用,你可以借此观察OSG 的执行的各种操作.环境变量OSG_NOTIFY_LEVEL用于控制OSG调试 ...