验证状态

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

    一题简直模板的 BFS,只是三维遍历而已. #include <stdio.h> #include <iostream> #include <sstream> #i ...

  2. 关于 T[] 的反射问题

    1. T[] 类型不适应以下代码 Dictionary<string, Test> d = new Dictionary<string, Test>(); // Get a T ...

  3. 企业级应用，如何实现服务化二（dubbo架构）

    这是企业级应用,如何实现服务化系列的第二篇.在上一篇:企业级应用,如何实现服务化一(项目架构演化)中,交代了企业级应用架构的演化过程,和服务治理的方案可以选择:dubbo,或者spring cloud ...

  4. [題解]（單調隊列dp）luogu_P1725琪露諾

    比較簡單的單調隊列,但是有一些要注意的 維護單調隊列的時候裡面存的是入隊時間,而不是i,因為前面有l個沒有入隊(不可能走進),所以把i减一个l以达到延迟入队的效果 #include<bits/s ...

  5. IE_Script70:没有权限问题处理

    IE9浏览器执行JS时报"SCRIPT70:没有权限"错误. 经百度,发现原来与jQuery版本有关系,在jQuery1.9.1版本时会有此问题,升级版本即可.

  6. 《javascript设计模式》笔记之第六章：方法的链式调用

    这一章要实现的就是jQuery的那种链式调用,例子: $(this).setStyle('color', 'green').show(); 一:调用链的结构: 首先我们来看一下最简单的$()函数的实现 ...

  7. TAIL and HEAD

    TAIL and HEAD tail tail:将指定的文件的最后部分输出到标准设备,通常是终端,和cat以及more等显示文本的差别在于:假设该档案有更新,tail会自己主动刷新,确保你看到最新的档 ...

  8. 一步步实现自己的ORM（五）

    上一张优化了ORM的INSERT.UPDATE.DELETE,但将数据库里的值填充到实体类这块还没优化.另外有博友在网上咨询说你这个都是查询所有字段的,而他的需求是按需查询字段,不是一次性取出来所有字 ...

  9. jvm内存溢出的三种情况以及解决办法

    1       前言相信有一定java开发经验的人或多或少都会遇到OutOfMemoryError的问题,这个问题曾困扰了我很长时间,随着解决各类问题经验的积累以及对问题根源的探索,终于有了一个比较深 ...

  10. phpmyadmin解决“高级功能尚未完全设置，部分功能未激活”

    首先在点击主页中的导入, 在“从计算机中上传:”选择/usr/share/doc/phpmyadmin/examples的“create_tables.sql.gz”文件 点击执行 但是我的电脑上还是 ...