在制作表单时,难免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。

在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态(黄色)
金沙城中心赌场 ,2、.has-error:错误状态(红色)
3、.has-success:成功状态(绿色)

使用的时候只需要在form-group容器上对应添加状态类名。

1、.has-warning:警告状态(黄色)

<form role="form">  <div >    <label  for="inputSuccess1">成功状态</label>    <input type="text"  id="inputSuccess1" placeholder="成功状态" >  </div>  <div >    <label  for="inputWarning1">警告状态</label>    <input type="text"  id="inputWarning1" placeholder="警告状态">  </div>  <div >    <label  for="inputError1">错误状态</label>    <input type="text"  id="inputError1" placeholder="错误状态">  </div>  </form>

2、.has-error:错误状态(红色)

运行效果如下或查看右侧结果窗口:

3、.has-success:成功状态(绿色)

 

使用的时候只需要在form-group容器上对应添加状态类名。

金沙城中心赌场 1

<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> 

 

运行效果如下或查看右侧结果窗口:

很多时候,在表单验证的时候,不同的状态会提供不同的icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示icon出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起:

金沙城中心赌场 2

 

很多时候,在表单验证的时候,不同的状态会提供不同的icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示icon出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起:

<form role="form">  <div >    <label  for="inputSuccess1">成功状态</label>    <input type="text"  id="inputSuccess1" placeholder="成功状态" >      </div>  <div >    <label  for="inputWarning1">警告状态</label>    <input type="text"  id="inputWarning1" placeholder="警告状态">      </div>  <div >    <label  for="inputError1">错误状态</label>    <input type="text"  id="inputError1" placeholder="错误状态">      </div>  </form>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图