验证状态

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. Unity3D脚本：更改脚本和类名，且不破坏现有脚本引用的方法

    Unity开发过程中,难免遇到需要修改类名(以及对应脚本名)的时候,但如果草率地在MonoDevelop里把类名直接改掉,会破坏现有场景以 及Project Assets中所有引用该脚本的链接,届时还 ...

  2. string.Format 处理 double 的问题

    出处: http://www.cnblogs.com/albert-struggle/archive/2012/05/22/2512744.html 1.格式化货币(跟系统的环境有关,中文系统默认格式 ...

  3. [Xcode 实际操作]一、博主领进门-(15)读取当前应用的信息

    目录:[Swift]Xcode实际操作 本文将演示读取当前应用的配置信息. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class V ...

  4. IT兄弟连 JavaWeb教程 JSP语法

    在JSP页面中,脚本标识使用的最为频繁,因为他们能够方便.灵活地生成页面中的动态内容,特别是JSP程序代码块.JSP中的脚本标识包括3部分,即JSP声明区.JSP表达式和JSP程序代码块.通过这些标识 ...

  5. 【js】我们需要无限滚动列表吗？

    无限滚动列表,顾名思义,是能够无限滚动的列表(愿意是指那些能够不断缓冲加载新数据的列表的).但是,我们真的需要这样一个列表吗?在PC端,浏览器的性能其实已经能够满足海量dom节点的渲染刷新(笔者经过简 ...

  6. 2017 Multi-University Training Contest - Team 1 Balala Power!

    Talented Mr.Tang has n strings consisting of only lower case characters. He wants to charge them wit ...

  7. C#的特性学习

    转自:https://www.cnblogs.com/rohelm/archive/2012/04/19/2456088.html   特性提供功能强大的方法,用以将元数据或声明信息与代码(程序集.类 ...

  8. 遍历list集合的三种方式

    List<String> list1 = new ArrayList<String>(); list1.add("1"); list1.add(" ...

  9. vue从入门到开发--3-基础语法

    一:v-text指令 指令v-text:可通过该指令绑定动态数据(动态数据我觉得可以是从服务器请求下来的数据,保存在data里边,然后动态显示在文档中,因为是一个一个的组件,数据应该不会很多吧,就只有 ...

  10. 浅谈C++ 内存泄漏及其检测工具

    浅谈C++ 内存泄漏及其检测工具 http://wenku.baidu.com/link?url=1DGkOOvd_ITZyB8IHAwfhCOx2tfO6id8UfuyQkAMHZU6sasaAXz ...