BootStray表单控件基本控件的使用提示，图标的交互

最新推荐文章于 2019-11-05 20:02:27 发布

花果山总钻风

最新推荐文章于 2019-11-05 20:02:27 发布

阅读量768

点赞数

分类专栏： BootStrap

本文链接：https://blog.csdn.net/dszgf5717/article/details/47191809

版权

BootStrap 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

摘自《极客学院》

1、效果图：

2、html代码：

代码1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.min.css">
    <title>BootStrap表单3</title>
</head>
<body>
    <form role="form">
        <!--disabled 禁止输入-->
        <!--<fieldset disabled>-->
        <fieldset>
            <input type="text" class="form-control">
            <textarea rows="5" class="form-control">Hello</textarea>

            <div class="checkbox col-xs-12">
                <label class="col-xs-1">
                    <input type="checkbox">吃橘子
                </label>
                <label class="col-xs-2">
                    <input type="checkbox">吃苹果
                </label>
            </div>

            <div class="radio">
                <label>
                    <input type="radio" name="lalala" checked>男
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="lalala" checked>女
                </label>
            </div>
            <!--显示全部选项-->
            <!--<select multiple class="form-control">-->
            <select class="form-control">
                <option>1</option>
                <option>1</option>
                <option>1</option>
            </select>

            <p  class="form-control-static">请按照我的格式输入：dszgf5717@163.com</p>
        </fieldset>
    </form>
</body>
</html>

代码2：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--<link rel="stylesheet" href="bootstrap.min.css">-->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <title>BootStrap 表单4</title>
</head>
<body>
    <form role="form">
        <fieldset>
            <div class="form-group has-warning has-feedback">
                <label>用户ing</label>
                <input type="text" class="form-control">
                <!--组件图标的显示，必须使用新的link，低版本可能效果不一致-->
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="form-group has-success">
                <label>用户ing</label>
                <input type="text" class="form-control">
            </div>
            <div class="form-group has-error">
                <label>用户ing</label>
                <input type="text" class="form-control">
            </div>
        </fieldset>
    </form>
</body>
</html>