目标：
1）响应式原理
2）使用媒体查询完成响应式导航
3）使用Bootstrap的栅格系统
4）使用Bootstrap的响应式工具
5）完成阿里百秀首页案例
目录：
1）响应式开发
2）Bootstrap前端开发框架
3）Bootstrap栅格系统
4）阿里百秀首页案例
响应式开发
1、响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
2、响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理： 在不同屏幕下，通过媒体查询来改变这个布局容器的大小 ，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
BootStrap前端开发框架
1、Bootstrap简介
Bootstrap 来自Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和JAVASCRIPT的，它简洁灵活，使得Web 开发更加快捷，
框架：一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。
版本（2020年）
2、Bootstrap使用
在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。
控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
Bootstrap 使用***四步曲***：
1、创建文件夹结构
2、创建 html 骨架结构
3、引入相关样式文件
4、书写内容
1）创建文件夹结构
创建 bootstrap 文件夹放，它所包含的样式等文件信息
2）创建html骨架结构
3）引入相关样式文件
4）书写内容
3、布局容器.containe
Bootstrp 需要为页面内容和栅格系统包裹一个 .container容器，Bootstarp预先定义好了这个类，叫.container它提供了两个作此用处的类。
Bootstrap栅格系统
1、栅格系统简介
1）将页面布局划分为等宽的列，通过列数的定义来模块化页面布局
2）系统会自动分最多12列
3）container，不同屏幕下、宽度固定。 再把container 划分为12等份
2、栅格选项参数
xs(超小屏幕) < 768px
sm(小屏幕) 768px <= sm < 992px
md(中等屏幕) 992px <= md < 1200px
lg(宽屏) 1200px <= lg
栅格系统用于通过一系列的行（row）与列 （colurmn）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
3、列嵌套（分割好的列可以再分成12份，设置下层列如图）
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-* 元素到已经存在的.col-sm-*元素内。
我们列嵌套最好加1个行row这样可以取消父元素的padding值 而且高度自动和父级一样高
4、列偏移（添加列偏移可以修改列的位置）
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距(margin）。
5、列排序（向右push、向左pull）
通过使用 .col-md-push-* 和.col-md-pull-* 类就可以很容易的改变列(column）的顺序。
左到右用推（push）、右到左用拉（pull）
6、响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
与之相反的，是visible-xs visible-sm visible-md visible-lg 是显示某屏幕宽度下内容
Bootstrap 其他（按钮、表单、表格）请参考Bootstrap文档。
标签：布局,25,vue,WEB,响应,Bootstrap,栅格,屏幕,页面 From： https://www.cnblogs.com/changdasheng/p/17482388.html