[Bootstrap]bootstrap的簡單原理

BOOTSRAP是2010年五月份提出的一個CSS庫的前端框架,就目前愈來愈追求前端的運行效率的背景下,引用Bootstrap框架愈來愈臃腫,目前都是借鑑Bootstrap框架由程序員手寫出比較適合當前項目的代碼.

響應式頁面實現的四大核心要素

1.viewport;計算當前設備的可視區域的大小

　　用法:<meta name="viewport" content="width=device-width">

　　width設置當前頁面的寬度 device-width:當前設備的寬度

　　height設置當前頁面的高度,用到的機會不多

　　user-scale設置是否容許用戶縮放

　　initial-scale設置頁面初始化的縮放比例

2.絕對單位改成相對單位

　　寬度由像素值(px)修改成百分值(%);

　　字體由像素值(px)修改成相對大小(em);

　　圖片有像素值(px)修改成百分值(%);

3.網格佈局

　　將HTML頁面寬度等分爲12列

　　修改盒子模型爲IE的怪異盒子模型

　　*{box-sizing: border-box;}

 　　在標準下盒子模型中(*{box-sizing :content-box}):

　　　　　一個塊的總寬度=width+padding+border+margin;

　　IE怪異盒子模型中

　　　　　一個塊的總寬度=width+margin;(即width中已經包含padding和border)

4.媒體查詢

　　1.<link media="媒體類型 操做符 (媒體屬性)" href="" rel="stylesheet">

　　媒體類型:當前是什麼設備

　　　　.screen屏幕(高度和寬度)

　　　　.print:打印機

　　　　.all:全部設備

　　操做符:

　　　　and-邏輯與

　　　　not-邏輯非

　　　　only-邏輯惟一

　　媒體屬性

　　　　width:寬度

　　　　min-width:最小寬度

　　　　max-width:最大寬度

　　2.在CSS中定義樣式:

　　　　@media 媒體類型 操做符 (媒體屬性){CSS樣式}

　　　　eg:

　　　　　　PC:

　　　　　　　　@media screen and (min-width: 992px){
 　　　　　　　　footer>div {
 　　　　　　　　width: 24%;
 　　　　　　　　}
　　　　　　　　}

　　　　　　PAD:

　　　　　　　　@media screen and (min-width: 768px) and (max-width: 991px){
 　　　　　　　　footer>div {
 　　　　　　　　width: 48%;
 　　　　　　　　}
　　　　　　　　}
　　　　PHONE:

　　　　　　　　@media screen and (max-width: 767px){
 　　　　　　　　footer>div {
 　　　　　　　　 width: 98%;
 　　　　　　　　}
　　　　　　　　}