平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"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="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
</form>

Bootstrap提供了一个行内提示信息,其使用了类名“help-inline”。一般让提示信息显示在控件的后面,也就是同一水平显示。

<form role="form">
<div class="form-group">
<label class="control-label" for="inputSuccess1">成功状态</label>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
<span class="col-xs-6 help-block">你输入的信息是正确的</span>
</div>
</div>
</form>

  

Bootstrap系列 -- 21. 表单提示信息的更多相关文章

  1. Bootstrap系列 -- 18. 表单控件大小

    前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...

  2. Bootstrap系列 -- 14. 表单控件输入框input

    每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...

  3. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  4. BootStrap 智能表单系列 五 表单依赖插件处理

    这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...

  5. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  6. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  7. bootstrap学习笔记(表单)

    1.基础表单 :对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制. fieldset { min-width: 0 ...

  8. bootstrap上传表单的时候上传的数据默认是0 一定要小心

    bootstrap上传表单的时候上传的数据默认是0 一定要小心

  9. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

随机推荐

  1. Linux 常用命令行

    Linux常用命令行 第一部分: cd命令 第二部分:文件操作 第三部分:压缩包操作

  2. poj 3159 Candies 差分约束

    Candies Time Limit: 1500MS   Memory Limit: 131072K Total Submissions: 22177   Accepted: 5936 Descrip ...

  3. 记一次查内存异常问题(续《记一次Web应用CPU偏高》)

    继上一次查应用的CPU飙高问题(http://www.cnblogs.com/hzmark/p/JVM_CPU.html)过去10天了.上次只是定位到了是一个第三方包占用了大量的CPU使用,但没有细致 ...

  4. JavaScript 题目破解过程与解析

    题目来源 https://www.hackthissite.org/missions/javascript/ HackThisSite JavaScript mission 1-7 1 我先尝试输入  ...

  5. Codeforces Round #254 DZY Loves Colors

    题意:输入n, m ; 有n给位置, 初始时第i个位置的color为i, colorfulness为0.      有m次操作,一种是把成段的区域color更新为x, 对于更新的区域,每个位置(令第i ...

  6. MySQL在创建相同表结构时as和like 使用的区别

    1.MySQL的复制相同表结构方法: 1)create table table_name as select * from table1 where 1=2 (或者limit  0): 2) crea ...

  7. 如何在WIN7下进行LINUX虚拟机搭建

    Linux是一套免费使用和自由传播的类Unix操作系统,非常适用于搭建网络服务器等,我本人日常工作时,是使用的LINUX和WIN7双操作系统,但每次更换系统总要关机重启很不方便,所以也在WIN7下搭建 ...

  8. MIT jos 6.828 Fall 2014 训练记录(lab 3)

    注:源代码参见我的github: https://github.com/YaoZengzeng/jos Part A : User Environments and Exception Handlin ...

  9. IT技术团队管理-总结

    摘要:此文是书籍<行之有效:IT技术团队管理之道>的读书笔记. 主要是方便自己回顾. 您也可以通过此文简要了解此书的内容. 博客: http://www.cnblogs.com/jhzhu ...

  10. UVALive 6449 IQ Test --高斯消元?

    题意:给你一串数字,问这串数字符合f[n] = a*f[n-1],f[n] = a*f[n-1]+b*f[n-2],f[n] = a*f[n-1]+b*f[n-2]+c*f[n-3]这几个方程中的哪个 ...