声明
现在开发中，响应式页面使用地会比较少。今天对我们来说，最大的收获是： 学会如何去使用前端 UI 框架。
媒体查询
Bootstrap 框架，学会怎么去用，而不是怎么去做东西，因为后面有更好的框架： 饿了吗 和 vant
一,媒体查询
学习媒体查询的目的：
了解如何使用媒体查询做响应式页面。
为接下来学的 Bootstrap 做铺垫。
理解:max-width 最大值不能超过这个值 max-width 最小值不能小过这个值
代码公式如图:
媒体查询使用场景1-
约束移动端不要超过规定大小
媒体查询使用场景2-
元素的显示和隐藏
媒体查询使用场景3
响应式原理:通过@media媒体标签判断屏幕大小, 让盒子在不同宽度呈现不同的摆放顺序
响应式布局外链式: 方便后面进行响应式开发时,后期维护进行区分端口
<!-- 默认显示pc端 -->
<link rel="stylesheet" href="./css/pc.css">
<!-- ipd端 屏幕992以下 -->
<link rel="stylesheet" href="./css/ipd.css" media="(max-width:992px)">
<!-- m端 屏幕为768以下 -->
<link rel="stylesheet" href="./css/m.css" media="(max-width:768px)">注意:媒体查询在书写时,注意顺序(防止css的层叠性进行覆盖)
总结:768px以下表示移动端 992px以上表示平板电脑 1200px以下表示pc端(中屏) 1200px以上表示pc端 (大屏)
二,Bootstrap
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网: Bootstrap中文网
下载安装包。
开发中，我们都是按需导入，简单理解，需要用到啥，我们复制那个文件，没有必要都放入，提高性能。
使用步骤：
复制 css文件
并且引入到html文件中
2.复制字体图标文件夹
3.如果需要js，则复制js文件，并引入html文件中
4.使用内部预定义好的类(调用版心)即可。
<!-- 响应式通栏盒子 -->
<div class="container-fluid">响应式通栏盒子</div>三,栅格系统
栅格系统(gridsystems),也叫“网格系统，它就是通过一系列的行（row）与列（column）的组合创建页面布局。
简单说，栅格系统也是一种布局方式。 BootStrap 给咱们内置好了一套布局系统。
BootStrap3默认将网页分成12等份
比如，超大屏幕下我们想要一个通栏的大盒子
超大屏幕下，我们再来一行左右来分
超大屏下，如果一行放4个，怎么做呢？
如果实现不同屏幕下，不同的显示个数，可以通过使用不同类名。
还是这4个盒子，如果在中等屏幕下放3个怎么做呢？
如果在小屏幕下放2个
超小屏幕放一个
(#^.^#)学废了吗?
四,row 类
row 清除左右15px的内边距,通过左右外边距清除
五,列偏移
列偏移 通过 col-lg-offset-*
让盒子往右侧走
.first div {
height: 100px;
background-color: pink;
}
.second div {
background-color: purple;
height: 100px;
}
.third div {
height: 100px;
background-color: skyblue;
}
<div class="container">
<div class="row first">
<div class="col-lg-4">左侧</div>
<div class="col-lg-4 col-lg-offset-4">右侧</div>
</div>
<div class="row second">
<div class="col-lg-3 col-lg-offset-3">1侧</div>
<div class="col-lg-3 col-lg-offset-3">2侧</div>
</div>
<div class="row third">
<div class="col-lg-6 col-lg-offset-3"></div>
</div>
</div>效果如图:
六,列嵌套
一个盒子里面可以再嵌套其他的盒子，但是站在这个盒子的角度来看，他又分为了12份。
.container .row div {
height: 100px;
background-color: pink;
}
<div class="container">
<div class="row">
<div class="col-lg-4">
<p class="col-lg-6">登录</p>
<p class="col-lg-6">注册</p>
</div>
<div class="col-lg-4">2</div>
<div class="col-lg-4">3</div>
</div>
</div>效果图:
