响应式布局、bootstrap栅格系统

1.1响应式开发原理
 

响应式布局主要是通过媒体查询，在不同的屏幕宽度下采用不同的布局方式, 从而适配不同设备的目的

设备划分	尺寸区间
超小屏幕(手机)	< 768px
小屏设备(平板)	>=768px~<992px
中等屏幕(桌面显示器)	>= 992px ~ <1200px
宽屏设备(大桌面显示器)	>= 1200px

1.2响应式布局容器

响应式需要一个父级做为布局容器,搭配子级元素来实现变化效果。
原理  就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。

平时我们的响应式尺寸划分

●超小屏幕(手机,小于768px) :宽度为100%
●小屏幕(平板,大于等于768px) :设宽为750px
●中等屏幕(桌面显示器,大于等于992px) :宽度设置为970px
●大屏幕(大桌面际器,大于等于1200px ) :宽度设为1170px

 2.1 Bootstrap简介

1.优点
●标准化的html+ css编码规范
●提供了一套简洁、直观强悍的组件
●有自己的生态圈,不断的更新迭代
●让开发更简单,提搞了开发的效率

2.版本
●2.x.x: 停止维护兼容性好,代码不够简洁,能不够完善。
●3.x.x:前使用最多稳定,但是放弃1E6-1E7.对IE8担是面效果不好偏向于开发响应式布局、
移动设备优先的WEB项目
●4.x.x :最新版，目前还不是很流行

 在bootstrap网页下载相关代码，复制进文件夹

 在html骨架中添加相关代码，解决兼容性问题

3.引入相关样式文件

<!-- Bootstrap核心样式-->

<link rel="stylesheet" href= "bootstrap/css/bootstrap .min.css">

4.书写内容

●直接拿Bootstrap 预先定义好的样式来使用
●修改Bootstrap原来的样式,注意权重问题
●学好Bootstrap的关键在于知道它定义了哪些样式,以及这些样式能实现什么样的效果

2.3布局容器

Bootstrap需要为页面内容和栅格系统包裹个 .container  容器, Bootstarp预先定义好了这个类,叫  .container    它提供了两个作此用处的类。
 

container类	container-fluid类
●响应式布局的容器固定宽度	●占据全部视口 ( viewport)的容器。
●大屏(>=1200px)宽度定为1170px	●流式布局容器百分百宽度
●中屏(>=992px)宽度定为970px	●适给于单独做移动端开发
●小屏(>=768px)宽度定为750px
●超小屏(100%)