bootstrap简介===========
一个响应式的框架（自适应）， pc端网站使用下降，移动端使用的网站上升
4.3.1 最新版本 3.3.7是一个过渡版本
下载3.3.7 版本的一共有3个文件夹： js css font
css里面有的文件带了.map的后缀，是为了方便打包后调试作用的
带了.min名字的是，一个压缩后的文件，比较小
下载4.3.1版本就只有js 和css
使用方法： header上面需要引用 meta 标签，响应式必备
引用jquery在所有js的前面，因为bootstrap是基于jq来写的
引用bootstrap的js,
以用bootstrap的 proper js
=bootstrap 响应式原理======
1.网页的宽度自己调整
2.尽量少用绝对宽度
3.字体的大小要使用rem, em作为单位， rem是根节点字体的相对大小，是一个相对单位，不是一个绝对单位， 根节点的大小需要使用根据的用户的屏幕尺寸来动态计算font-size的大小
4. 布局使用浮动（流式布局）或者弹性盒子 bootstrap3使用的流式布局， bootstrap4使用的弹性盒子
5.媒体查询： 根据一个或者多个基于设备类型，集体特点和环境来应用样式
@是一个规则：如：@charset：定义编码 @import:引入css文件（文件模块化） @font-face: 自定义字体 @keyframe: 定义关键帧 @media 媒体查询
@media 的使用方法：
在style里面使用
在引用外部文件的适应方法：
<link rel="stylesheet" href="" media="条件"></link>
2. @import url('')(这里面使用媒体查询的条件） 如： @import url("xxxx")(min-width；220px) 参考使用：https://drafts.csswg.org/mediaqueries/ 1.媒体类型:决定使用的设备类型 all: 所有设备 print： 打印机 screen： 彩屏设备 speech: 听觉设备，针对有视力障碍的人士，可以把网页的内容以语音的方式呈现 注意：tty, tv, projection, handheld, braille, embosssed, oural 等几种类型在媒体查询4中已经废弃 使用方式： @media 媒体类型{ } 2. 媒体特性：指的是媒体设备身上的属性 width: 宽度， min-width: 最小的宽度， max-width: 最大的宽度 height: 高度， min-height: 最小的高度， max-height: 最大的高度 orientation： 方向 landscape 横屏（宽度大于高度） portrait 竖屏（宽度小于高度） aspect-ratio: 宽高比 -webkit-device-pixel-ratio: 像素比（webkit内核私有属性） 使用方法： @media(里面写媒体特性){ } 3.逻辑运算符： 用来做条件判断 and: 合并多个媒体类型 并且的意思 && , : 匹配某个媒体查询， 或者的意思 || not: 对媒体查询的结果取反 ！的意思 only: 仅对媒体查询匹配成功后应用样式 （疲敝老旧浏览器） 使用方法： // p屏幕尺寸最小为700px 并且横屏的时候满足 @media all and (min-width: 700px) and (orientation: landscape){} // 屏幕最大为800px 或者横屏的时候满足 @meida (max-width: 800px), (orientation: landscape){} // 屏幕尺寸大于800px的时候才满足 @media not all and (max-width: 800px){} -->
<style> div{ padding: 50px 0; border: 1px solid #000; } div::after{ content: "这是一所房子"; } @media all and (max-width: 1000px){ div{ background-color: green; } div::after{ content: "哇，房子好大哦，可以打麻将了"; } } @media all and (max-width: 800px){ div{ background-color: pink; } div::after{ content: "哇，房子变小了，只能放下一张双人床"; } } @media all and (max-width: 500px){ div{ background-color: purple; } div::after{ content: "哇，房子变小了，只能放下一张单人床"; } } @media all and (max-width: 300px){ div{ background-color: rgb(87, 34, 87); } div::after{ content: "哇，房子变小了，啥都放不下"; } } </style>
<div></div>
