本文摘自PHP中文网,作者(*-*)浩,侵删。
在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。1、.has-warning:警告状态(黄色)(推荐学习:Bootstrap视频教程)
2、.has-error:错误状态(红色)
3、.has-success:成功状态(绿色)
使用的时候只需要在form-group容器上对应添加状态类名。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <form role= "form" >
<div class = "form-group has-success" >
<label class = "control-label" for = "inputSuccess1" >成功状态</label>
<input type= "text" class = "form-control" id= "inputSuccess1" placeholder= "成功状态" >
</div>
<div class = "form-group has-warning" >
<label class = "control-label" for = "inputWarning1" >警告状态</label>
<input type= "text" class = "form-control" id= "inputWarning1" placeholder= "警告状态" >
</div>
<div class = "form-group has-error" >
<label class = "control-label" for = "inputError1" >错误状态</label>
<input type= "text" class = "form-control" id= "inputError1" placeholder= "错误状态" >
</div>
</form>
|
效果图:
阅读剩余部分
相关阅读 >>
bootstrap 如何修改css样式
bootstrap表单怎么提交信息
bootstrap table使用方法汇总
bootstrap怎么实现响应式布局
bootstrap可以用于移动端吗
bootstrap的构成模块是什么
bootstrap中怎么设置按钮位置
bootstrap和easyui区别
bootstrap如何制作下拉菜单
bootstrap轮播时间在哪里设置
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » bootstrap中验证提示状态的类有什么