zoukankan      html  css  js  c++  java
  • 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:表单控件状态

    <!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>

  • 相关阅读:
    bootstrapValidator表单验证插件
    sublime自动保存(失去焦点自动保存)
    js、jquery实现放大镜效果
    mysql 添加索引语句
    mybatis sql语句中的foreach标签
    android ListView 刷新卡顿问题
    JFrame 桌面右下角弹窗
    取没有date的邮件发送时间
    java 判断图片是否损坏
    java 后台poi导入导出Excel到数据库
  • 原文地址:https://www.cnblogs.com/tszr/p/10888666.html
Copyright © 2011-2022 走看看