Bootstrap表单提示信息

时间:2019-01-21
本文章向大家介绍Bootstrap表单提示信息，主要包括Bootstrap表单提示信息使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

一 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提示信息</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<h3>示例1</h3>
<form role="form">
    <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态">
        <span class="help-block">你输入的信息是正确的</span>
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
        <label class="control-label" for="inputWarning1">警告状态</label>
        <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
        <span class="help-block">请输入正确信息</span>
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
    <div class="form-group has-error has-feedback">
        <label class="control-label" for="inputError1">错误状态</label>
        <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
        <span class="help-block">请输入的信息是错误的</span>
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
</form>



<h3>示例2</h3>
<form role="form">
    <div class="form-group">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <div class="row">
            <div class="col-xs-6">
                <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态">
            </div>
            <span class="col-xs-6 help-block">你输入的信息是正确的</span>
        </div>
    </div>
</form>
</body>
</html>

二 效果

随机文章
WEB前端知识点必读
最近更新