HTML、CSS学习笔记7（媒体查询、BootStrap）
目录
一、媒体查询
1.max-min-width
2.书写顺序
3.媒体类型
4.媒体查询——link写法
5.媒体查询——隐藏
二、BootStrap
1.BootStrap简介
2.BootStrap下载
3.BootStrap使用
4.BootStrap栅格系统
5.BootStrap栅格系统——类
6.bootstrap——全局CSS样式
7.bootstrap——组件
8.bootstrap——JavaScript插件实现常见的交互效果
一、媒体查询
1.max-min-width
/* 视口宽度小于等于768px， 网页背景色是粉色 */@media (max-width: 768px) {body {background-color: pink;}}/* 视口宽度大于等于1200px， 网页背景色是skyblue */@media (min-width: 1200px) {body {background-color: skyblue;}}2.书写顺序
CSS具有层叠性，例如：min-width先写width小的，之后写width大的（层叠性覆盖）
3.媒体类型
以下媒体类型知道了解即可，意义不大
注：高度一般不判断（min/max）屏幕；
完整写法纯了解
4.媒体查询——link写法
注：media中可以只写小括号（媒体特性），其他可省略
如：
5.媒体查询——隐藏
* {margin: 0;padding: 0;}.box {display: flex;width: 100%;}.left {width: 300px;min-height: 500px;background-color: pink;}.main {flex: 1;min-height: 500px;background-color: skyblue;}/* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */@media (max-width: 768px) {.left {display: none;}}二、BootStrap
1.BootStrap简介
2.BootStrap下载
3.BootStrap使用
注：引入——要么是bootstrap.css要么是 bootstrap.min.css（这两个源代码相同，只不过.min.css是格式化压缩好的，功能差不多。如果做项目可以选择Min，因为格式化了体积小）
4.BootStrap栅格系统
响应式网页布局就要使用栅格系统，栅格系统是将网页等分成12份
以下图中，响应断点（视口屏幕）数字要牢记，类前缀（类名）要记住
5.BootStrap栅格系统——类
例：
123
6.bootstrap——全局CSS样式
全局CSS样式：控制某个单独标签的样式
组件：网页常见区域代码，如下拉菜单、导航图等
JavaScript插件：交互效果
定制：不满足需求的时候，修改框架的内容
7.bootstrap——组件
直接复制粘贴即可
8.bootstrap——JavaScript插件实现常见的交互效果
注意有顺序要求，先引入jQuery.js,再引入bootstrap.min.js
注：Carousel是轮播图代码
上一篇：Word加载项/插件管理
下一篇：Harbor仓库开启SSL