1.響應式開發原理
使用**查詢針對不同寬度的裝置進行布局和樣式設定，從而達到適配不同的裝置的目的。
2.響應式布局容器
響應式需要乙個父級作為布局容器，來配合子級元素來實現變化效果。
原理就是在不同螢幕下，通過**查詢來改變這個布局容器的大小，再改變裡面自級元素的排列方式和大小，從而實現不同螢幕下不同的頁面布局和樣式變化。
bootstrap
bootstrap需要為頁面內容和柵格系統包裹乙個.containerron容器。預先定義好了這個類叫做：.container。
1.container類
響應式布局容器 固定寬度
大屏（>=1200px）寬度定為1170px
中屏 （>=992px） 寬度定為970px
小屏 （>=768） 寬度定為750px
超小屏 (100%)
2.container-fluid類
流式布局容器100%寬度
佔據全部視口（viewport）的容器
適合於單獨做移動開發
bootstrap柵格系統
指將網頁布局分為等寬的列，然後通過列數的定義來模組化頁面布局。
bootstrap提供了一套響應式、移動裝置優先的移動柵格系統，隨著螢幕或視口尺寸的增加，系統會自動分為最多12列。bootstrap裡面container寬度是固定的，但在不同的螢幕之下，container寬度不同，我們在把container劃分為12等分。
柵格選項引數
超小螢幕（手機）<768px
小屏裝置（平板）>=768px
中等螢幕（桌面顯示器）>=992px
寬屏裝置（大桌面顯示器）>=1200px
.container最大寬度
自動100%
750px
970px
1170px
類字首.col-xs-
.col-sm-
.col-md-
.col-lg-
列（column）數
12行（row）必須放到container布局容器裡面
我們實現類的平均劃分，需要給類新增類字首
行（row）可以去除父元素15px邊距
每一列缺省有左右15px 的padding
可以為一列指定多個裝置名，以便劃分不同份數。例如class=「col-md-4 col-sm-6」後面接的數字表示在整個容器中所佔的份數。
柵格系統列巢狀
1.列元素的巢狀最好加乙個行，這樣可以取消父元素的padding值，而且高度自動和父級一樣高。
列偏移
使用.col-md-offset-*類可以將列向右側偏移。實際上這些類就是通過*選擇器為當前元素增加了左側的邊距（margin）
列排序
通過使用.col-md-push-*和.col-md-pull-*類就可以很容易改變列（column）的順序
響應式工具
為了加快對移動裝置友好的頁面開發工作，利用**查詢功能，並使用這些工具類可以方便的針對不同的裝置展示或隱藏頁面內容
類名超小屏
小屏中屏
大屏.hidden-xs
隱藏可見
可見可見
.hidden-sm
可見隱藏
可見可見
.hidden-md
可見可見
隱藏可見
.hidden-lg
可見可見
可見隱藏
反之visible-xs visible-sm visible-md visible-lg是顯示某個頁面內容
bootstrap響應式布局
1.bootstrap布局容器 bootstrap 需要為頁面內容和柵格系統包裹乙個 container 或者.container fluid 容器，它提供了兩個作此用處的類。container container fluid 2.bootstrap柵格系統 bootstrap提供了一套響應式 移動...
前端之響應式布局bootstrap
頁面布局隨著螢幕大小變化而做出不同響應。移動端pc端 ipad端 響應式開發的原理，查詢 布局容器 container container fluid 柵格系統 把頁面內容劃分成為若干等分的列，在bootstrap中分為12列 通過行和列的組合建立頁面 如果孩子相加 12則能夠佔滿一行 如果孩子相加...
響應式布局與Bootstrap
bootstrap的介紹 什麼是響應式布局 讓乙個 相容不同解析度的裝置 給使用者更好的視覺使用體驗。響應式布局的優缺點優點 解決了裝置之間的差異化展示 讓不同的裝置達到最優的體驗 缺點 對開發者來說，相容性 多，工作量大，對瀏覽器來說，載入速度受影響 響應式布局設計原則移動優先 在設計的初期就要考...