在做前端開發中，其實有百分之四十的時間用來布局寫樣式，百分之三十用來寫
js邏輯互動，百分之三十時間用來測試調bug，可以看的到的是，用在布局+樣式的時候會比較多，
所以會有很多的前端框架誕生，例如
bootstrap
前端框架包含有設定好的
html布局結構，css樣式，一些js效果，理論上將，不需要寫一行**，只需複製貼上就可以實現乙個靜態頁面,官方不要臉的介紹：簡潔、直觀、強悍的前端開發框架，讓
web開發更迅速、簡單。
用
bootstrap不僅可以寫pc的頁面，還可以做響應式
響應式：利用**查詢等技術，通過檢測瀏覽器的尺寸不同，來顯示不同的布局結構，原理就是，**查詢可以檢測到螢幕的尺寸是否處於某乙個範圍，如果是的時候可以讓某一段
css**起作用，來實現結構切換
boot 預設的將螢幕劃分成了四種：
0-768 xs ;768-992 sm ; 992-1200 md;1200- lg ;
boot 提供了兩個布局容器，這兩個布局容器是要作為某乙個大的區域的最外層元素的，會和其他的一些布局類名配合使用
.container .container-fluid
container-fluid在任意螢幕下寬度都是百分之一百
container 是在xs屏永遠都是100%；768-992，寬度：768；992-1200，寬度：992；1200- 寬度：1200，永遠居中
boot 提供了柵格系統（12柵格化，網格化，網格系統）會讓我們在布局的時候，想象著將一行的空間分成12份，通過設定每乙個元素佔幾份來控制元素的排列
row類名可以在容器中將某一行分成12份
col-type-num 可以確定某一行中的某乙個元素在type螢幕的情況下佔num份
注意，在使用這些類名的時候有小屏優先這樣的原則
:
在寫**查詢樣式的時候，應該先寫小屏的樣式，再寫大屏的樣式，小屏解析的
css**會較少，效能較高
col-type-offset-num 設定的是某乙個元素在某乙個螢幕尺寸下向右偏移幾份
例如
我們只需要加上
class名即可
想要學習前端開發的同學，可以**：
543627393 學習哦！
Bootstrap框架和響應式布局
1.浮動 百分比布局 2.fiex布局 flex布局對於設計比較複雜的頁面非常有用,實現螢幕和瀏覽器視窗大小發生變化時保持元素的相對位置和大小不變 responsive design，意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使 在手機和平板電腦上有更好的瀏覽閱讀體驗。螢...
bootstrap的響應式布局
可參考 進行使用 通過檢測裝置資訊，決定網頁布局方式，即使用者如果採用不同的裝置訪問同乙個網頁，有可能會看到不一樣的內容，一般情況下是檢測裝置螢幕的寬度來實現。螢幕變小了之後，屬於同一行的元素受到擠壓後，行的右邊元素自動換行顯式 螢幕大了後，本屬於同一行的元素盡可能的排在同一行內 乙個簡單的案例 d...
bootstrap響應式布局
1.bootstrap布局容器 bootstrap 需要為頁面內容和柵格系統包裹乙個 container 或者.container fluid 容器，它提供了兩個作此用處的類。container container fluid 2.bootstrap柵格系統 bootstrap提供了一套響應式 移動...