11-01-Bootstrap

>BootStrap
概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
好处：
1. 定义了很多的css样式和js插件。开发人员可以直接使用这些样式和插件得到丰富的页面效果。
2. 响应式布局。同一套页面可以兼容不同分辨率的设备。

响应式布局
同一套页面可以兼容不同分辨率的设备。
实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。

步骤：
1、定义容器。相当于之前的table、
　　容器分类：
　　1）container：两边留白
　　2）container-fluid：每一种设备都是100%宽度
2、定义行。相当于之前的tr 样式：row
3、定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目

设备代号：
1）xs：超小屏幕 手机 (<768px)：col-xs-12
2）sm：小屏幕 平板 (≥768px)
3）md：中等屏幕 桌面显示器 (≥992px)
4）lg：大屏幕 大桌面显示器 (≥1200px)

注意：
1、一行中如果格子数目超过12，则超出部分自动换行。
2、栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。(如>=768)  因此常用sm
3、如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行。

附注：
流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局。
视觉窗口：viewport,是移动端特有。这是一个虚拟的区域，承载网页的。
承载关系：浏览器---->viewport---->网页

适配要求：
1）网页宽度必须和浏览器保持一致
2）默认显示的缩放比例和PC端保持（缩放比例1.0）
3）不允许用户自行缩放网页
满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案。

适配设置：
如果任何设置都没有，默认走的就是viewport的默认设置
去设置新的viewport设置,达到适配要求。
<meta name="viewport"> 设置视口的标签 在head里面并且应该紧接着编码设置
viewport的功能：
1）width 可以设置宽度 (device-width 当前设备的宽度)
2）height 可以设置高度
3）initial-scale 可以设置默认的缩放比例
4）user-scalable 可以设置是否允许用户自行缩放
5）maximum-scale 可以设置最大缩放比例
6）minimum-scale 可以设置最小缩放比例
在<meta name="viewport" content="" > content="" 使用以上参数
1）width=device-width 宽度一致
2）initial-scale=1.0 默认的缩放比例是1.0
3）user-scalable=no 不允许用户自行缩放 （yes，no 1,0）
标准适配方案：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
meta:vp + tab 快捷方式

非主流的适配方案：
1）页面的真实尺寸会比在设备的上尺寸要大几倍
2）假设设备是iphone4 -> 320px -> 网页尺寸 640px
3）缩放操作，有2倍的 有3倍 和屏幕像素比有关系
4）什么是屏幕像素（物理像素，像素点） px(页面的尺寸单位)
5）物理像素 是设备显示屏的最小可视颗粒的大小 以前的手机（直板手机）
6）现在有 高清显示屏 视网膜屏 retina屏
7）显示的效果就提高了更细腻，但是在显示同等质量的图片的时候（模糊效果）
8）在屏幕像素比（一个px宽的屏幕能放几个物理像素）高的设备 图片（非矢量）显示会模糊
9）提高网页的清晰度 根据屏幕的像素比 来缩放网页
10）但是这样的适配方案成本非常高
11）一般的企业开发当中使用的还是标准化设置
在高清显示屏当中：图片可能会失真（模糊）

1.可以使用jquery,但是不建议
2.jquery 做了很多桌面浏览器的兼容问题 特别是IE，但是移动端没有IE浏览器
3.主流的浏览器：谷歌 火狐（2016年停止了维护和更新） safari浏览器 百度 360 qq ...
4.特点：内核基本上都是 webkit 或者 blink 兼容 -webkit-
5.使用H5的api 或者说使用一个 叫做： zepto.js 的库（基于高版本浏览器开发）

1. 移动端以流式布局为主
2. 百分比布局
3. 非固定像素布局
4. 无法准确计算容器的尺寸