[Bootstrap]bootstrap的简单原理

BOOTSRAP是2010年五月份提出的一个CSS库的前端框架,就目前越来越追求前端的运行效率的背景下,引用Bootstrap框架越来越臃肿,目前都是借鉴Bootstrap框架由程序员手写出比较适合当前项目的代码.

响应式页面实现的四大核心要素

1.viewport;计算当前设备的可视区域的大小

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

　　width设置当前页面的宽度 device-当前设备的宽度

　　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-逻辑唯一

　　媒体属性

　　　　宽度

　　　　min-最小宽度

　　　　max-最大宽度

　　2.在CSS中定义样式:

　　　　@media 媒体类型 操作符 (媒体属性){CSS样式}

　　　　eg:

　　　　　　PC:

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

　　　　　　PAD:

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

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