.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>
版权声明：本文为博主原创文章，未经博主允许不得转载。
，学会宽容，要有一颗宽容的爱心！
