bootstrap的布局
bootstrap的布局知識可參考 http://v2.bootcss.com/scaffolding.html#global
bootstrap布局的模型和構(gòu)思
bootstrap使用了柵格化系統(tǒng)來布局帖渠，柵格化系統(tǒng)是網(wǎng)頁以行列來切分酱固，形成一個網(wǎng)格狀的分布甚疟，內(nèi)容在網(wǎng)格中定位痹升；
這樣就可以通過統(tǒng)一控制柵格化系統(tǒng)的寬，來鏡像地縮小或者放大整個頁面鳞骤，達(dá)到自適應(yīng)的初級效果探颈。想象一下一張平展開的漁網(wǎng)，拉伸則每個網(wǎng)格就變大症杏；收縮則每個網(wǎng)格就縮凶盎瘛；
當(dāng)柵格化系統(tǒng)布局的網(wǎng)頁厉颤，在從寬屏顯示過渡到窄屏?xí)r穴豫，每個網(wǎng)格的寬度變小，當(dāng)寬度 < 網(wǎng)格中的內(nèi)容的寬度時逼友，需要內(nèi)容自動縮小寬度精肃，并向縱向延伸，來達(dá)到網(wǎng)格依然能容納下內(nèi)容的目的帜乞，因此千萬不要設(shè)置網(wǎng)格的高度司抱，和內(nèi)容的寬度。
boostrap柵格化網(wǎng)格寬與網(wǎng)格間margin計算
boostarp一行內(nèi)網(wǎng)格之間存在一定的margin間距黎烈，以及可以設(shè)置網(wǎng)格之間的偏移习柠；
寬匀谣、margin間距以及網(wǎng)格偏移的計算
1.固定px柵格
寬度分配公式：12X+11Y=940
某一spanNum下的span寬度計算：spanNum* X+(spanNum-1)* Y
某一offsetNum下的offset值計算：offsetNum* X+(offsetNum+1)* Y
2.百分比柵格
寬度分配公式：12X+11Y=100
某一spanNum下的span寬度計算：spanNum* X+(spanNum-1)* Y
某一offsetNum下的offset值計算：
非首個offset: offsetNum* X+(offsetNum+1)* Y;
首個offset: offsetNum* X+offetNum* Y
bootstrap靜態(tài)px布局
bootstrap的靜態(tài)px布局，就是柵格化系統(tǒng)每個網(wǎng)格的寬度都是以px單位來設(shè)置的;
px單位設(shè)置的寬度资溃，在從寬屏顯示過渡到窄屏?xí)r武翎，自然是無法自適應(yīng)縮小的，bootstrap使用媒體查詢@media來查詢不同的設(shè)備分辨率溶锭，在不同設(shè)備下設(shè)置不同的px寬度來放大或縮小網(wǎng)格宝恶，在不改變整體布局的情況下鏡像放大縮小網(wǎng)頁。
bootstrap百分比布局
bootstrap百分比布局暖途，使用百分比設(shè)置網(wǎng)格的寬度卑惜。百分比自然是可以自適應(yīng)縮小放大網(wǎng)格大小的,同樣在不改變整體布局的情況下鏡像放大縮小網(wǎng)頁。
bootstrap響應(yīng)式布局
當(dāng)鏡頭px布局或百分比布局在鏡像縮小網(wǎng)頁到影響閱讀的情況下驻售，比如文字過小露久，圖文不清晰等；
這個時候就需要改變網(wǎng)頁的布局來適應(yīng)這種情況欺栗，響應(yīng)式布局就為這類開發(fā)需求服務(wù)毫痕；
bootstrap主要提供了兩類響應(yīng)式布局的工具：
1.在屏幕寬度縮小到一定數(shù)值時，把柵格化系統(tǒng)的一行多列迟几，直接轉(zhuǎn)換成一行一列消请，以達(dá)到放大清晰內(nèi)容的目的；
2.在pc,tablet,phone不同設(shè)備上类腮，存在有需要顯示和隱藏的開發(fā)需求臊泰。bootstrap提供了.visible-phone(在手機(jī)上顯示)、.hidden-phone(在手機(jī)上隱藏)蚜枢、.visible-tablet缸逃、.hidden-tablet、.visible-desktop厂抽、.hidden-desktop需频。
