bootstrap

簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，讓web開發(fā)更迅速、簡單
中文網(wǎng) ： http://www.bootcss.com/
英文網(wǎng)  :  http://getbootstrap.com/

容器

流體布局容器
    容器的width為auto，只是兩邊加了15px的padding。

固定布局
    容器的width會(huì)隨設(shè)備分辨率的不同而生產(chǎn)變化
        分辨率閾值
            w >=1200            容器的width為1170   左右padding為15 （注意是borderBox）
            1200>w >=992        容器的width為970     左右padding為15 （注意是borderBox）
            992 > w >=768       容器的width為750     左右padding為15  （注意是borderBox）
            768 > w >=992       容器的width為auto    左右padding為15  （注意是borderBox）

柵格系統(tǒng)

 col-lg-x    
 col-md-x
 col-sm-x
 col-xs-x
 x默認(rèn)擁有12個(gè)等級(jí)

列偏移

調(diào)整的是margin-left，分13個(gè)等級(jí)（0到12）
        0時(shí)為0%

列排序

push的時(shí)候調(diào)整的是left，分13個(gè)等級(jí)（0到12）
        0時(shí)為auto
        
pull的時(shí)候調(diào)整的是right，分13個(gè)等級(jí)（0到12）
        0時(shí)為auto

響應(yīng)式工具

容器與柵格盒模型設(shè)計(jì)的精妙之處

    container 提供了一個(gè)15px的padding
    row 是 column 直接存在的容器，row 默認(rèn)最多可有12個(gè) column，
同時(shí)作為都是左浮動(dòng)的 column 的 wrapper，自帶 clearfix 的性質(zhì)。
同時(shí) row 還有一個(gè)很特殊的地方，就是左右各有 －15px 的 margin，
為了抵消 container 中15px的 padding
    每個(gè)column 也會(huì)有15px的水平方向的 padding，colunmn 只能在 row 中生存，
由于 row 的 margin 為－15px，那么位于兩邊的 column 就碰到了 container 的邊界。
但是 colunmn 本身又有 15px 的 padding 使得它其中的內(nèi)容并不會(huì)碰到 container，
同時(shí) 不同column的內(nèi)容之間就有了30px的槽

目的是為了確保列與列之間有30px的槽，列與容器之間有15px的槽