<!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. 5 asyncio 梨视频

    # 如何提升requests模块爬取数据的效率?- 多进程或多线程(不建议) 太耗费资源- 线程池或进程池(适当使用) - 单线程 + 异步协程(推荐) # 线程池使用案例 # 梨视频 下载作业 im ...

  2. C语言：将3*4矩阵中找出行最大，列最小的那个元素。-将低于平均值的人数作为函数返回值，将低于平均分的分数放入below数组中。

    //将3*4矩阵中找出行最大,列最小的那个元素. #include <stdio.h> #define M 3 #define N 4 void fun(int (*a)[N]) { ,j ...

  3. HITCON-Training-master 部分 Writeup（1月30更新）

    0x01.lab3 首先checksec一下,发现连NX保护都没开,结合题目提示ret2sc,确定可以使用shellcode得到权限. IDA查看伪代码 大致分析: 将shellcode写入name数 ...

  4. CSS - 块状元素、内联元素和内联块状元素

    在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素(block).内联元素(又叫行内元素,inline)和内联块状元素(inline-block). 1. 常用的块状元素有: < ...

  5. Fluent_Python_Part3函数即对象，07-closure-decoration，闭包与装饰器

    第7章 函数装饰器和闭包 装饰器用于在源码中"标记"函数,动态地增强函数的行为. 了解装饰器前提是理解闭包. 闭包除了在装饰器中有用以外,还是回调式编程和函数式编程风格的基础. 1 ...

  6. 基于MACVLAN配置VMWARE虚拟机中容器网络

    基于MACVLAN配置VMWARE虚拟机中容器网络 测试部环境组 201711 0 文档说明 MACVLAN是docker的一种支持跨主机网络的driver.macvlan本身是linux kerne ...

  7. python应用-pycharm新建模板默认添加shebang编码作者时间等信息

    1.pycharm4.5激活码 用户名: yueting3527 注册码: ===== LICENSE BEGIN ===== 93347-12042010 00001FMHemWIs"6w ...

  8. .NET Core快速入门教程 3、使用VS Code开发.NET Core控制台应用程序

    一.前言 本篇开发环境 1.操作系统: Windows 10 X642.SDK: .NET Core 2.0 Preview3.VS Code:1.14 二.安装&配置 1.VS Code下载 ...

  9. 在tomcat启动时解析xml文件，获取特定标签的属性值，并将属性值设置到静态变量里

    这里以解析hibernate.cfg.xml数据库配置信息为例,运用dom4j的解析方式来解析xml文件. 1.在javaWeb工程里新建一个java类,命名为GetXmlValue.java,为xm ...

  10. BIND DNS配置！

    1.RPM 包的主要作用bind:提供了域名服务器的主要程序及相关文件bind-utils:提供了对 DNS 服务器的测试工具程序,如 nslookup 等bind-libs:提供了 bind.bin ...