Bootstrap global CSS style form_html/css_WEB-ITnose-HTML Tutorial-php.cn

Bootstrap global CSS style form_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:40:20

Original

1159 people have browsed it

.form-control?? Give individual form controls some global styles, such as default width width: 100%;

.form-group?? Wrap the form control to get the best Arrange;

.form-inline??Set the form as an inline form, only applicable when the viewport is at least 768px wide;

.sr-only??Set label Label hiding;

.help-block?? is used to set prompt text;

.form-horizontal?? can lay out label labels and control groups horizontally;

.radio-inline, .checkbox-inline?? Arrange the corresponding controls horizontally;

.form-control-static?? Set the p element as a static control;

.has-error, .has-warning, has-success?? correspond to the verification status respectively;

.has-feedback?? Add an auxiliary icon to the control (used in conjunction with the icon reference class);

.input -lg?? Create larger form controls;

.input-sm?? Create smaller form controls;

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

Copy after login

Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.