html5+css巩固笔记

day1

h1标签，一个页面只用一次
对于img标签，明白了alt中输入的东西，是当图片无法显示时，显示的文字，title是鼠标悬停时，图片上显示的字
一般找图片路径，用的多的为相对路径，上一级用两个点， ../ 表示进入了上一级文件夹
相对路径：从当前文件位置出发去找，  ./ 这样写
绝对路径：从盘符开始出发，比如C:/XXX/XXX，还有网址跳转需要用绝对路径

属性名与属性值一样的，可以直接简写为一个单词，比如音频标签的属性，controls（显示音频控制面板）loop（循环播放）autoplay（自动播放）
viude视频播放标签，muted（自动播放属性）

制作了两个案例，1.个人简介（巩固ins标签，是下划线）

day2

无序列表用ul嵌套li，li是独占一行的,ul中只能包含li标签，但是li里面还可以包含其他标签内容
有序列表用ol嵌套li
一个标题对应多个内容用 定义列表 dl嵌套dt和dd,(dt与dd并列关系)，dl用于定义列表，dt用于定义列表的标题，dd用于定义列表的内容

表格
table嵌套tr，tr嵌套td或者th：
table（表格）默认是没有边框线的，需要加border属性来显示边框
tr（行，用来将内容换行显示）
th（表头部分，文字有加粗效果）单词thead 头部
td（内容部分）tbody 主体
还能加一个tfoot表示底部
样例：
    <table border="1">
      <thead>    //这种标签在浏览器中不会显示效果，但是能让表格代码结构更清晰
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
        </tr>
      </tbody>
    </table>
单元格合并，只能合并相同内容的
原则：跨行合并，保留最上的单元格，添加属性rowspan；跨列合并，保留最左的单元格，添加属性colspan，需要为属性取值，值为单元格合并个数
原理：其实就是直接扩大了当前单元格所占的位置，比如值为“2”，那么当前内容会占据两格，覆盖掉旁边的内容，所以只能合并同内容的

表单
作用：收集用户信息，比如登录注册搜索等
标签：input 使用type属性，来实现不同的功能
tpye类型：
text:文本  password:密码(拥有掩码样式)  radio:单选框  checkbox:多选框  file:上传文件
占位文本，也就是提示信息，使用placeholder属性
对于radio属性来说，需要配合name属性，来充实它的功能，将两个radio属性的name=“xxx”中的xxx写为一样的，就能让这两个radio成为同一组，来实现单选功能
对于checkbox也是同样的，需要配合name,同时还有checked属性来实现默认选中功能，即一打开浏览器就有默认已选好的，radio一样具有该属性
对于file，可以配合multiple属性，来实现文件多选上传功能

下拉菜单选择功能
使用select标签嵌套option，select为下拉整体的框架，option是里面的选项，可以使用selected属性来做默认选择
文本域使用textarea标签，可以输入多文本，且能够换行，右下角有拖拽改变大小的功能，需要禁用掉
可以使用label标签，来绑定文字与表单控件，增大点击范围，实现点文字也能选中，如：<label><input type="radio">女</label>

无语义标签（作用为布局网页，划分网页区域）:div(独占一行) span(不换行展示)
常用的字符实体写法，&nbsp(空格) &lt(小于号<) &gt(大于号>)

day3

css
引入方式:
内部样式表引入：直接在html文件中的style标签里写
外部样式表引入写法:'<link rel="stylesheet" href="./index.css">' 工作中，常用这种方式
行内样式：写在标签中，比如写在div标签

选择器类型:
标签选择器：直接使用html自带标签进行添加样式，比如div p h1等(又叫行内选择器)
类选择器：'class="类名"' 一个类选择器，可以给多个标签使用,一个标签只能有一个class，但是可以在一个class中写多个类名，用空格分开，
类名为多个单词，可以用 - 连接，比如'news-bd'
id选择器：每个id都是唯一的，一般多用于配合js使用，很少用来写css样式
通配符选择器：'*{}',对于整个页面使用,不需要调用，浏览器会自动查找页面中所有标签，设置相同的样式。一般用于项目开始时，写在开头清除原有样式

选择器优先级：通配符<标签<类<id<行内<!important （选中标签的范围越大，优先级越低）

文字样式：font-family(字体族) font(字体复合属性) text-indent(文本缩进) text-align(控制文本水平方向对齐,用在内容的父级标签) text-decoration(修饰线)
line-height(垂直方向，值设置和区域高度一样，就能垂直居中)

后代选择器：选中某元素的后代元素
子代选择器：选择某元素中最近的子代元素。写法为：'父级标签 > 子级标签{css样式}'，父子之间用大于号隔开
并集选择器：选择多组标签设置相同的样式，每个标签用逗号隔开
交集选择器：如下代码，box和p都有重复的，但只想给第一个p加样式，就使用交集选择器，遇到标签，标签要放到最前面 比如：
    <p class="box">p标签,使用了类选择器box</p>
    <p>p标签</p>
    <div class="box">div标签,使用了类选择器box</div>

    p.box {
        color: red;
    }
伪类选择器：伪类表示元素的状态，选中元素的某个状态设置样式，使用 'xxx:hover{css}',实现鼠标悬停状态的样式
超链接的几个状态: ':link(访问前)' ':visited(访问后)' ':hover(鼠标悬停)' ':active点击时(激活状态)'

css的属性
继承性:子级默认继承父级的文字控制属性
层叠性:相同的属性，会被后者覆盖，不同的属性，会都生效

计算权重：从左向右依次比较选择器个数，同一级别的个数多的优先级高，如果个数相同，就往后比较，出现important直接权重最高，有继承权重的最低(出现继承,有improtant也没有用)

背景属性:
background-repeat(背景图平铺(平铺就是复制)方式,背景图默认为平铺效果，加no-repeat可以消除) 
background-position(背景图位置,用数值表示水平 垂直方向，用英文单词，可以颠倒顺序) 
background-size(背景图尺寸缩放,常用的属性:cover(等比缩放至完全覆盖背景区) contain(等比缩放至图片能够完全显示到区域中) 百分比(根据盒子尺寸计算)) 
background-attachment(背景图固定,让图片不随内容滚动)
 
标签的显示特点:
块级元素:独占一行、宽度默认是父级的100%、添加宽高属性生效(即可以改变宽高)，如div等
行内元素:多个共存于一行、尺寸由内容撑开、加宽高属性不会生效，如span等
行内块元素：多个共存于一行、宽高默认由内容撑开、但是能够改变宽高，结合了块级和行内的特点，如img等

转换显示特点:使用display加属性值:
block:转为块级
inline-block:转为行内块
inline:转为行内

Day4

盒子模型

(重点)结构伪类选择器：'xxx:first-child' 'xxx:last-child' 'xxx:nth-child(n)'：找该标签中第n个元素，将n写成公式，可以同时多选几个元素，比如2n就选中所有偶数
要找到第几个以前的标签，使用'-n+5',这表示找到第五个以前的标签，'n+5'表示找第五个以后的标签，n从0开始增加

(重点)伪元素选择器：创建虚拟元素，用来摆放装饰性的内容，'xx::before'在xx标签的最前面添加 'xx::after'在后面添加
在使用伪元素设置内容时候，必须在css中写content:""属性，内容写在引号中，如果没有内容就空着，但必须有这个属性、伪元素默认是行内显示模式、权重和标签选择器相同

盒子模型：三个主要元素
内边距——padding(可以连接方向)
边框线——border（加-方向单词，还能单给某个方向加）： 边框线粗细  线条样式(solid实现、dashed虚线、dotted点线)  颜色（不区分顺序）
外边距——margin(可以连接方向)
盒子尺寸=内容尺寸+border尺寸+内边距尺寸，给盒子加内边距或者边框线会撑大盒子。在宽高属性中手动减去多的，或用'box-sizing:border-box'可以解决
开写前使用通配符清除所有默认样式

元素溢出：控制溢出元素的内容的显示方式使用overflow：hidden（隐藏溢出部分）、scroll（滚动查看内容，无论是否溢出都有滚动条）、auto（内容溢出了才会显示滚动条）

塌陷问题：给子级添加上方外边距，会导致父级以前向下移动。可以给父级用padding/父级设置overflow:hidden/父级设置border-top来解决

行内元素加padding，无法改变垂直位置，可以使用line-height来解决

总结：今天学习了盒子模型，明天将学flex布局

Day5

flex布局+浮动

浮动
标准流(文档流):指标签在页面中默认的排布规则，比如块级元素独占一行排布等
浮动:让块元素水平排列，使用'float:right/left'，使用后的特点：顶对齐、具备行内快特点、脱离标准流
清除浮动:浮动会让元素脱标(即不再占用父级中的位置,而是浮在上面)，如果父级没有设置高度，子级又无法撑开扩大高度，就会导致页面布局错乱，则需要清除浮动，
清除浮动的方法：
1.额外标签法：在父级元素的内容的最后，也就是最后一个子级的下面添加一个块级元素，在css中给这个块级设置'clear:both'属性
2.单伪元素法：在父级元素的内容的最后，也就是最后一个子级的下面添加一个块级元素，对该块级添加css，写xxx::after{content:""s;display:block;clear:both;}
3.双伪元素法(推荐使用)：前面的步骤相同，写法是xxx::before,xxx::after{content:"";display:table;} xxx::after{clear:both;}
4.使用overflow:hidden;

flex布局：非常适合结构化布局，不会像浮动一样产生脱标的现象，具有强大的空间分布和对齐能力。
display:flex(弹性布局):给父级加'display:flex'，子级就能自动挤压或拉伸
   注:  在使用以下的属性特点时，父级必须加上display:flex才能生效
justify-content(主轴对齐方式，盒子整体在水平位置移动):拥有以下几个属性值，后四个为常用属性值，也写在父级:
    1.flex-start:默认值，弹性盒子从起点开始依次向后排列
    2.flex-end:弹性盒子从终点开始依次排列
    3.center:弹性盒子沿主轴居中排列
    4.space-between:沿主轴均匀排列，空白间距均分在弹性盒子 之间，使盒子与盒子之间产生间距，间距为父级剩余空间，两侧盒子与父级区域无间隙
    5.space-around:沿主轴均匀排列，空白间距均分在弹性盒子 两侧，盒子之间的间距是两侧盒子和父级区域间距的两倍
    6.space-evenly:沿主轴均匀排列，盒子与容器之间间距相等，使盒子之间等距分布
align-items(侧轴对齐方式，并不是盒子竖着排列，而是盒子在垂直方向整体移动):针对当前整个容器内的所有盒子
align-self(单个侧轴对齐，单个在垂直方向移动):只针对容器内某一个盒子
    1.stretch:盒子沿着侧轴线被拉伸至铺满容器(若没有设置侧轴方向拉伸尺寸，则默认拉伸)，要在盒子没有设置高度的情况下使用
    2.center:盒子沿侧轴居中排列
    3.flex-start:盒子从起点开始依次向后排列
    4.flex-end:盒子从终点开始依次向前排列
flex-direction(修改主轴排列方向):主轴默认在水平方向，侧轴默认在垂直方向
    主要属性值:1.column:垂直方向，从上向下，让横向排列的东西变成垂直排列
flex(弹性伸缩比):可以修改盒子在主轴方向的尺寸
flex-wrap(弹性盒子换行):所有弹性盒子都在一行显示，该属性能够使盒子换行显示
align-content(行对齐方式):如果只有一行存在，就不会生效，属性值与justify-content是一样的
 

Day6

学成在线案例

logo区域：
使用背景图的方式，先在logo的地方放文字，在在css中放背景图，然后用过font-size:0;来隐藏文字

搜索框区域：
当父级加了display:flex时，子级就会变成弹性盒子，就能对宽高设置生效
outline:none;可以去掉表单控件的焦点框
.xxx input::placeholder{css}选中的是placeholder显示的提示文字的样式
使用flex:1;可以让搜索框直接占据父级剩余的宽度区域

用户区域：
vertical-align: middle;让span与img标签水平对齐，在一行上。它是 行内块和行内垂直方向对齐方式 的属性

精品推荐区域:
vscode使用ul>li{$}*10，可以生成十个li，每个li的内容，是数字，从1到10，自增

Day7

定位的使用
定位：灵活的改变盒子在网页中的位置。使用定位模式position配合边偏移属性（left、right改变水平位置，top、bottom改变垂直位置）
相对定位：'position:relative'来设置定位模式，再加例如'top:100px'等的边偏移属性 
     特点 1.改变位置的参照物是自己原来的位置。
        2.不脱标，占位。
           3.标签显示模式特点不变。
绝对定位：‘position:absolute’，配合子绝父相使用：改变位置的参照物是父级
    特点：1.参照物是最近的已经定位的祖先元素，如果所有祖先元素都没有定位，那么参照物就是浏览器可视区。
          2.脱标，不占位。
              3.显示模式特点改变：（宽高生效，具备了行内块的特点）    
子绝父相：子级使用绝对定位，父级使用相对定位。功能：子级可以在父级的上面显示，且如何移动，都不会超出父级的区域
定位居中：让盒子显示在大盒子在中心位子
    步骤 1.绝对定位 2.水平、垂直边偏移为50% 3.子级向左、上移动自身尺寸的一半（使用margin）或者/使用'transform:translate(-50%,-50%);'(这种更推荐)
固定定位：使用'position:fixed;'
    特点:  1.脱标，不占位
          2.参照物为浏览器窗口
          3.显示模式变为行内块的特点
堆叠顺序:使用'z-index:x;'这里的x表示整数值，默认为0，取值越大，那么层级数越高

css精灵：就是将一张大图，取里面的一小部分显示，可以提高网页的加载速度
步骤： 1.创建盒子，盒子尺寸与小图尺寸相同
      2.设置盒子背景图为精灵大图    
      3.添加'background-position'属性，改变背景图位置

垂直对齐方式：'vertical-align' 属性值：middle居中对齐(常用的)。使用原因：浏览器把行内块、行内标签当文字处理，默认按基线对齐，下方会有空白，可以使用display:block转为块级，也可以使用垂直对齐方式。同时，可以用来调整图与文字的对齐方式

过渡transition(复合属性):可以为一个元素在不同状态之间切换的时候添加过渡效果，比如，一个盒子显示200宽，当鼠标滑过时，变成了600宽。
    transition属性值：过渡的属性  花费的时间(s)  （加给原标签，而不是hover变化后的标签）
    注意：过渡的属性可以是具体的CSS属性、也可以为all(两个状态属性值不同的所有属性，都产生过渡效果、transition设置给元素本身
比如：img {
            width: 200px;
            height: 150px;
            transition: all 1s;
        }

        img:hover {
            width: 500px;
            height: 400px;
        }
可以让图片慢慢产生变化效果，时间为一秒

透明度opacity：设置整个元素的透明度(包含背景和内容)，写法：'opacity:0-1;'0完全透明，1不透明，0-1之间的小数为半透明

鼠标光标类cursor：让鼠标悬停在元素上时指针显示为指定样式，属性值：
    1.default：默认值，通常是箭头
    2.pointer：小手效果，提示用户可以点击
    3.text：工字型，提示用户可以选中文字
    4.move：十字光标，提示用户可以移动

案例：轮播图，制作轮播图，都用ul嵌套li

Day8

SEO三大标签：让用户在百度搜索引擎中搜索了关键词，你的网页排的更靠前，在头部配合<meta name=“SEO标签” content="内容">来写
常见方法：1.竞价排名 2.将网页制作成html后缀 3.标签语义化（在合适的地方使用合适的标签）4.网页头部SEO标签：
    title：网页标题标签
    description：网页描述
    keywords：网页关键词

Favicon图标:使用<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">  图标放在与index.html平级的根目录即可

想让盒子中的内容右对齐，可以使用，justify-content: flex-end;

logo做法：使用h1嵌套a标签，a中写文字，最后隐藏即可，给a设置css样式时，添加为背景图

搜索框：浏览器会优先生效input标签的默认宽度，会使flex:1不生效。如果没生效，重置input默认宽度即可，使用width：0

小兔鲜案例（下）
做轮播图下方的小圆点：用ol嵌套li

在做产品区域的时候，一般都是用ul嵌套li，再在li中写a标签，最后在a中写图片与文本两个标签，即img与p标签

对于产品介绍下方的价格标签，用p嵌套span，因为价钱是可以改动的，所以将钱的数字放在span中，span外放￥图标等

day9

平面转换transform：为元素添加动态效果，一般与过渡(transition)配合使用。改变盒子在平面内的形态。
平移：'transform:translate(x值,y值);'x表示水平方向移动的距离，y表示垂直 x与y的取值能以px为单位(参照盒子的宽高)，也可以取百分比(参照盒子自生的尺寸)，正              负都行。单独移动某一个方向可以使用'transform:translateX/Y(值);'
旋转：'transform: rotate(旋转角度deg);'角度单位为deg，取值正负均可，正为顺时针，负为逆时针。
改变转换原点：将盒子转换的点改变为想要的点，'transform-origin: 水平原点位置 垂直原点位置;'取值可为：方位名词(如left、right等)、以px为单位的值、以百分  比为单位的值
多重转换：先平移再旋转 'transform:translate() rotate();'  比如轮胎滚动。想要多重属性，只能合并写，如果分开写会被最后一个覆盖。

缩放：'transform: scale(缩放倍数);' x轴与y轴等比缩放，取值：大于1表示放大，小于1表示缩小

倾斜：'transform:skew();'取值单位为deg，让盒子倾斜

渐变：使多个颜色逐渐变化的效果，一般用于设置盒子的背景。可分为：
    线性渐变：'background-image:linear-gradient(渐变方向[可写也可不写],颜色1 终点位置[单位百分比],颜色2 终点位置[单位百分比]...);' 
    径向渐变：'background-image:radial-gradient(半径 at 圆心位置,颜色1 终点位置[单位百分比],颜色2 终点位置[单位百分比]...);'

空间转换：与平面转换一样，但多了一条Z轴方向的转换，Z轴在垂直电脑平面，正数向外，负数向内。 'transform: translate3d(x,y,z);'

视距perspective：用于指定观察者与Z=0平面的距离，为元素添加透视效果(近大远小、近实远虚) 'perspective:视距;'添加给直接父级，取值范围为800px——1000px,配合空间转换使用，用属性translateZ(px)，可以让盒子产生变远或变近的效果。

空间旋转：Z轴与平面旋转效果一样，'transform: rotateZ(deg);'因为Z轴的中心点与平面的中心点在一个位置，沿着X/Y轴旋转的效果就不一样了，结合视距更好观察。
旋转-左手法则：根据旋转方向确定取值正负，左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲的方向为旋转正在方向。

立体呈现：'transform-style: flat/preserve-3d;' 添加给父级，创造一个区域，让子级存在于该区域，flat(让子级处于平面类型区域中)、preserve-3d(让子级处于3D空间类型区域中)。

空间缩放：'transform: scale3d(x,y,z);'

注：旋转的轴体，是以盒子的面为中心，也就是人要面向盒子当前，如果旋转了，会改变盒子的轴体，每个面都有独立的轴体，互不影响。

动画-animation：实现多个状态间的变化过程，动画过程可控(重复播放、最终画面、是否暂停)
定义动画写法：两种状态使用'@keyframes 动画名称{from{变化前的CSS样式} to{变化后的css样式} }'   多种状态'@keyframes 动画名称{0%{} 10%{} .... 100%{} }' 百分比，表示动画时长的百分比，先定义再实现
实现动画: 'animation: 动画名称 动画花费时间(以为s秒为单位);'哪个盒子想要实现，就加给哪个盒子的css
扩展：符合属性值'animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;'(其中动画名称与时长必须写)
    速度曲线：linear(匀速)、steps(分布动画,可配合精灵图使用)
    重复次数:infinite(无限循环)
    动画方向:alternate(往返)
逐帧动画(精灵动画)：属性'animation-timing-function',取值steps(数字)。
精灵动画制作步骤：1.盒子尺寸与一张精灵图尺寸相同 2.移动背景图(移动距离=精灵图宽度) 3.steps(n),n与精灵小图个数相同。

多组动画：'animation:动画名称1,动画名称2,动画名称n;'

Day10

分辨率：硬件分辨率(物理分辨率-出厂设置)、缩放调节的分辨率(逻辑分辨率-设置)。
写网页参考逻辑分辨率
视口标签：'<meta name="viewport" content="width=device-width(表示视口宽度=设备宽度), initial-scale=1.0(缩放1.0倍，就是不缩放)">'，让html的尺寸与屏幕适应。
二倍图：用于防止图片在高分辨率屏幕下模糊失真，大部分设计师现在都是参考iPhone6/7/8的分辨率来做

适配方案：
    宽度适配：宽度自适应（百分比布局、flex布局） 用于PC端
    等比适配：宽高等比缩放（rem、vw） 用到移动端
    rem：是相对单位，1rem = 1html字号大小，使用步骤 1.使用媒体查询(能够检测视口宽度，然后编写差异化css样式，当某个条件成立，执行对应的css样式) 2.设置html字号大小'font-size' 3.设置宽高，单位为rem。 要确认rem尺寸，现在大部分移动端都是用px单位数值/37.5
    媒体查询：'@media(视口宽度px){选择器名称{css样式}}' 当html的视口宽度与媒体查询中的相同时，css样式才会显示。目前rem布局中，将html等分为10份，即html标签的字号为视口宽度的1/10，也就是'@media(width:320px){html {font-size:32px} }'
    使用flexible.js文件，该文件是适配移动端的js库，可以自己检测到任何视口宽度，直接使用rem单位就行

Less：在less文件中写的代码会自动转到css
    注释：//单行  /*多行注释*/
    计算：可以自动运算出结果，在使用除法时，需要用括号括起来
    嵌套：'.父级选择器名称{父级样式 .子级选择器名称{子级样式} }'
    变量：写法两步，1.定义变量'@myColor:pink;' 2.使用变量'.box { color:@myColor };'
    导入：使用@import导入，写到要导入的less文件，比如将01.less导入到02.less中，写'@import"./01.less"; '
    导出：一定要在less文件的第一行写，'//out:./index.css' 如果在第一行添加的是'//out:false'就禁止了less导出，不会生成对应的css文件

适配方案：可以直接实现适配，不用媒体查询：
    vw：1vw=1/100视口宽度。单位计算，所需vw尺寸 = px单位数值/(1/100视口宽度)，比如当前视口宽度为375，盒子宽为68px，那么1vw = 3.75，所需vw就为68/3.75vw，则对应的68px应转换为18.133333vw
    vh：1vh=1/100视口宽度
    注：一个盒子中，vw与vh不能混用，会导致盒子变形。推荐使用vw，因为vw是参照视口宽度

案例：酷我音乐手机版
图片缩放'background-size: contain;'当图片的宽和高其中之一与设定的盒子大小相等时就停止缩放
文字以及图标的大小，也需要转vw
使用'object-fit:cover;'让缩放的图片全覆盖，当图片与盒子比例不同时，防止不会变形
头部固定，当给头部加fixed固定时，遮住搜索区域，此时可以给搜索区域添加margin，向下移动原来头部区域所占的位置大小，即可显示

响应式前端，一套代码适配所有屏幕

媒体查询中的媒体特性：max-width: 最大宽度(当输入了最大宽度，所有小于该值的都会被选中)  min-width: 最小宽度(所有大于该值的都会被选中)
比如：'@media(max-width: 768px) {body {background-color:pink;} }'，当屏幕宽度小于等于768时，网页背景色会变成粉色
书写顺序：min(从小到大依次写) max(从大到小依次写)
link引入媒体查询方式：'<link rel="stylesheet" media="(媒体特性)" href="./index.css">'

Bootstrap-前端UI框架
中文官网：https://www.bootcss.com/
使用步骤：1.下载BootstrapV5中文文档->进入中文文档->下载->下载Bootstrap生产文件，将min.css导入到html文件中，有min的是格式压缩过的文件，不方便看代码，但是可以直接调用样式 。2.使用：引入CSS文件，'<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">' 调用类名，比如container就是响应式布局版心类。
Bootstrap栅格系统：将整个网页的宽度分成12等份，每个盒子占用的对应份数。Bootstrap 5中，栅格系统划分了6个响应区间：xs(<576px)'.col-'、sm(>=576px)'.col-sm-'、md(>=768px)'.col-md-'、lg(>=992px)'.col-lg-'、xl(>=1200px)'.col-xl-'、xxl(>=1400px)'.col-xxl-'。比如类名调用'col-xl-3'让盒子一行排4个盒子，一行占3个。
Bootstrap全局样式：需要查看文档，按钮类btn-xxx(xxx对应单词，可以改变尺寸，颜色等等)，表格类table-xxx
Bootstrap组件：1.引入css 2.引入js(看需不需要动态变化来决定是否引入) 3.查看文档，复制结构
Bootstrap字体图标：下载：Extend->图标库->安装->下载安装包->bootstrap-icons-1.X.X.zip。使用：1.复制fonts文件夹到项目目录 2.网页引入bootstrap-icons.css文件 3.调用css类名(也就是图标对应的类名)