Bootstrap系列 -- 21. 表单提示信息
平常在制作表单验证时,要提供不同的提示信息。在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. 表单提示信息的更多相关文章
- Bootstrap系列 -- 18. 表单控件大小
前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...
- Bootstrap系列 -- 14. 表单控件输入框input
每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...
- BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)
本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...
- BootStrap 智能表单系列 五 表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...
- BootStrap 智能表单系列 四 表单布局介绍
表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- bootstrap学习笔记(表单)
1.基础表单 :对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制. fieldset { min-width: 0 ...
- bootstrap上传表单的时候上传的数据默认是0 一定要小心
bootstrap上传表单的时候上传的数据默认是0 一定要小心
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
随机推荐
- 【VB超简单入门】一、写在前面
每本书的前面总得写点什么,到我这里也自然不能免俗,前言这东西“存在即合理”,所以就随便写一点咯~ 首先这本书是给从未接触过编程的童鞋准备的,由于我学识疏浅,对VB也只是一知半解所以也只能讲一点点最基础 ...
- ElasticSearch Filter Aggregations
类似于sql语句中where子句的作用 { "query": { "match_all": {} }, "aggs": { "ag ...
- Spring @Transactional ——事务回滚
工作原理运行配置@Transactional注解的测试类的时候,具体会发生如下步骤1)事务开始时,通过AOP机制,生成一个代理connection对象,并将其放入DataSource实例的某个与Dat ...
- Android ANR分析
1.发生anr时手机会生产traces文件 拉取trace文件:adb pull data/anr/traces.txt ./mytraces.txt 保存路径 参考
- Linux / OS X 实用命令
具体可用参数还是用man指令查方便一点,在此不一一列出 图片来自imooc 磁盘相关: df 查看硬盘分区情况,实例 df -h du 查看文件大小情况 du -s /Directory 用户/用户组 ...
- 令人哭笑不得的org.hibernate.MappingException: Unknown entity
今天处理的任务是从一套系统中分离出微信易信功能代码添加到另一套系统中..本来是一个很简单的任务,但是分离移植过去后,一运行报了个错: nested exception is org.hibernate ...
- Oracle 数据库优化-分析现有的sql
在做数据库sql优化时,首先要对现有的数据库sql进行优化,主要包括以下几种: 1.数据库正在执行的SQL是? 2.已经执行过得SQL是? 3.最耗时的的前几条SQL是? 4.最耗IO的SQL是? 5 ...
- python之2048
#-*- coding:utf-8 -*- import curses from random import randrange, choice # generate and place new ti ...
- 利用OpacityMask制作打洞效果
起因 项目上存在一个连线功能,在设计的原型中,在连线中间文字上下各有15像素的空白.接手的同事觉得没思路,问我能不能在不影响连线后面的背景情况下解决该问题.我就抽了点时间给他写了个Demo.回家后趁热 ...
- iOS学习资料
1. UI整理 http://www.cocoachina.com/ios/20151110/14067.html. 2. iOS学习路径 http://www.cocoachina.com/ios/ ...