Bootstrap表单组件教程详解(4)

Bootstrap表单组件教程详解

表单提示信息

一般在制作表单验证时,需要提供不同的提示信息,在bootstrap框架中使用.help-block,将提示信息以块状显示,并且显示在控件底部

下面是css源码:

.help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; }

例子:

<form> <div> <label>成功状态</label> <input type="text" placeholder="成功状态"> <span>输入的信息正确</span> <span></span> </div> <div> <label>错误状态</label> <input type="text" placeholder="错误状态"> <span>输入的信息有误</span> <span></span> </div> <div> <label>警告状态</label> <input type="text" placeholder="警告状态"> <span>请输入正确的信息</span> <span></span> </div> </form>

效果如下:

Bootstrap表单组件教程详解


如果不想为bootstrap.css增加自己的代码,而且设计又有这种需要,可以借助bootstrap的网格系统,例如:

<form role="form"> <div> <label for="inputSuccess1">成功状态</label> <div> <div> <input type="text" placeholder="成功状态" > </div> <span>你输入的信息是正确的</span> </div> </div> </form>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgyyzx.html