平常在制作表单验证时,要提供不同的提示信息。在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. Unity3d内置浏览器

    uWebKit是一个Unity3d插件,个人认为比较强大,值得收藏啊 有图有真相: 安装以及破解说明: 1.导入资源包 2.将破解目录里的Editor复制到工程项目的Assets目录下进行覆盖 3.打 ...

  2. 《精解Windows 10》

    <精解Windows 10>全面深入讲解Windows 10操作系统的使用方法.本书共计14章内容.第一章简述Windows 10操作系统的一些变革:第二章介绍Modern 2.0界面的体 ...

  3. VMware Workstation不可恢复的错误:(vmui)

    虚拟机中部署项目,由于项目的日志是gbk的,就把虚拟机中linux编码改成gbk了,结果问题来了,日志显示中文正常了,但是虚拟机运行一下就出错了,注意虚拟机出错,并没导致linux也挂掉,只是linu ...

  4. Learning C Struct

    为什么需要结构体类型? 一种语言本身往往会提供一些最基本的数据类型,比如数字型(int,bigint,float,double等),字符型,日期型,布尔型等.但现实世界中,我们面对的对象总是非常复常, ...

  5. [转]Ionic Datepicker

    本文转自:https://market.ionic.io/plugins/ionicdatepicker ##Introduction: This is an ionic-datepicker bow ...

  6. 【Ext.Net学习笔记】07:后续

    这些笔记都是在这个地址看到的:http://www.qeefee.com/category/extnet 然后跟着敲,去理解的. Ext.NET其实就是基于跨浏览器的ExtJS库和.NET Frame ...

  7. 边工作边刷题:70天一遍leetcode: day 71-2

    One Edit Distance 要点:有两种解法要考虑:已知长度和未知长度(比如只给个iterator) 已知长度:最好不要用if/else在最外面分情况,而是loop在外,用err记录misma ...

  8. Mango Weekly Training Round #6 解题报告

    比赛链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=41856#overview A.多种解法.可以dfs倒序染色,如mathlove ...

  9. POJ 2263 Heavy Cargo 多种解法

    好题.这题可以有三种解法:1.Dijkstra   2.优先队列   3.并查集 我这里是优先队列的实现,以后有时间再用另两种方法做做..方法就是每次都选当前节点所连的权值最大的边,然后BFS搜索. ...

  10. 如何查看windows xp系统的位数?

    1.右击“我的电脑”->属性,可以看到.2.运行dxdiag,在操作系统一行可以看到.3.运行cmd,输入systeminfo,在系统类型一栏可以看到.--简单4.使用一些检测软件也可以看,像鲁 ...