媒体查询
定义：根据视口的宽度从而呈现出不同的样式
@media (min-width: 0) {
p{
color: red;
}
}
@media (min-width: 576px) {
p{
color: orange;
}
}
@media (min-width: 768px) {
p{
color: yellow;
}
}
@media (min-width: 992px) {
p{
color: #00cc4c;
}
}
@media (min-width: 1200px) {
p{
color: aqua;
}
}
@media (min-width: 1400px) {
p{
color: tomato;
}
}
Bootstrap5
1.Bootstrap概述
Bootstrap是有Twitter公司的两名工程师，基于html、css、js开发的简洁的，开源、强大、优雅的ui框架。至今经历了5个大版本，现在学习的第五个版本是最新的版本。
Bootstrap内置了大量的css类，供元素使用，相当于一个预先设置好的类库，供需要标签直接用，直接就会被渲染。
学习UI框架的终极意义，学会如何查文档，运用文档。
市面上的UI框架很多很多，企业会用哪个不一定。工作中百分之八十用框架。
2.Bootstrap文档
学习UI框架的终极意义，学会如何查文档，运用文档。如何查阅文档，如何运用文档的案例。
Bootstrap5文档查阅：https://v5.bootcss.com/docs/5.3/getting-started/introduction/
其他版本的文档查阅：https://v5.bootcss.com/docs/versions/
3.下载生产文件
下载css的样式文件库，和js的功能文件库，图标文件库（单独下载）
4.各个版本的区别
任何的框架都会升级，框架升级后会有一些改动。可能对内容进行增删改，所以一定要查看对应版本的手册。
工作中，一定要先看公司使用的项目中的框架版本，会在开发手册中体现。
版本5的改动比较大，原来js依赖jQuery，现在不依赖了，也不再兼容IE。
对很多类名也有改动，最大的改动就是左、右，如：到5版本，所有的左都变成了start所有的右都变成了end
5.学习时使用的模版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/bootstrap-icons.css">
<script src="../js/bootstrap.bundle.js"></script>
<style></style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Bootstrap5的响应式
https://v5.bootcss.com/docs/layout/breakpoints/
1.断点
Bootstrap5中，为我们设计了5+1个断点，写好了媒体查询，使用类中缀可以直接对应某个响应式范围，用于响应式构建。
想在源码中查看代码，先打开源码，按ctrl+f 搜索关键词，关键类名，找到好多，旁边有上下键，按上下查
/*没写类中缀的就是手机端小于576px*/
/*屏幕宽度在576px以上含576px*/
@media (min-width: 576px) {/*类中缀sm 小号，pad*/}
/*屏幕宽度在768px以上含768px*/
@media (min-width: 768px) {/*类中缀md 中号 平板*/}
/*屏幕宽度在992px以上含992px*/
@media (min-width: 992px) {/*类中缀lg 普通 小屏幕的pc*/}
/*屏幕宽度在1200px以上含1200px*/
@media (min-width: 1200px) {/*类中缀xl 大号 大屏显示器*/}
/*屏幕宽度在1400px以上含1400px*/
@media (min-width: 1400px) {/*类中缀xxl 超大号 超大屏幕*/}
2.天沟
“天沟”是一个翻译过来的词汇，指容器中左右两侧的内间距。让内容不至于紧贴元素的两侧，默认时共1.5em（24px）间距宽，左右0.75em。
3.容器
https://v5.bootcss.com/docs/layout/containers/
容器container类名，容器就是一个响应式的“版心”。这个版心会根据页面宽度的变化而变化，就是个自动版心。会根据页面宽度放大缩小，改变版心的宽度。
- sm：页面宽度576-768之间，版心宽度540px
- md：页面宽度768-992之间，版心宽度720px
- lg：页面宽度992-1200之间，版心宽度960px
- xl：页面宽度1200-1400之间，版心宽度1140px
- xxl：页面宽度1400以上，版心宽度1320px
@media (min-width: 576px) {
.container-sm, .container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container-md, .container-sm, .container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1320px;
}
}
在bootstrap中的两种容器：
- ==.container ==,它会自动适配断点，叫做定宽容器。会按照响应式中的最大宽度体现，并且居中，左右的天沟
- .container-fluid全宽适配，变宽容器。撑满整个展示的全部宽度，也具有左右两侧的天沟
在写布局的时候，容器类是一定要写的，否则无法限定响应式的部分。UI框架本来就是响应式框架。
基础内容
1. 颜色
2.排版文字大小
https://v5.bootcss.com/docs/content/typography/
- 使用.h1 ~ .h6类可以同标签h1~h6大小样式一致
<h1>大标题</h1>
<div class="h1">我也想大标题</div>
- 使用一种更大的标题样式.display-1~.display-6没有加粗效果，比标题更大，从1～6逐步变小，1号最大。
<div class="display-1">更大号的字体1</div>
<div class="display-2">更大号的字体2</div>
3.列表
列表一般情况下更多使用ul和ol，默认有标识符。去掉列表的标识符.list-unstyled。
<!-- 去掉列表的标识符 -->
<ul class="list-unstyled">
<li>aaaa</li>
<li>bbbb</li>
</ul>
表格和表单
1.表格
https://v5.bootcss.com/docs/content/tables/
不是说框架里所有的内容要精通，用什么，查什么，查完了，加上。
如果不知道加哪，复制文档中的案例，改案例
如果自定义样式过多，直接手写样式，就不要使用ui框架中的类了
- .table基础类，写给
<table>标签必须写，有了基础类其他的辅助类才生效。 - .table-{color}表格颜色，表格颜色的类除了可以加到
<table>标签也可以加到<tr>和<td> - .table-striped条形纹，加到
<table>标签上，使得<tbody>里的行，隔行变色 - .table-hover鼠标悬停行变色效果，加到
<table>标签上，使得<tbody>里的行，发生悬停变色 - .table-bordered给table加边框，有了这个属性再可以改边框的颜色.border-{color}
- 表头主题有两个table-dark深色主题，table-light亮色主题，这两个类写给
<thead>修改表头的主题样式
2.表单
https://v5.bootcss.com/docs/forms/overview/
（1）文本输入框和表述文字
- .form-control加给input标签的，让input标签有样式上的变化
- .form-label加在label标签上的，有间距，非必要
- .form-text对表单进行描述，并且是块元素，字体大小和间距的变化，非必要
<div>
<label class="form-label" for="user">用户名</label>
<input type="text" id="user" class="form-control">
<div class="form-text">用户名可以为数字+字母，也可以为汉字</div>
</div>
（2）下拉菜单
- .form-select下拉菜单必写的类，基础类，写给select标签
- .form-select-lg下拉菜单的文字大一点，.form-select-sm下拉菜单的文字小一点
<select class="form-select form-select-lg">
<option>请选择城市</option>
<option value="0">北京</option>
<option value="1">郑州</option>
<option value="2">深圳</option>
<option value="3">重庆</option>
<option value="4">南京</option>
</select>
（3）单选复选框
- .form-check单选框和复选框外层包裹元素，有些边距的样式
- .form-check-input单选和复选框的样式，会根据属性type改变样式
- .form-check-label是单选和复选的说明文字
<div>
<div class="form-check">
<input type="radio" value="0" class="form-check-input" name="sex">
<label class="form-check-label">男</label>
</div>
<div class="form-check">
<input type="radio" value="1" class="form-check-input" name="sex">
<label class="form-check-label">女</label>
</div>
</div>
（4）表单组
- .input-group表单组的外层包裹元素
- .input-group-text表单标签前面的文字提示，使用内联元素
- .form-control输入框就用表单控件
<div class="input-group">
<span class="input-group-text bg-primary text-white">北京</span>
<input type="text" class="form-control">
</div>
工具类
1.尺寸
（1）宽度和高度
https://v5.bootcss.com/docs/utilities/sizing/
宽度和高度，boot中提供宽度和高度的类是百分比的类。
- 宽度 .w-{number}支持25、50、75、100、auto，分别代表百分比
- 高度 .h-{number}支持25、50、75、100、auto，分别代表百分比。注意高度是父级元素的百分比，前提是父元素要有高度才行
（2）相对视口的尺寸
- 相对视口的宽度vw-100支持100，全屏宽度
- 相对视口的高度vh-100支持100，全屏高度
<div class="bg-warning">
<div class="zdy-h w-25 bg-danger">父级宽度的25%</div>
<div class="zdy-h w-50 bg-primary">父级宽度的50%</div>
<div class="vh-100 w-75 bg-success"></div>
</div>
2.边框
https://v5.bootcss.com/docs/utilities/borders/
（1）边框样式
- border四个方向一像素边框
- oborder-bottom下边框
- oborder-top上边框
- oborder-start左边框
- oborder-end右边框
- 边框的宽度border-{number}0-5数字，0是去掉边框，1-5是1px-5px
- 边框的颜色border-{color}颜色使用boot提供的颜色
（2）圆角
- .rounded圆角的基础类，默认四个方向圆角
- .rounded-{number}圆角的弧度0-3
- .rounded-circle圆形
- .rounded-pill胶囊型
3.间距
间距包括内间距和外间距，内间距使用·p-*，外间距使用m-*
- 间距的宽度（距离）
- m-{number}0-5，外间距,1是0.25rem，四个方向共同使用一个距离的外间距
- p-{number}0-5,内间距,1是0.25rem，四个方向共同使用一个距离的外间距
- 间距的方向
- 上内、外间距pt-{number}和mt-{number}
- 下内、外间距pb-{number}和mb-{number}
- 左内、外间距ps-{number}和ms-{number}
- 右内、外间距pe-{number}和me-{number}
- 垂直方向的内、外间距py-{number}和my-{number}
- 水平方向的内、外间距px-{number}和mx-{number}
- 特殊值，外间距的auto值，mx-auto
- 响应式的内外间距需要加类中缀，响应式写法会随着.container的变化而变化
- .p-{类中缀}-{number} 响应式写法的内间距
- .m-{类中缀}-{number} 响应式写法的内间距