前言
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等控件需要用盒子包起來。