Bootstrap系列 -- 21. 表单提示信息

简介:   平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部。 成功状态 你输入的信息是正确的   Bootstrap提供了一个行内提示信息,其使用了类名“help-inline”。

 

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

 

  

相关文章
N..
|
4月前
|
开发框架 前端开发 UED
Bootstrap表单
Bootstrap表单
N..
52 0
|
11月前
|
前端开发 JavaScript
|
12月前
|
前端开发 JavaScript 数据安全/隐私保护
Bootstrap 表单样式-水平排列
Bootstrap 表单样式-水平排列
60 0
|
1月前
|
前端开发 应用服务中间件 数据库
SpringMVC入门到实战------八、RESTful案例。SpringMVC+thymeleaf+BootStrap+RestFul实现员工信息的增删改查
这篇文章通过一个具体的项目案例,详细讲解了如何使用SpringMVC、Thymeleaf、Bootstrap以及RESTful风格接口来实现员工信息的增删改查功能。文章提供了项目结构、配置文件、控制器、数据访问对象、实体类和前端页面的完整源码,并展示了实现效果的截图。项目的目的是锻炼使用RESTful风格的接口开发,虽然数据是假数据并未连接数据库,但提供了一个很好的实践机会。文章最后强调了这一章节主要是为了练习RESTful,其他方面暂不考虑。
SpringMVC入门到实战------八、RESTful案例。SpringMVC+thymeleaf+BootStrap+RestFul实现员工信息的增删改查
|
3月前
|
机器学习/深度学习 JSON 移动开发
详细解读BootStrap智能表单系列八表单配置json详解
详细解读BootStrap智能表单系列八表单配置json详解
18 0
|
4月前
|
前端开发 JavaScript 容器
Bootstrap 5 保姆级教程(十五):表单
Bootstrap 5 保姆级教程(十五):表单
|
4月前
|
前端开发
Bootstrap 5 保姆级教程(四):信息提示框 & 按钮
Bootstrap 5 保姆级教程(四):信息提示框 & 按钮
|
11月前
|
Web App开发 移动开发 前端开发
|
12月前
|
前端开发
Bootstrap 表单样式
Bootstrap 表单样式
37 0
开心档 - 软件开发入门之 Bootstrap4 自定义表单
Bootstrap4 自定义表单Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。