🔰框架顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的，其功能单一，并且比较小。
🔰前端常用的框架有 Bootstrap、Vue、Angular、React 等，既能开发 PC 端，也能开发移动端。
🔰Bootstrap 是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发、移动设备优先的 WEB项目等，它简单灵活，使得 Web 开发更加快速、简单。
③ 下载完成后进行拷贝
拷贝 dist 文件夹中的 css 和 js，粘贴到我们刚刚创建好的 bootstrap 文件夹中。
④ 创建一个 jquery.js 文件
把它放到我们的项目文件夹 js 下。
⑤ 官网查找 jquery 代码
官网地址：http://jquery.com/
并粘贴到前面我们已经创建好的 jquery.js 文件内。
⑦ 外链引入文件
bootstrap.min.css 正常引入，但是 bootstrap.min.js 文件是依赖于 jquery 的，所以 jquery.js 必须在 bootstrap.min.js 之前引入。
注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。
🔰为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：
-
表示宽度是设备屏幕的宽度。
-
表示初始的缩放比例。
-
自动适应手机屏幕的宽度。
🔰Bootstrap 4 需要一个容器元素来包裹网站的内容。
🔰我们可以使用以下两个容器类：
-
类用于固定宽度并支持响应式布局的容器，两侧有留白。
-
类用于 100% 宽度，占据全部视口的容器。
🔰Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
🔰Bootstrap 4 网格系统有以下 5 个类:
- 针对所有设备
- 超小屏（手机）
- 平板 - 屏幕宽度等于或大于 576px
- 桌面显示器 - 屏幕宽度等于或大于 768px)
- 大桌面显示器 - 屏幕宽度等于或大于 992px)
- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
🔰在行（.row）中可以添加列（.column）才可以作为行容器（.row）的直接子元素，但列数之和不能超过平分的总列数，如果大于12则自动换到下一行，xs 超小屏、sm 小屏、md 中屏、lg 大屏，一般 md 用的最多。 具体内容应当放置在列容器之内：
🔰偏移列通过 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
🔰为了在大屏幕显示器上使用偏移，请使用 类。这些类会把一个列的左外边（margin）增加 * 列，其中 * 范围是从 1 到 11。
- 例如：.offset-md-4 是把.col-md-4 往右移了四列格。
🔰Bootstrap 框架的网格系统还支持列的嵌套，我们可以在一个列中添加一个或多个行容器，同样在这些行容器中也可以插入多个列。
1. H1 - H6
2. 标题类
🔰Bootstrap 还提供了四个 Display 类来控制标题的样式： 。
3. 段落
4. 对齐效果
左对齐
右对齐
居中对齐
段落中超出屏幕的部分文字自动换行
段落中超出屏幕的部分不换行
1. 去点列表
2. 内联列表
🔰把垂直列表换成水平列表，同时去掉点，也可以说内联列表就是为制作水平导航栏而生的。
1. 显示单行代码
2. 显示多行代码
3. 快捷键
4. 显示html代码
5. 多行代码滚动条
2. 单选框
垂直显示
水平显示
3. 按钮
4. 文本域
🔰可以通过 row 和 col 自行设置文本域的宽度和高度，也可通过栅格网格系统来控制。
5. 表单布局
创建基本表单的步骤：
① 向父元素 form 标签添加 role=“form”；
② 把每一个标签和控件都放在一个 div 中，并添加类 class=“form-group”，这是获取最佳间距所必须的；
③ 向所有文本元素 input、textarea 和 select 添加类 class=“form-control”。
（1）水平表单，同一行显示，form 添加类 ，配合网格系统。
1. 图像形状
圆角图片
椭圆突变
缩略图
2. flex 布局
示例：
3. 浮动
右浮动
左浮动
无浮动
图片居中
响应式图片
4. 交互 ---- 文本选择
单机此段落，全选此段落
此段落具有默认的选择行为
用户无法选择此段落
5. 溢出
6. 定位
固定在顶部
固定在底部
黏着在顶部
7. 尺寸
25%宽度
50%宽度
75%宽度
100%宽度
适应父组件宽度
Width 100vw
25%宽度
50%宽度
75%宽度
100%宽度
适应父组件高度
Height 100vh
8. 间隔
margin
padding
margintop
其他的 都类似（padding 也是）
同时设置left 和right
同时设置top 和 bottom
后面的* 可以是 0~5 及auto
水平居中
9. 文本
文本对齐
左对齐
居中对齐
右对齐
文字折行和溢出
折行并省略号显示
去除文字的装饰
如 a 链接下划线
10. 可见性
显示
隐藏