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

时间：2019-05-19 12:27:19 阅读：98 评论：0 收藏：0 [点我收藏+]

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

技术分享图片

原文：https://www.cnblogs.com/tszr/p/10888666.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)