1.学了容器包裹的概念
2.学了网格布局【栅栏布局】 和 网格布局的优先级，懂的会调试和制作 屏幕不同时的响应式布局，还有就是对12列的分布和自定义，以及一些偏移、微调、等Class的使用。
3.学了响应式布局的 显隐操作。
4.学了 对 网格布局【栅栏布局】 的 对齐方式、左右边距、列计算、以及个性化的一些排版。
5.学了 代码类，实现代码样式、变量样式；还学习了图文的一个布局【响应式布局】，缩略图的设置【加边框】、图片转块元素和对图片的居中、边距【实现自定义】和浮动的设置，图片文字的设置【颜色变浅而已 没什么用的...】。
6.学习了对表格样式的自定义，标头设置、颜色翻转、鼠标悬停效果、自定义颜色【单元格、行，自定义颜色有个优先级】，还有隔行换色；对表格的边框、紧缩、和响应式【响应式布局、溢出加滚动】做处理。
7.学习了颜色 一些text-* 颜色 ，要熟悉那么几个常用的就够了，黑白可进行绛色处理【没啥用处】，还有设置背景颜色 bg-*。
8.学习了 边框用.border-*设置想要的场景，以及消除全部边框、消除某一条边框、边框的颜色自定义。
9.学习了实现各种方位圆角的设置，使用.rounded-circle正圆，使用.rounded-pill椭圆使用.rounded-sm(小圆角）和.rounded-lg (大圆角）实现圆角半径大小。
10.学习了公共样式1-3，主要学了一下内容：
1）使用.close和×构建一个关闭按钮;
2）使用.float-left、.float-right、.float-none实现浮动效果
3）使用.clear-fix给浮动的区域的父元素添加，实现清理浮动的功能;还可以使用.float-*-left等来实现不同屏幕的浮动效果
4）使用.text-hide来隐藏元素标签内容，但本身还存在保持SEO优化【即代码还在 内容不可见】;
5）使用.overflow-auto和.overflow-hidden来设置区域显示方式;
6）使用.visible和.invisible来设置内容可见或不可见;
7) 使用.align-*来设置内容文本的对齐方式
8)使用.p-*来设置内边距(padding)，范围在0-5之间和auto;使用.m-*来设置外边距(margin),范围在0-5之间和auto; 【0-5】
9)使用.pt-*或mt-*设置边缘的距离，这里的t可以是top,其它还有b(bottom)、l(left)、r(right)等; 【0-5】
10)使用.px-*或mx-*设置左右边缘距离，这里的x表示(left,right);使用.py-*或 my-*设置上下边缘距离，这里的y表示(top,bottom); 【0-5】
11）使用.pt-*-5,*可以是md、lg等响应式的方式来设置边缘;
12）使用.w-*设置元素的长度，包括25%、50%、75%、100%和auto;使用.h-*设置元素的高度，包括25%、50%、75%、100%和auto;
13）使用.mw-*和.mh-*设置max-width和max-height; 使用.vw-*和.vh-*设置相对于窗口的大小;
14）使用.shadow-*实现元素的阴影效果;
15）使用.d-*来设置元素的display模式，*可以是none、inline、inline-block、block、 table、table-row等; 也可以通过.d-md-*中的md设置响应式的媒体查询效果;
16）使用.embed-responsive实现嵌入响应式，比如<iframe> 、 <embed>等... 再使用.embed-responsive-16by9实现响应式比例，还可以21:9,4:3,1:1;使用.text-*设置文本的对齐方式，有left、center、right; 【懂得都懂】可以设置.text-md-*实现响应式的媒体查询效果; 【懂得都懂】
17）使用.text-warp和.text-nowarp实现文本溢出时是否换行; 使用.text-break对于很长的字符串，且中间没有空格实现换行;
18）使用.text-lowercase设置小写，.text-uppercase设置大写，以及.text-capitalize设置首字母大写;
19）使用.font-weight-bold加粗、.font-weight-normal 正常、.font-weight-light纤细、.font-italic倾斜; 使用.text-monospace设置等宽字体;
20）使用.text-reset 实现字体颜色的重置;【随父】 使用.text-decoration-none删除超链接下划线;
11.学习了BootStrap中的 Flex弹性布局：
1）开启弹性布局使用.d-flex和.d-inline-flex，.flex-row可以呈现子元素水平方向的位置，默认居左并从左到右显示(1,2,3)【学过flex的都知道 x是默认的主轴】 .flex-row-reverse子元素水平方向居右从左到右显示(3，2，1) ;【横向反转弹性布局】，
2）
.flex-column 实现子元素垂直效果，并从上往下显示(1，2,3) 【学过flex的都知道 y是默认的侧轴】
.flex-column-reverse实现子元素垂直效果，并从上往下显示(3，2，1)【竖向反转弹性布局】
3）.justify-content-start(end、center、between、around)实现内容对齐;
4）
.align-items-start(end、center、baseline、stretch)实现项目对齐;【flex：父】
.align-self-start(end、center、baseline、stretch)实现单项目对齐;【flex的子元素 子】
5）
使用.flex-fill强制让每个元素项目占据相等的水平宽度;
多个项目同时设置了.flex-fill，则它们等比例分割宽度，适合导航项目;
6）
使用.flex-grow-*，*表示0或1，也能实现.flex-fill的功能，设置1即可;
通过元素生成的css可以看出，其实.flex-fill就是flex族的简写形式;
7）使用.flex-shrink-*，*表示0或1，表示是否强制更换到新行中;
8）
使用.mr-auto和.ml-auto等对齐方式，对flex元素进行浮动对齐;
对于垂直方向，也可以使用.mb-auto和.mt-auto来设置对象方向;
9）使用.flex-wrap(包裹)和.flex-nowrap(不包裹，默认)来设置子元素项目;使用.flex-wrap-reverse进行项目排序的倒序;
10）
使用.order-*，来设置子元素项目的排序顺序，支持.order-*-*;
.align-content-start(end、center、between、around、stretch)垂直对齐;
完。
下面学习组件，组件官网都会给出 我们可以去文档看 ，下面我们进行学习！