验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

实例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：验证状态</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group has-success">
<label for="success" class="control-label col-sm-2">输入成功：</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="success" />
</div>
</div>
<br />
<div class="form-group has-warning">
<label for="warning" class="control-label col-sm-2">输入警告：</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="warning" />
</div>
</div>
<br />
<div class="form-group has-danger">
<label for="danger" class="control-label col-sm-2">输入危险：</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="danger" />
</div>
</div>
<br />
<div class="form-group has-error">
<label for="error" class="control-label col-sm-2">输入危险：</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="error" />
</div>
</div>
</form>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap历练实例：验证状态的更多相关文章

  1. Bootstrap历练实例：激活导航状态

    激活导航状态 您可以在激活状态的胶囊式导航和列表导航中放置徽章.通过使用 <span class="badge"> 来激活链接,如下面的实例所示: <!DOCTY ...

  2. Bootstrap历练实例：分页状态

    分页的状态 下面的实例演示了上表中所讨论的 class .disabled..active 的用法: <!DOCTYPE html><html><head>< ...

  3. Bootstrap历练实例：按钮(Button)插件单个切换

    单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...

  4. Bootstrap历练实例：语境色彩的面板

    带语境色彩的面板 使用语境状态类 panel-primary.panel-success.panel-info.panel-warning.panel-danger,来设置带语境色彩的面板,实例如下: ...

  5. bootstrap历练实例： 导航元素中禁用的链接

    对每个 .nav class,如果添加了 .disabled class,则会创建一个灰色的链接,同时禁用了该链接的 :hover 状态, <!DOCTYPE html><html& ...

  6. bootstrap历练实例：标签式的导航菜单

    本章将讲解bootstrap提供的用于定义导航元素的一些选项,它使用相同的标签和基类.nav.Bootsrtap也提供了一个用于共享标记和状态的帮助器类.改变修饰的class,可以在不同的样式间进行切 ...

  7. Bootstrap历练实例：轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Bootstrap历练实例：响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

随机推荐

  1. c# IOCP.ClientEx2.ReadWrite 加断点遭遇System.AccessViolationException 问题

    起因: 如果在Debug模式下,在IOCP.ClientEx2.ReadWrite.cs while (0 > (nPackSize = _ipcp.Pack(arg_n64PackId, ar ...

  2. SpringBoot | Data Access

    https://docs.spring.io/spring-boot/docs/current/reference/html/howto-data-access.html 配置数据源启动器.

  3. [软件工程基础]PhyLab 技术规格说明书

    由于暂不对后端有所改变,因此该部分技术规格说明书复用 Default 的技术规格说明书. 由于现阶段对于 Laravel 框架不熟悉,以及对于是否使用已有的轮子或者造轮子实现预想的功能还不清晰,因此暂 ...

  4. Shortest Path Codeforces - 59E || 洛谷P1811 最短路_NOI导刊2011提高（01）

    https://codeforces.com/contest/59/problem/E 原来以为不会..看了题解发现貌似自己其实是会的? 就是拆点最短路..拆成n^2个点,每个点用(i,j)表示,表示 ...

  5. 洛谷 P1042 乒乓球

    P1042 乒乓球 var s:string; a1:array[1..50000] of char; i,n,x,y:longint; procedure f1; begin while not e ...

  6. 怎么样去优化我们的SQL语句

    1.改写in 在SQL语言中,一个查询块可以作为另一个查询块中谓词的一个操作数.因此,SQL查询可以层层嵌套.例如在一个大型分布式数据库系统中,有订单表Order.订单信息表OrderDetail,如 ...

  7. Java方式配置Spring

    概述 本文主要讲的是如何使用Java Bean来配置Spring,而不是用xml来配置Spring. 本文主要是代码,需要注意的都在注释里面. 代码打包下载地址(注:项目使用Maven构建) Java ...

  8. ES6语言特性，如何在低版本浏览器运行它

    Introduction ECMAScript 6 于今年6月正式成为了标准,关于ES6,我们最大的疑虑可能是客户端浏览器还没有完全支持它,也就node.js用用. 有很多种手段可以解决这个问题,比如 ...

  9. PL/SQL 多表关联UPDATE

    假设有两个表A和B,A表字段a,b,c,d,B表字段b,e,f,两表的关联条件是字段b,现在想做个data patch,欲将B表中的字段e的值patch给A表的字段c. 有如下两种方法: 1 upda ...

  10. iOS NSDate 常用日期相关函数的封装

    Category是类别,一般情况用分类好,用Category去重写类的方法,仅对本Category有效,不会影响到其他类与原有类的关系. NSDate+Category.h 代码: #import & ...