響應式開發原理
使用**查詢針對不同寬度的裝置進行布局和樣式的設定，從而適配不同裝置的目的
裝置劃分
尺寸區間
設定寬度
列字首超小螢幕（手機）
<768px
100%
.col-xs-
小屏裝置（平板）
>=768px ~ < 992px
750px
.col-sm-
中等螢幕（桌面）
>=992px ~ < 1200px
970px
.col-md-
寬屏裝置（大桌面）
>=1200px
1170px
.col-lg-3
響應式需要乙個父級作為布局容器，來配合自己元素來實現變化效果，原理就是在不同的螢幕下，通過**查詢來改變這個布局容器的大小，再改變裡面子元素的排布方式和大小，從而實現在不同頁面看到不同的頁面布局和樣式變化
@media screen and (max-width:767px)
}
@media screen and (min-width:768px)
}
柵格系統
在每一列都有左右15px的padding值，原理是給了33.3%寬度距離進行了左浮動，如果直接給這個＋margin邊框就會存在溢位掉下來，我們就要在列中再增加乙個盒子然後設定它的padding
列巢狀問題
列偏移問題
列排序問題
列隱藏顯示問題
bootstrap響應式布局
1.bootstrap布局容器 bootstrap 需要為頁面內容和柵格系統包裹乙個 container 或者.container fluid 容器，它提供了兩個作此用處的類。container container fluid 2.bootstrap柵格系統 bootstrap提供了一套響應式 移動...
響應式布局與Bootstrap
bootstrap的介紹 什麼是響應式布局 讓乙個 相容不同解析度的裝置 給使用者更好的視覺使用體驗。響應式布局的優缺點優點 解決了裝置之間的差異化展示 讓不同的裝置達到最優的體驗 缺點 對開發者來說，相容性 多，工作量大，對瀏覽器來說，載入速度受影響 響應式布局設計原則移動優先 在設計的初期就要考...
bootstrap的響應式布局
可參考 進行使用 通過檢測裝置資訊，決定網頁布局方式，即使用者如果採用不同的裝置訪問同乙個網頁，有可能會看到不一樣的內容，一般情況下是檢測裝置螢幕的寬度來實現。螢幕變小了之後，屬於同一行的元素受到擠壓後，行的右邊元素自動換行顯式 螢幕大了後，本屬於同一行的元素盡可能的排在同一行內 乙個簡單的案例 d...