<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Bootstrap 实例 - 表单控件状态</title>

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <form class="form-horizontal" role="form">

            <div class="form-group">

                <label class="col-sm-2 control-label">聚焦</label>

                <div class="col-sm-10">

                    <input class="form-control" id="focusedInput" type="text"  value="该输入框获得焦点...">

                </div>

            </div>

            <div class="form-group">

                <label for="inputPassword" class="col-sm-2 control-label">

                    禁用

                </label>

                <div class="col-sm-10">

                    <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>

                </div>

            </div>

            <fieldset disabled>

                <div class="form-group">

                    <label for="disabledTextInput"  class="col-sm-2 control-label">禁用输入（Fieldset disabled）

                    </label>

                    <div class="col-sm-10">

                        <input type="text" id="disabledTextInput" class="form-control"  placeholder="禁止输入">

                    </div>

                </div>

                <div class="form-group">

                    <label for="disabledSelect"  class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）

                    </label>

                    <div class="col-sm-10">

                        <select id="disabledSelect" class="form-control">

                            <option>禁止选择</option>

                        </select>

                    </div>

                </div>

            </fieldset>

            <div class="form-group has-success">

                <label class="col-sm-2 control-label" for="inputSuccess">

                    输入成功

                </label>

                <div class="col-sm-10">

                    <input type="text" class="form-control" id="inputSuccess">

                </div>

            </div>

            <div class="form-group has-warning">

                <label class="col-sm-2 control-label" for="inputWarning">

                    输入警告

                </label>

                <div class="col-sm-10">

                    <input type="text" class="form-control" id="inputWarning">

                </div>

            </div>

            <div class="form-group has-error">

                <label class="col-sm-2 control-label" for="inputError">

                    输入错误

                </label>

                <div class="col-sm-10">

                    <input type="text" class="form-control" id="inputError">

                </div>

            </div>

        </form>

    </body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单控件状态的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单帮助文本

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单控件大小

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：水平表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：内联表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：静态控件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：选择框（Select）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：复选框（Checkbox）和单选框（Radio）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：文本框（Textarea）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 2.0.FastDFS单机模式综合版

    Centos610系列配置 1.什么是FastDFS? FastDFS是一个开源的分布式文件系统,她对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负 ...

  2. Codeforces 1313C.Skyscrapers

    题目链接 题意是给你一个数组,问你如何建造,使得每个点都不小于其左右的点,包括不相邻的点 分析题意,容易得知,就是找一个点两侧的不上升序列且带修,那我们就分别从头跑一遍,从尾跑一遍,两者相加就是每个点 ...

  3. Java入门笔记 08-注解

    1. 注解:通过 @interface 关键字进行定义2. 元注解:是一种基本注解,但是它能够应用到其它的注解上面.@Retention:解释说明了这个注解的的存活时间.取值如下: Retention ...

  4. node环境下：node_modules里面的文件

    node环境下:node_modules里面的文件 package.json来制定名单,需要哪些npm包来参与到项目中来,npm install命令根据这个配置文件增减来管理本地的安装包. depen ...

  5. Cisco Spectrum Expert（Wave2 AP）

    在一些版本中,我们可能会发现,AP16,26或AP17,27,37等支持Spectrum Expert Connect (即SE-Connect),该模式可以让AP将频谱分析所述数据发送到对应的分析仪 ...

  6. 动态规划-爬楼梯问题java实现

    最近开始看算法导论,研究了一下动态规划,下面就开始直入主题开始记录近期看的第一个知识点动态规划.提起动态规划就不得不提几个动态规划的金典问题爬楼梯.国王金矿.背包问题.今天就仔细分析一下爬楼梯问题. ...

  7. 中国5G，如何避免重复投资？

    前不久,工信部正式向中国移动.中国联通.中国电信发放5G商用牌照,此举意味着中国提前启动5G商用计划,随之而来的,将会是运营商.设备商大规模的投资.相关数据机构预测,三大运营商2019年预计会投入30 ...

  8. 如何用 pycharm 调试 airflow

    airflow 和 pycharm 相关基础知识请看其他博客 我们在使用 airflow的 dag时. 每次写完不知道对不对的,总不能到页面环境中跑一下,等到报错再调试吧.这是很让人恼火的事情 这里我 ...

  9. String方法阅读笔记

    String类常用方法 1.int Length(): 参数:无 返回值:调用此方法的字符串的长度(int) 实例: public class Test { public static void ma ...

  10. 刷题62. Unique Paths

    一.题目说明 题目62. Unique Paths,在一个m*n矩阵中,求从左上角Start到右下角Finish所有路径.其中每次只能向下.向右移动.难度是Medium! 二.我的解答 这个题目读读题 ...