响应式布局

响应式布局就是一套代码适应不同的屏幕宽度

媒体查询

能根据设备的宽度变化，设置差异化样式

完整写法

开发常用写法

min-width（从小到大）

max-width(从大到小)

外链式写法

BootStrap框架

BootStrap:快速开发响应式网页

官网：Bootstrap中文网Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为3.0 。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。https://www.bootcss.com/BootStrap栅格系统

栅格化是指将整个网页的宽度分成若干等份

BootStrap3把网页等分成12等份，每个内容占12等份的份数。

*代表的是份数

Glyph icons字体图标使用

HTML页面引入BootStrap样式文件

空标签调用对应类名

glyphicon

 字体图标类名

BootStrap插件实现常见的交互效果

引入BootStrap样式

引入js文件：JQuery.js + BootStrap.min.js

复制结构HTML，并适当调整结构或内容

复制需要组件，并适当调整

当默认样式不满足当前网页的时候，可以去官网定制特定的样式，然后下载，重新引入文件

不会的去官网查找文档

什么样可以做成响应式网站

企业网站，内容很少

电商网站一般分为PC端一个网站，移动端是一个网站

小案例