Bootstrap 源码解析
前言
Bootstrap 是个CSS库，简单，高效。很多都可以忘记了再去网站查。但是有一些核心的东西需要弄懂。个人认为弄懂了这些应该就算是会了。源码看一波。
栅格系统
所谓的栅格系统其实就是一种布局方式。融合bootstap的自适应样式就会显的很酷炫。
例子:
<div class="container">
<div class="row">
<div class="col-xs-6">
I am col-xs-6
</div>
<div class="col-xs-6">
I am col-xs-6
</div>
</div>
</div>
.container
.container = margin:0 auto + padding:0 15px + clearfix + media
1.margin 让盒子居中。
2.padding 让盒子与两边有一定的距离,为了美感。注意数字15。
3.clearfix为了防止与BFC有关的一些bug(这个有空再写一篇记录)。
4.media是为了相应式，根据不同的屏幕大小设置宽度。
注：.container-fluid 跟.container 的唯一区别就是没有相应式。
.row
.row = clearfix + margin:0 -15px
1.clearfix 是为了包含浮动的.col-xs-$ 们。
2.负的margin值是为了抵消.container的padding。
疑点：为什么要抵消掉.container的padding. 原因：抵消是为了尽量减少因为空间不足从而引起.contanier无法刚好的放下width加起来为100%的元素的元素。一个.col-xs-&元素最少width也有30px(15+15),也就是说12个.col-xs-1最少也要占360px,如果不用.row 抵消的话就需要390px的盒子来放置。
其实扯远了，这种极端的情况很少会发生，主要还是看你想不想padding15px 之后再布局。
.col-xs-$
.col-xs-$ = float:left + position:relative + padding:15px + width:$$%(media);
1.float:left 一行放多个div等元素的原理，还有就是让.col-xs-offset-$ 这样的类生效,原理为margin-left 。
2.position:relative 让.col-xs-pull-$ 和 .col-xs-push-$ 能够生效。原理为left:***,right:***
3.padding 为了每个元素有间隔，这里不用担心会让元素占据更多空间，原因为box-sizing:border-box;
4.media 让元素能够根据不同的屏幕大小显示不同样式。最小的屏幕用.col-xs-$设置的宽度,再大一点用.col-sm-$的，再大用.col-md ,直到.col-lg.
注：嵌套使用栅格系统的时候，原则上要用.row 包起来。原因在上面又说，上面懂了，这里也就懂了，不懂得在看一看，css不是编程语言很好懂的。
表单
bootstrap 对表单控件做了处理，让表单控件更美观和规范，只需要加.form-control 在表单控件上就可以了
.form-control = display:block + width:100% + goodstyle
1.前面两个是为了让表单自成一行（如论元素是否浮动)。
2.一些margin和vertical-align等熟悉来美化表单，并让管理他们的高度和位置。
简单的应用这个类是不足够满足需求的。下面是一般表单布局的需求和实现方式。
label与控件各种占一行。
<form>
<div class="form-group">
<label class="control-label">介绍</label>
<input class="form-control" type="input">
</div>
</form>
这个是最简单的实例，在bootstrap官网有，没啥好说的。
1 .form-group 在这里就是margin-bottom:15px;
2 .control-label 规定label的高度和行高等使其规范。
许多控件与label在同一行
<form class="form-inline">
<div class="form-group">
<label class="form-label">选择标签:</label>
<button class="btn btn-sm btn-info" v-on:click=" showselect" type="button">选择标签</button>
<samll class="form-control-static">已选择{{select}}个标签</small>
</div>
<div class="form-group">
<label class="form-label">选择关系</label>
<select class="form-control" id="relation">
<option value="OR">至少包含一个</option>
<option value="AND">同时包含</option>
</select>
</div>
</form>
.form-inline 主要的作用就是控制子元素中的.form-control
.from-inline .form-control = display:inline-block + width:auto + vertical-align
样式表一贴出来原理应该就不需要再说什么了。但是这个布局当你觉得每个form-group 太近的时候，改动就容易犯错了，因为你很可能选择bootstrap的栅格布局，那就容易出问题。如：
<form class="form-inline">
<div class="form-group col-xs-4">
<label class="form-label">选择标签:</label>
<button class="btn btn-sm btn-info" v-on:click=" showselect" type="button">选择标签</button>
<samll class="form-control-static">已选择{{select}}个标签</small>
</div>
<div class="form-group col-xs-6">
<label class="form-label">选择关系</label>
<select class="form-control" id="relation">
<option value="OR">至少包含一个</option>
<option value="AND">同时包含</option>
</select>
</div>
</form>
这样的布局乍一看，没有什么问题，但是当缩小屏幕大小的时候就容易出问题。所以我建议不要使用来栅格布局来拉开距离，可以结合.pull-left 和 .
col-xs-offset-$ 来，这样的自适应能力就好很多，如：
<form class="form-inline">
<div class="form-group pull-left">
<label class="form-label">选择标签:</label>
<button class="btn btn-sm btn-info" v-on:click=" showselect" type="button">选择标签</button>
<label class="form-control-static">已选择{{select}}个标签</label>
</div>
<div class="form-group pull-left col-xs-offset-1">
<label class="form-label">选择关系</label>
<select class="form-control" id="relation">
<option value="OR">至少包含一个</option>
<option value="AND">同时包含</option>
</select>
</div>
</form>
label于控件共同占一行
这种布局就是使用栅格布局。
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-3">选择关系</label>
<div class="col-xs-4">
<select class="form-control" id="relation">
<option value="OR">至少包含一个</option>
<option value="AND">同时包含</option>
</select>
</div>
</div>
</form>
form-horizontal > .form-group = clearfix ;
form-horizontal > .control-label = text-align:right;
这里需要注意的就是select等控件需要用盒子包起来。
