[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%;
    　　　　　　　　}
　　　　　　　　}