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. mac 环境下使用virtual box 虚拟机(win7)与主机之间互相ping通

    首先选择virtual box设置网络连接方式为网桥 混杂模式设置为全部允许 如下图: 进入虚拟机把虚拟机IP设置和主机在一个网段.如主机是192.168.1.100虚拟机可以设置为192.168.1 ...

  2. iTunes备份文件路径

    Windows 7 电脑:C:\Users\使用者名称\AppData\Roaming\Apple Computer\MobileSync\Backup XP 电脑:C:\Documents and ...

  3. nexus4/5/6/7/9/10设备谷歌安卓5.1.1系统底包下载

    https://developers.google.com/android/nexus/images http://www.inexus.co/thread-18488-1-1.html

  4. SqlServer 笔记

    问题一:这标红色的符号 取掉 一直没有见过标红色的符号,尝试把这些符号粘贴出来到 notepad 发现它是乱码,尝试将它粘贴到sql查询分析器里,发现它显示空白.对于这种数据,一直想着找到这个acsi ...

  5. iOS开发之多媒体API

    播放视频 视频文件介绍 视频格式可以分为适合本地播放的本地影像视频和适合在网络中播放的网络流媒体影像视频两大类.尽管后者在播放的稳定性和播放画面质量上可能没有前者 优秀,但网络流媒体影像视频的广泛传播 ...

  6. 关于CCRect

    一直有一个误区,因为之前处理的公司引擎是屏幕坐标系 导致觉得CCRect的坐标起始值(x,y),习惯性的认为就是左上角的点. 但是,真正的x,y值,是跟x轴与y轴相对应的.

  7. ViutualBox虚拟机里添加磁盘

    1.首先在VirtualBox界面给虚拟机添加一块磁盘 2. 启动系统,查看当前磁盘空间 Last login: Tue Mar 15 22:24:47 2016 from 192.168.1.100 ...

  8. Python序列的方法(转)

    在快速教程中,我们了解了最基本的序列(sequence).回忆一下,序列包含有定值表(tuple)和表(list).此外,字符串(string)是一种特殊的定值表.表的元素可以更改,定值表一旦建立,其 ...

  9. (转)在Repeater中嵌套使用Repeater

    在一般的网站中浏览类别的用户控件通常都位于大多数 ASP.NET 页的左边,它使用户能够按类别快速的查找产品.最近遇到一个客户,因为在他网站上展示的产品并不多,所以要求在原有类别浏览的基础上将产品也加 ...

  10. UITableVIewcell中图片不能改变大小的原因

    你有没没有发现,有时候把图片放进cell.imageView中时无法顺利改变大小呢? 其实根本原因是要在layoutSubviews重新配置一下,cell的布局里面默认有一个imageiView,同时 ...