Bootstrap系列 -- 21. 表单提示信息
2015-06-25 11:53
543 查看
平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部。
Bootstrap提供了一个行内提示信息,其使用了类名“help-inline”。一般让提示信息显示在控件的后面,也就是同一水平显示。
<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实战》
- Bootstrap系列 -- 20. 禁用状态
- Bootstrap系列 -- 19. 焦点状态
- Bootstrap系列 -- 18. 表单控件大小
- Bootstrap-Datatable学习笔记整理第1节
- Bootstrap系列 -- 17. 复选框checkbox和单选择按钮radio
- Bootstrap系列 -- 16. 文本域textarea
- bootstrap小技巧
- Bootstrap系列 -- 15. 下拉选择框select
- Bootstrap系列 -- 14. 表单控件输入框input
- Bootstrap系列 -- 13. 内联表单
- Bootstrap系列 -- 12. 水平表单
- Bootstrap系列 -- 11. 基础表单
- piwik学习2(bootstrap.php)
- Bootstrap 分页插件 ajax获取数据显示
- 三石推荐!把 Bootstrap 小清新带回家!
- Bootstrap3多级导航菜单
- 使用bootstrap时遇到的问题及解决办法
- Bootstrap系列 -- 10. 网格布局
- bootstrap