Bootstrap全局CSS样式之表单
.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">username</label> <input type="text" class="form-control" placeholder="username/邮箱/手机号"/> </div> <div class="form-group"> <label class="sr-only">password</label> <input type="password" class="form-control" placeholder="输入6-14位英文和数字组合password"/> </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">username</label> <div class="col-sm-8"> <input type="text" class="form-control" placeholder="username/邮箱/手机号"/> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label">password</label> <div class="col-sm-8"> <input type="password" class="form-control" placeholder="输入6-14位英文和数字组合password"/> </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"/>记住password </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>password</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>username</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>username</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>username</label> <input class="form-control" type="text" /> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> </form> </div> </body> </html>