Bootstrap中表单控件状态(验证状态)

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

1、.has-warning:警告状态（黄色）

2、.has-error：错误状态（红色）

3、.has-success：成功状态（绿色）

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

<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”在一起：

<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="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>

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

从效果图中可以看出，图标都居右。在Bootstrap的小图标都是使用@font-face来制作（后面的内容中将会着重用一节内容来介绍）。而且必须在表单中添加了一个span元素：

<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>

以上所述是小编给大家介绍的Bootstrap中表单控件状态(验证状态) ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • BootStrap 表单控件之单选按钮水平排列

    BootStrap 表单控件之单选按钮水平排列

    1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表单控件--单选按钮水平排列</title> <!-- 最新版本的 Bootstrap 核心

  • BootStrap表单控件之复选框checkbox和单选择按钮radio

    BootStrap表单控件之复选框checkbox和单选择按钮radio

    1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表单控件--复选框checkbox和单选择按钮radio</title> <!-- 最新版本

  • Bootstrap所支持的表单控件实例详解

    Bootstrap所支持的表单控件实例详解

    Bootstrap所支持的表单控件如下所示: Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 input.用户可以在其中输入大多数必要的表单数据.Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text.password.datetime.datetime-local.date.month.time.week.number.e

  • 全面解析Bootstrap表单使用方法（表单控件状态）

    全面解析Bootstrap表单使用方法（表单控件状态）

    一.焦点状态 焦点状态是通过伪类":focus"来实现.Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果. <form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-6"> <input class="

  • 全面解析Bootstrap表单使用方法（表单控件）

    全面解析Bootstrap表单使用方法（表单控件）

    一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type="?"] (其中?号代表type类型,比如说text类型,对应的是input[type="text"])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名".form-con

  • Bootstrap复选框和单选按钮美化插件(推荐)

    Bootstrap复选框和单选按钮美化插件(推荐)

    官网地址 需要引入awesome-bootstrap-checkbox.css.font-awesome.css以及font awesome对应的字体font文件,可在上面的网站上下载. checkboxs的样式 radio的样式 radio样式 只要引入上面所说的文件之后,也可以自己定制样式,代码如下: .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 20

  • Bootstrap中表单控件状态(验证状态)

    Bootstrap中表单控件状态(验证状态)

    在制作表单时,难免要做表单验证.同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果. 1..has-warning:警告状态(黄色) 2..has-error:错误状态(红色) 3..has-success:成功状态(绿色) 使用的时候只需要在form-group容器上对应添加状态类名. <form role="form"> <div class="form-group has-success"> <label c

  • Laravel中表单size验证数字示例详解

    Laravel中表单size验证数字示例详解

    前言 要验证一个数字的确定值,看了表单验证文档 size:value验证的字段必须具有与给定值匹配的大小.对于字符串来说,value 对应于字符数.对于数字来说,value 对应于给定的整数值.对于数组来说, size 对应的是数组的 count 值.对文件来说,size 对应的是文件大小(单位 kb ). 写的验证规则是这样的 $data = ['age' => 9]; $validator = \Illuminate\Support\Facades\Validator::make($data

  • 整理关于Bootstrap表单的慕课笔记

    整理关于Bootstrap表单的慕课笔记

    整理自慕课笔记 基础表单 表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. 对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制.主要将这些元素的margin.padding和border等进行了细化设置. 当

  • 第一次接触神奇的Bootstrap表单

    第一次接触神奇的Bootstrap表单

    本篇将主要介绍Bootstrap表单的使用技巧.  1.Bootstrap基础表单 表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 我们先来看一个基础表单: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础表单</title> <link rel=&quo

  • 全面解析Bootstrap表单样式的使用

    全面解析Bootstrap表单样式的使用

    本文主要给大家介绍了bootstrap表单样式的使用知识,非常不错,一起看看吧! 表单 <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">邮箱:</label> <input type="email" class="form-control" id=&q

  • Bootstrap 表单验证formValidation 实现表单动态验证功能

    Bootstrap 表单验证formValidation 实现表单动态验证功能

    动态添加input并动态添加新验证方式! init状态: 点击"+"后: 验证后: 知识点: 1 先去官网下载:http://formvalidation.io/ 2 导入文件,注意事项我就不多说了在远程验证那篇我已经讲过. 3 用到的关键字:addField.removeField.different 4注意一点就是官网里的例子他们的name是不一样的.我这里比较偷懒.且项目ajax的时候不是用的form表单提交,而是自己并接成json提交,所以x,y的name的名字一样. 好开始:

  • Bootstrap 表单验证formValidation 实现远程验证功能

    Bootstrap 表单验证formValidation 实现远程验证功能

    最近项目用到了一个很强大的表单验证.记录下.官方地址:http://formvalidation.io/api/ 还有一点很重要:这个插件的Bootstrap最好用他们自带的,有点改动.不用再去Bootstrap官网下载. 向上效果: 先导入资源: <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css" rel="external nofollow" /> &l

  • BootStrap表单验证实例代码

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 下面给大家分享bootstrap表单验证实例代码,具体代码如下所示: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@

  • bootstrap 表单验证使用方法

    bootstrap 表单验证使用方法

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来看看它如何使用吧. 一.源码及API地址 介绍它之前,还是给出它的源码以及API的地址吧. bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api:http://bv.do

随机推荐