验证状态

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. HDOJ1874最短路【spfa】

    //不知道切过这道题目几次了,这次又wa了...双向路啊....这波简直无奈了,今晚又是浪成狗!!!! #include<cstdio> #include<vector> #i ...

  2. VR头盔产品镜片评测

    2015-07-21 16:59 原创 Randy Orton http://www.leiphone.com/news/201507/7j46BjWsSitKML13.html 虚拟现实设备自从去年 ...

  3. [Xcode 实际操作]一、博主领进门-(4)设置项目的属性

    目录:[Swift]Xcode实际操作 本文将演示如何设置项目的属性. 点击项目名称[DemoApp],打开项目信息面板. [Identity识别]设置区域 [Display Name]:DemoAp ...

  4. IDEA安装actiBPM插件，亲测成功！避免直接在线安装或下载jar包硬盘都会报错问题！

    在安装actiBPM之前先对IEDA进行如下设置: 开始安装网上的教程直接IDEA安装actiBPM,能安装成功,但无法打开新建bpmn文件.多次重新安装重启还是不行,苦苦弄了几个小时,最后才找到下面 ...

  5. bzoj1101:[POI2007]ZAP-Queries

    [POI2007]ZAP-Queries 题意简述:对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd(x,y)=d. Solution 很显然这是一个莫比 ...

  6. 基于http的软件仓库

    这是企业中常用的方法 比如一台服务器准备好了,公司必然要安装一些应用 这时可以用这种方法批量安装应用 运行一条命令,服务器就会自己去连接软件仓库,去下载来安装. [root@webmaster htm ...

  7. python使用C扩展

    CPython还为开发者实现了一个有趣的特性,使用Python可以轻松调用C代码 开发者有三种方法可以在自己的Python代码中来调用C编写的函数-ctypes,SWIG,Python/C API.每 ...

  8. php 分析2

    a:link,a:visited,a:hover,a:active   1:解释 link:连接平常的状态 visited:连接被访问过之后 hover:鼠标放到连接上的时候 active:连接被按下 ...

  9. C8051系列

    C8051F500处理器按AEC-Q100测试标准设计具有寛工作电压(1.8~5.5V).寛工作温度范围(-40~125).抗干扰能力强并内置CAN2.0B及LIN2.1总线控制器,非常适合汽车电子及 ...

  10. h5旋转效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...