响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑） ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
为什么要有响应式布局？
在移动互联日益成熟的时候，在PC端开发的网页已经无法满足移动设备的要求。通常的做法是针对移动端单独做一套特定的版本。如果终端越来越多，那么需要开发的版本就会越来越多（大屏设备的普及）响应式布局 ：一个网站能够兼容多个终端（节约开发成本）优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
响应式开发现状：
如果已经存在PC的网站了，那么一般不会使用响应式开发，而是针对移动端再开发一套系统（比如京东、淘宝）在新建站点 上采用响应式开发的越来越多。在国内，响应式开发还不是特别的流行。但响应式开发是大势所趋，会越来越流行。媒体查询（Media Query）是CSS3提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iaLpC5fJ-1572574097764)(D:\ITClass\myself\就业班\day08\1.png)]
需求：
<!-- 需求： 大屏设备(>1200px) 版心：1170px 背景色：红色 中屏设备(992-1200) 版心：970px 背景色：蓝色 小屏设备(768-992) 版心：750px 背景色：黄色 超小屏设备(<768px) 版心：100% 背景色：绿色 -->响应式开发的原理：使用媒体查询实现不同终端的布局和样式的切换。
媒体查询语法：
/*查询屏幕*/ @media screen and 条件 { } /*条件的写法*/ /*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/ /*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/ @media screen and (min-width: 1200px) { .container { width: 1170px; background-color: red; } } @media screen and (min-width: 992px) and (max-width: 1200px) { .container { width: 970px; background-color: blue; } } @media screen and (min-width: 768px) and (max-width: 992px) { .container { width: 750px; background-color: yellow; } } @media screen and (max-width: 768px) { .container { width: 100%; background-color: green; } } 注意: 媒体查询仅仅是一个css使用的限制条件,并不会增加css的权重弊端：现在只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦，因此我们会更多的借助一些响应式的框架，比如bootstrap。
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
bootstrap中文网
特点：
组件简洁大方、代码规范精简、界面自定义性强。Bootstrap是基于HTML5和CSS3开发的, js功能效果依赖于 jQuery( 第三方库, 后面讲解 )。Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。优点：
有自己的生态圈，不断的更新迭代提供了一套简洁、直观、强悍的组件标准化的HTML+CSS编码规范让开发更简单，提高了开发效率。扩展性强，虽然界面组件样式已经定义好了，我们还可以自定义，修改默认样式。版本：
2.x.x 停止维护 优点：兼容性好缺点：代码不够简洁、功能不够完善 3.x.x 目前使用最多 优点：稳定，偏向于开发响应式布局，移动设备优先的WEB项目缺点：放弃了IE67，对IE8支持但是界面效果不友好 4.x.x 阶段Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container"> ... </div>.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid"> ... </div>这两种 容器类不能互相嵌套。
栅格系统，也叫网格系统
栅格系统： 是BS实现响应式的核心所在 其底层也是媒体查询 栅格系统： 不管在什么大小的容器里面，都将这个容器分为12份，在不同大小屏幕里面，占的份数不同 最终目的: 在任何大小的屏幕上 都有较好的浏览体验 // 假设我现在有12个盒子 如果是大屏幕设备, 每行放 6 个 div, 如果是中屏设备, 每行放 4 个 div, 如果是小屏设备, 每行放 3 个 div, 如果是超小屏设备, 每行放 2 个 div, 大屏 6个div 两 12份 一个div占2份 放6个 大屏上: 16.666% 浮动 中屏 4个div 三 12份 一个div占3份 放4个 中屏上: 25% 浮动 小屏 3个div 四 12份 一个div占4份 放3个 小屏上: 33.33% 浮动 超小屏 2个div 六 12份 一个div占6份 放2个 超小屏: 50% 浮动 .row用于抵消.container容器的15px的padding值可以在.row中嵌套column栅格系统常用类（总共12列）
类名例子解释.col-xs-xx.col-xs-6在超小屏幕（及以上）生效.col-sm-xx.col-sm-6在小屏幕（及以上）生效.col-md-xx.col-md-6在中屏幕（及以上）生效.col-lg-xx.col-lg-3在大屏幕及生效，占1/4.col-lg-xx.col-lg-4在大屏幕及生效，占1/3.col-lg-xx.col-lg-5在大屏幕及生效，占1/2【案例：响应式栅格系统】
<!-- 需求: 6个盒子 1. 大屏幕一行3个 2. 中屏幕一行3个 3. 小屏幕一行2个 4. 超小屏幕一行1个 -->【案例：列嵌套.html】
<div class="col-lg-4"> <!--栅格系统无处不在，只要父盒子有宽度，就可以使用栅格系统--> <div class="row"> <div class="col-lg-6"></div> <div class="col-lg-6"></div> </div> </div>【案例：列偏移.html】
<!-- 使用 .col-md-offset-* 类可以将列向右侧偏移。--> <div class="row"> <div class="col-lg-3"></div> <!--col-lg-offset-3:在大屏下，这个div将向右侧偏移3个单位--> <div class="col-lg-6 col-lg-offset-3"></div> </div>推荐使用hidden相关的属性
