##嵌套列
列嵌套：就是在某个栏中，再嵌套一个完整的栅格系统。
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>
##列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
.col-md-push-n 向右移n列！
.col-md-pull-n 向左移n列！
注意！！！这个是绝对定位，也就是其他列不动！这个列会和其他列重叠！
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
##看一个完整的实例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <!--判断IE9 用来支持HTML5 html5shiv.min.js-没有那个元素，就创建那个元素 respond.min.js支持响应式布局的 --> <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <script src="js/respond.min.js"></script> <![endif]--> <title>BootStrap基础入门</title> </head> <body style="background-color: #CCCCCC;"> <div class="container" style="background-color: #FFFFFF;"> <div class="row"> <div class="col-md-4" style="border: 1px solid #D9534F;"> xxx </div> <div class="col-md-4" style="border: 1px solid #D9534F;"> xxx。 </div> <div class="col-md-4" style="border: 1px solid #D9534F;"> xxx。 </div> </div> <div class="row"> <div class="col-md-8" style="border: 1px solid #D9534F;"> xxx </div> <div class="col-md-4" style="border: 1px solid #D9534F;"> xxx。 </div> </div> <div class="row"> <div class="col-md-9" style="border: 1px solid #D9534F;"> xxx。 </div> <div class="col-md-6" style="border: 1px solid #D9534F;"> xxx </div> </div> <!-- -- 作者：chenhaoxiang@chaojijuhui.com 时间：2017-01-18 描述：列向右偏移 --> <div class="row"> <div class="col-md-4" style="border: 1px solid #D9534F;"> xxx </div> <div class="col-md-offset-4 col-md-4" style="border: 1px solid #D9534F;"> xxx </div> </div> <!-- 作者：chenhaoxiang@chaojijuhui.com 时间：2017-01-18 描述：列嵌套 --> <div class="row"> <div class="col-md-4" style="border: 1px solid #D9534F;"> xxx </div> <div class="col-md-8" style="border: 1px solid #D9534F;"> xxx。 <!-- 作者：chenhaoxiang@chaojijuhui.com 时间：2017-01-18 描述：嵌套栅格系统 --> <div class="row"> <div class="col-md-6" style="background-color: #204D74;height: 150px;"></div> <div class="col-md-6" style="background-color: #31B0D5;height: 100px;"></div> </div> </div> </div> <!-- 作者：chenhaoxiang@chaojijuhui.com 时间：2017-01-18 描述：列排序 --> <div class="row"> <div class="col-md-6 col-md-push-5" style="background-color: #204D74;height: 150px;"></div> <div class="col-md-6" style="background-color: #31B0D5;height: 100px;"></div> </div> </div> <script type="text/javascript" src="js/jquery.slim.min.js"></script> <script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </body> </html>
整个效果都在：
#表单样式
##说明
.form-group表单组样式：将<label>和表单元素包含其中，可以获得更好的排列。
.form-control表单元素样式：常用于<input>、<textarea>、<select>元素。
.form-inline内联表单样式(用于form元素)：可以使元素一行排列。
.checkbox复选框样式
.radio单选框样式
.disabled可以禁用单选框或复选项的文本。 disabled=“disabled”
.form-horizontal水平排列的表单(用于form元素，类似row)。
.sr-only：可以用于隐藏元素。
.checkbox-inline 控制多个复选框元素在同一行显示。
.radio-inline控制多个单选框元素在同一行显示。
##添加额外的图标
你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。
反馈图标只处理带 <input class="form-control"> 这个class的input
图标、label 和输入控件组
对于不带有 label 标签的输入框以及右侧带有附加组件的输入框组，需要手动为其图标定位。为了让所有用户都能访问你的网站，我们强烈建议为所有输入框添加 label 标签。如果你不希望将 label 标签展示出来，可以通过添加 sr-only 类来实现。如果的确不能添加 label 标签，请调整图标的 top 值。对于输入框组，请根据你的实际情况调整 right 值。
<div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess2">Input with success</label> <input type="text" class="form-control" id="inputSuccess2"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning2">Input with warning</label> <input type="text" class="form-control" id="inputWarning2"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError2">Input with error</label> <input type="text" class="form-control" id="inputError2"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div>
