-----------2020-02-08--------------------------武汉加油中国加油！再过十四天一定会胜利的---------------------------------------------------------------------------------------------------------
1.Bootstrap简介
①cdn引入
直接去官网：https://getbootstrap.com 引入（顺序不要乱）<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</body>
</html>
②响应式原理
（1）响应式所具有的特点：
1）网页的宽度自动调整。
2）尽量少用绝对宽度，用百分比。
3）字体用rem,em做为单位。
4）布局要使用浮动，弹性布局。
最重要的一点是：媒体查询。@media
媒体查询：根据一个或多个基于设备类型，具体特点和环境来应用响应式。
（2）媒体查询使用方法：
1）
@media all{
div{
fontr-size:3rem;
}
}
2）
<link rel = "stylesheet" href = "css/bootstrap.css" media = "all">
3）
@import url('css/bootstrap.css')(min-width:200px);
@media all and(min-width:400px){
div{
font-size:400px;
}
}
@规则
@chartest:定义编码
@import：css模块化
@font-face：自定义字体
@keyframe：animation里的关键帧
@media：媒体查询
（3）媒体类型
all //所有设备
print //打印机设备
screen //彩色的电脑屏幕
speech //听觉设备（针对有视力障碍的人，可以把内容阅读出来）
注意：tty,tv,projection,handle,braille,embossed,aural等几种类型在媒体查询4中已经废弃。
（4）媒体特性
width：min-width max-width
height：min-height max-height
orientation 方向：landscape 横屏（宽度大于高度），portrait 竖屏（高度大于宽度）
aspect-ratio宽度比
-webkit-device-pixel-ratio:像素比
举个栗子
//屏幕尺寸大于500时满足
@media(min-width:500px){
div{
background:green;
}
}
（5）逻辑运算符（用来做条件判断）
and 合并多个媒体查询（并且）
， 匹配某个媒体查询（或者）
not 对媒体查询结果取反
only 仅在媒体查询匹配成功后应用样式（防范老旧浏览器）
举个栗子
@media all and(min-width:700) ， (orientation:landscape){
div{
background:green;
}
}
//屏幕尺寸大于800满足
@media not all and(max-width:800px){}
//
@media only screen and (min-width:100px){}
（6）举个响应式栗子
<style>
body{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: green;
float: left;
border: 1px solid #000;
box-sizing: border-box;
}
/* 200px-400px 一行显示一个div */
@media all and (max-width:400px){
div{
width:100%;
}
}
/* 400-600px 一行显示两个div */
@media all and (min-width:400px){
div{
width: 50%;
}
}
/* 600px-- 一行显示3个div*/
@media all and (min-width:600px){
div{
width: 33.3%;
}
}
</style>
③栅格系统
（1）栅格系统基本格式
<!-- 栅格系统基本格式 -->
<!-- 100%的宽 -->
<div class="container-fluid">
<!--行 -->
<div class="row">
<!-- 列,一行分为12列 -->
<div class="col-xl-1">1</div>
<div class="col-xl-1">2</div>
<div class="col-xl-1">3</div>
<div class="col-xl-1">4</div>
<div class="col-xl-1">5</div>
<div class="col-xl-1">6</div>
<div class="col-xl-1">7</div>
<div class="col-xl-1">8</div>
<div class="col-xl-1">9</div>
<div class="col-xl-1">10</div>
<div class="col-xl-1">11</div>
<div class="col-xl-1">12</div>
</div>
</div>
<!-- 自己定义宽 -->
<div class="container">
</div>
（2）栅格系统的五个响应层
<div class="container">
<div class="row">
<div class="col-xl-1">xl为超大屏，屏幕宽度>=1200,容器的宽度固定为1140px，一行可以设置12个列。
屏幕尺寸小于1200的时候，一行只能设置一列
</div>
<div class="col-xl-1">6</div>
</div>
<div class="row mt-5">
<div class="col-lg-4">lg为大屏，屏幕宽度>=992px,容器的宽度固定为960px，一行可以设置12个列。屏幕尺寸小于
992的时候，一行只能设置1列。
</div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
<div class="row mt-5">
<div class="col-md-4">md为中等屏，屏幕宽度>=768px,容器的宽度固定为720px，一行可以设置12个列。屏幕尺寸小于
768的时候，一行只能设置1列。
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row mt-5">
<div class="col-sm-4">sm为小屏，屏幕宽度>576=px,容器的宽度固定为540px，一行可以设置12个列。屏幕尺寸小于
576的时候，一行只能设置1列。
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
<div class="row mt-5">
<div class="col-4">col为超小屏，屏幕宽度小于576px,容器的宽度为auto，一行永远可以设置12个列。
</div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
</div>
当尺寸同时满足好几个的时候，应用最大的尺寸的规则。
<!-- 设置等宽列，平分宽度，通过.col的class去设置 -->
<div class="row mt-5">
<div class="col">等宽列</div>
<div class="col">等宽列</div>
</div>
<!-- 设置多行等宽列，在希望断开的地方添加一个.w-100的class，能够让后面的列换行 -->
<div class="row mt-5">
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="w-100" style="height: auto; border: none;"></div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
</div>
（3）
---------------------明天再更-------------------------------------------------
