<!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. 【C语言】输入圆的半径，求解圆的周长和面积

    公式: C=2πr S=πr² 代码: #include<stdio.h> int main() { float r,PI; PI = 3.14159; printf("请输入圆 ...

  2. 【Python pymysql】

    " 目录 关于sql注入 用户存在,绕过密码 用户不存在,绕过用户与密码 解决sql注入问题 commit() 增 改 删 查询数据库 fetchone() fetchall() fetch ...

  3. mui 获取本地APP本版号的两种方式

    第一种 mui.plusReady(function () { mui.getJSON("manifest.json", null, function (data) { vum = ...

  4. oracle查询表统计行数与注释

    SELECT TABLE_NAME,NUM_ROWS,(select COMMENTS from user_tab_comments WHERE TABLE_NAME=C.TABLE_NAME) FR ...

  5. 「SDOI2009」虔诚的墓主人

    传送门 Luogu 解题思路 离散化没什么好说 有一种暴力的想法就是枚举每一个坟墓,用一些数据结构维护一下这个店向左,向右,向上,向下的常青树的个数,然后用组合数统计方案. 但是网格图边长就有 \(1 ...

  6. Centos7 安装virtualenv bash: virtualenv: command not found...的解决

    安装好了python3的环境前提下 1.使用pip3安装virtualenv pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple virt ...

  7. win 10 家庭中文版安装docker ，但是没有 Hyper-V ， 这样一步搞定

    本人要在 win 10 上安装docker,找了安装教程,按照安装教程,第一步开启Hyper-V 虚拟机,但是发现自己电脑上没有这个选项 然后找到了这位仁兄  http://www.win7999.c ...

  8. left join 、right join 和inner join之间的区别

    SQL的left join .right join 和inner join之间的区别 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录  right join(右联接) ...

  9. N3K license安装

    1.获取设备SN和PAK SN获取: Switch#show license host-id 注意:IOS设备中为:show license udi PAK获取: PAK是单独购买license后,c ...

  10. ES 创建mapping

    mapping的写入与查看首先创建一个索引: curl -XPUT "http://erp2.es.kd1.pagoda.com.cn:80/erp_stock_index"{&q ...