验证状态

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. 51nod 1068【简单博弈】

    思路 手动打表, N 1 : A出1 A胜: 2 : A出2 A胜: 3 : A只能出2的整数幂&&这个数<=3,所以只能出1,2:A出1的时候,B就是2的情况,B胜:A出2的时 ...

  2. 解决 unity 生成 android apk read Resources

    http://www.cnblogs.com/solq/archive/2012/05/21/2511522.html TextAsset t = (TextAsset)Resources.Load( ...

  3. bzoj 2597: [Wc2007]剪刀石头布【最小费用最大流】

    脑子不太清楚一个zz问题调了好久-- 首先正难则反,因为三元环好像没什么特点,就考虑让非三元环个数最小 考虑非三元环特点,就是环上一定有一个点的入度为2,联系整张图,三元环个数就是每个点C(入度,2) ...

  4. [Xcode 实际操作]一、博主领进门-(3)使用资源文件夹(Assets.xcassets)导入并管理图片素材

    目录:[Swift]Xcode实际操作 本文将演示如何使用资源文件夹(Assets.xcassets)导入并管理图片素材. [Assets.xcassets]资源文件夹可以方便的进行图片的管理, 在读 ...

  5. IT兄弟连 JavaWeb教程 JSP定义

    JSP页面是指扩展名为.jsp的文件,在一个JSP页面中,可以包括指令标识.HTML代码.JavaScript代码.嵌入的Java代码.注释和JSP动作标识等内容.但这些内容并不是一个JSP页面所必须 ...

  6. 【OpenJ_Bailian - 4137】最小新整数 （贪心）

    最小新整数 Descriptions: 给定一个十进制正整数n(0 < n < 1000000000),每个数位上数字均不为0.n的位数为m.现在从m位中删除k位(0<k < ...

  7. C【C#公共帮助类】分页逻辑处理类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Comm ...

  8. Ubuntu设置右键打开终端

    1:设置Ubuntu右键打开终端. Ctrl+Alt+T 打开终端 $ sudo apt-get ins tall nautilus-open-terminal 重启系统 2:进入root用户认证失败 ...

  9. centos7版本对比之前版本的部分命令差异

    centos7版本下的命令和之前的centos版本的命令有些许不同,最近在电脑上用VBox安装了一个centos7版本.在做一些网卡配置和安装mysql的时候遇到了一些问题.在这里总结跟大家分享下. ...

  10. Codeforces Round #250 (Div. 1)

    这几次CF都挺惨.. A 没条边权设为两端点的最小点权,最后加起来. 数组开小,WA一次 #include <iostream> #include<cstdio> #inclu ...