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

To be continue...