[Bootstrap]bootstrap的简单原理

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

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

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

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

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

　　height设置当前页面的高度,用到的机会不多字体

　　user-scale设置是否容许用户缩放spa

　　initial-scale设置页面初始化的缩放比例code

2.绝对单位改成相对单位图片

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

　　字体由像素值(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%;
 　　　　　　　　}
　　　　　　　　}