.form-control——将单独的表单控件赋予一些全局样式，如默认宽度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>