Bootstrap全局CSS样式之表单

最新推荐文章于 2022-11-03 14:32:56 发布

bboyjoe

最新推荐文章于 2022-11-03 14:32:56 发布

阅读量5.1k

点赞数 1

分类专栏： bootstrap 文章标签：前端 htm5 bootstrap 表单

本文链接：https://blog.csdn.net/bboyjoe/article/details/47066721

版权

bootstrap 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

.form-control——将单独的表单控件赋予一些全局样式，如默认宽度width:100%；

.form-group——包裹表单控件，获得最好的排列；

.form-inline——将表单设置为内联表单，只适用于视口（viewport）至少在 768px 宽度时；

.sr-only——将label标签隐藏；

.help-block——用于设置提示文本；

.form-horizontal——可以将label标签和控件组水平并排布局；

.radio-inline、.checkbox-inline——将相应控件水平排列；

.form-control-static——将p元素设置为静态控件；

.has-error、.has-warning、has-success——分别对应校验状态；

.has-feedback——为控件添加辅助图标（与图标引用类联合使用）；

.input-lg——创建大一些的表单控件；

.input-sm——创建小一些的表单控件；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS全局样式_栅格系统</title>
    <!--
    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
    -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style type="text/css">

    </style>
</head>
<body>
<div class="container">
    <form role="form" class="form-inline">
        <div class="form-group">
            <label class="sr-only">用户名</label>
            <input type="text" class="form-control" placeholder="用户名/邮箱/手机号"/>
        </div>
        <div class="form-group">
            <label class="sr-only">密码</label>
            <input type="password" class="form-control" placeholder="输入6-14位英文和数字组合密码"/>
        </div>
        <div class="form-group">
            <label class="sr-only">生日</label>
            <input type="date" class="form-control" placeholder="出生年月"/>
        </div>
        <div class="form-group">
            <label class="sr-only">上传头像</label>
            <input type="file" class="form-control input-lg"/>
            <p class="help-block">选择您需要的头像文件</p>
        </div>
    </form>
    <form role="form" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-4 control-label">用户名</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" placeholder="用户名/邮箱/手机号"/>
            </div>

        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">密码</label>
            <div class="col-sm-8">
                <input type="password" class="form-control" placeholder="输入6-14位英文和数字组合密码"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">生日</label>
            <div class="col-sm-8">
                <input type="date" class="form-control" placeholder="出生年月"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"/>记住密码
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
                <button class="btn btn-default">登录</button>
            </div>
        </div>
    </form>
    <form role="form" class="form-horizontal">
        <div class="form-group">
           <label>喜欢的球队</label>
            <div class="checkbox">
                <label>
                    <input type="checkbox"/>广州恒大
                </label>
                <label>
                    <input type="checkbox"/>上海上港
                </label>
                <label>
                    <input type="checkbox"/>北京国安
                </label>
            </div>
        </div>
        <div class="form-group">
           <label>性别</label>
            <div class="radio">
                <label>
                    <input type="radio" checked name="gender"/>男
                </label>
                <label>
                    <input type="radio" name="gender"/>女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label>所属城市</label>
            <select class="form-control" multiple>
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
            </select>
        </div>
        <div class="form-group">
            <label class="sr-only"></label>
            <textarea class="form-control" rows="5" placeholder="请文明用语"></textarea>
        </div>
        <p class="form-control-static">请按照邮箱格式输入：hello@163.com</p>
        <div class="form-group">
            <label>密码</label>
            <input class="form-control" type="password"  disabled/>
        </div>
        <div class="form-group">
            <label>昵称</label>
            <input class="form-control" type="text" placeholder="胖虎" readonly/>
        </div>
        <div class="form-group has-error has-feedback">
            <label>用户名</label>
            <input class="form-control" type="text" />
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <label>用户名</label>
            <input class="form-control" type="text" />
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
        <div class="form-group has-warning has-feedback">
            <label>用户名</label>
            <input class="form-control" type="text" />
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
    </form>
</div>

</body>
</html>

bboyjoe

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap全局CSS样式之表单

.form-control——将单独的表单控件赋予一些全局样式，如默认宽度width:100%；.form-group——包裹表单控件，获得最好的排列；.form-inline——将表单设置为内联表单，只适用于视口（viewport）至少在 768px 宽度时；.sr-only——将label标签隐藏；.help-block——用语设置提示文本；.form-horizontal
复制链接

扫一扫