<!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. 微信小程序媒体音乐API更新小记，以及音乐外链制作方法

    假期开发微信小程序玩的时候发现音乐播放功能,但是教程中的旧版API已经不能成成功打开 官方文档写的很清楚,旧版接口不再维护,使用新版接口,换API后,又出现了新的问题,虽然没有报错信息,但是播放器闪退 ...

  2. C语言：利用指针解决：统计一个长度为2的字符串在另外一个字符串中出现的次数。

    //统计一个长度为2的字符串在另外一个字符串中出现的次数. #include <conio.h> #include <stdio.h> #include <string. ...

  3. mybatis Plus 多表联合查询

    //实体类package com.sk.skkill.entity; import com.baomidou.mybatisplus.annotation.TableField;import com. ...

  4. string和stringBuffer，stringBuilder的区别

    1,String类的内容一旦声明后是不可改变的,改变的只是其内存的指向,而StringBuffer类的对象内容是可以改变的. 2,对于StringBuffer,不能像String那样直接通过赋值的方式 ...

  5. leetcode 0214

    目录 ✅ 965. 单值二叉树 描述 解答 c++ updated dfs c++ py py 生成器 ✅ 762. 二进制表示中质数个计算置位 描述 解答 cpp other cpp mine ja ...

  6. 学习笔记（7）- 基于LSTM的对话模型

    LSTM based Conversation Models 本文介绍一种会话语言模型,结合了局部.全局的上下文,以及参与者的角色. 问题提出者 倾向于用"任何人"."如 ...

  7. 牛客跨年AK场-小sum的假期安排

    链接:https://ac.nowcoder.com/acm/contest/3800/G来源:牛客网 题目描述 小 sun 非常喜欢放假,尤其是那种连在一起的长假,在放假的时候小 sun 会感到快乐 ...

  8. Update(Stage4)：spark_rdd算子：第2节 RDD_action算子_分区_缓存：算子和分区

    一.reduce和reduceByKey: 二.:RDD 的算子总结 RDD 的算子大部分都会生成一些专用的 RDD map, flatMap, filter 等算子会生成 MapPartitions ...

  9. pandas中数据框DataFrame获取每一列最大值或最小值

    1.python中数据框求每列的最大值和最小值 df.min() df.max()

  10. 关于Java大整数是否是素数

    题目描述 请编写程序,从键盘输入两个整数m,n,找出等于或大于m的前n个素数. 输入格式: 第一个整数为m,第二个整数为n:中间使用空格隔开.例如: 103 3 输出格式: 从小到大输出找到的等于或大 ...