https://www.bilibili.com/video/BV1Ez4y1q7oA/?spm_id_from=333.337.search-card.all.click
Web前端必学框架Bootstrap5完整版从零入门到精通到实战（HTML/CSS/Bootstrap5/Vue/JS/零基础入门)S0051
v3学过x v4没学旧中不学 v5学
P1 01_Bootstrap 简介
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML，CSS和JavaScript，yTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应.Bootstrap将HTML，CSS和JavaScript封装成一个个功能组件，用起来简洁灵活，使得 Web 开发更加快捷。一Bootstrap5目前是Bootstrap的最新版本，利用提供的Sass变量和大量mixin、响应式栅格系统、可扩展的预制组件、基于jQuery的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app.
P2 02_Bootstrap5安装
https://v5.bootcss.com/docs/getting-started/download/
下载了预编辑的Bootstrap解压出来得到了Bootstrap文件夹，只要把html与Bootstrap文件夹放在一起，然后用相对路径引用bootstrap.bundle.min.js和 bootstrap.min.css文件即可
P3 03_Bootstrap5容器
Bootstrap5 容器
容器是Bootstrap一个基本的构建块，它包含、填充和对齐给定设备或视口中的内容。
Bootstrap 需要一个容器元素来包裹网站的内容我们可以使用以下两个容器类：
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。
固定宽度
.container类用于创建固定宽度的响应式页面。
注意：宽度（max-width）会根据屏幕宽度同比例放大或缩小。
超小屏幕
小屏幕
中等屏幕
大屏幕
特大屏幕
超级大屏幕
P4 04_Bootstrap5 网格
Bootstrap5 网格系统
Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
我们也可以根据自己的需要，定义列数。Bootstrap 5的网格系统是响应式的，列会根据屏幕大小自动重新排列。请确保每一行中列的总和等于或小于 12
Bootstrap 5网格系统有以下6个类：
.col-针对所有设备。
.col-sm-平板-屏幕宽度等于或大于576px
.col-md-桌面显示器-屏幕宽度等于或大于768px
.col-lg-大桌面显示器-屏幕宽度等于或大于992px
.col-xl-特大桌面显示器-屏幕宽度等于或大于1200px
.col-xxl-超大桌面显示器-屏幕宽度等于或大于1400px。
要进行栅格系统操作，首先就要创建栅格系统的容器。
“container"和"row"共同组成栅格容器，"row”代表的就是一行。
创建栅格容器后，设置名为col-md-1的div，当尾数为1时，表示每个div的宽度占1/12，所以每行最多可以放置12个子div。
如果超过12个，则会在下一行显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">1</div>
<div class="col-6">2</div>
</div>
</div>
</body>
<script src="./js/bootstrap.bundle.min.js"></script>
</html>
P5 05_Bootstrap5不等宽响应式列
P6 06_Bootstrap5网格嵌套列
P7 07_Bootstrap5网格偏移列
偏移列
列偏移是通过类名（offset--）来设置的。第一个星号（）可以是 sm，md，Ig，xl，表示屏幕设备类型，第二个星号（）可以是 1 到 11的数字。
<div class="container">
<div class="row">
<div class="col-2" style="background-color: red;">1</div>
<div class="col-2 offset-2" style="background-color: blue;">2</div>
</div>
</div>
P8 08_Bootstrap5 网格列顺序
列顺序
通过类（.order）来控制内容的可视顺序。这些类是响应式的，因此可以配合网格类使用。如（.order-md-1.order-md-3）
想改变 都要设置order-* 才可以
<div class="container">
<div class="row">
<div class="col-2 order-2" style="background-color: red;">1</div>
<div class="col-2 order-1" style="background-color: blue;">2</div>
</div>
</div>
P9 09_Bootstrap5网格排序规则
order-1 1-5有效
order-first order-last
first last 排序优先高于数字和默认排序的
P10 10_Bootstrap5排版标题
Bootstrap5排版
Bootstrap 5默认的font-size为16px，line-height为1.5。默认的font-family为"Helvetica Neue"，Helvetica，Arial，sans-serif。此外，所有的
元素 margin-top：0、margin-bottom：1rem（16px）。
可以使用类.h1-.h6来设置标题
Display标题类
Bootstrap5还提供了使标题更突出的类，当我们需要标题突出时可以使用这些标题类。突出标题以更大的字体显示，并且会对其进行加粗。
display-1 到 display-4
使用类突出显示段落
还可以通过在段落上添加类，lead来突出段落。
也可以添加类.small指定更小文本（为父元素的 85%）
我们可以使用带有类.text-muted class的
P11 11_文本对齐截取_
文本对齐
可以使用文本对齐类轻松地将文本左对齐、右对齐和居中对齐。
.text-start text-center text-end
.text-md-center
文本转换
可以将文本转换为小写、大写、设定单词首字母大写
.text-lowercase：设定文本小写
.text-uppercase：设定文本大写
.text-capitalize：设定单词首字母大写
截断长文本
对于较长的文本，可以使用类.text-truncate用省略号截断文本。在一行中显示一段文本但没有足够的可用空间时，它特别有用。省略号
P12_12_文本大小行高粗体_
文本换行和溢出
通过类名（.text-wrap）可以设置文字在超过盒子宽度时自动换行
通过类名（.text-nowrap）可以阻止文字的换行，此时文字会溢出盒子
文本大小
BootStrap5默认字体初始大小为16px
在BootStrap5中将文本大小分为了六类，分别对应标题的h1-h6
添加类名.fs-或添加类名 h（*号为1-6的数值）
字体粗细及斜体
在BootStrap5中将字体的粗细分为了5类.fw-bolder（bolder）.fw-bold（700）.fw-normal（400）.fw-light（300）.fw-lighter（lighter）
斜体 则是通过类名（.fst-italic）来控制 而通过类名（.fst-normal）也可以取消斜体
行高（行距）
BootStrap5默认字体初始行高为1.5（
在BootStrap5中将行高分为了4种.Ih-1（1rem）.Ih-sm（1.25rem）.Ih-base（1.5rem）.Ih-Ig（2rem）
P13 13_Bootstrap5颜色
Bootstrap5 颜色
Bootstrap 5 提供了一些有代表意义的颜色类：.text-muted，.text-primary，.text-success，.text-info，.text-warning，.text-danger，text-secondary，.text-dark，.text-body（默认颜色，为黑色）、.text-light.text-white，
可以设置文本颜色透明度为 50%，使用.text-black-50 或.text-white-50 类
P14 14_颜色颜色类_
bg-primary success info warning danger secondary dark light
P15 15_Bootstrap列表
需要从列表项中删除默认样式，可以通过简单地将类.list-unstyled应用到相应的
- 或
- 元素来完成此操作。
P16 16_Bootstrap创建基础列表组
Bootstrap5 列表组
列表组是非常有用且灵活的组件，用于以漂亮的方式显示元素列表。在最基本的形式中，列表组只是一个带有
.list-group类的无序列表，且列表中的元素带有.list-group-item类。<ul class="list-group"> <li class="list-group-item">一</li> <li class="list-group-item">二</li> <li class="list-group-item">三</li> </ul>可以将类.active添加到.list-group-item类的后面用来指示当前项目元素是活动的。同样，可以将.disabled添加到.list-group-item 后面，从而使其看起来是禁用状态。
要创建一个链接的列表项，可以将
- 替换。如果想鼠标悬停显示灰色背景可以添加.list-group-item-action
P17 17_列表组样式_
使用.list-group-flush类添加到list-group元素上，用以移除外边框和圆角，从而创建与其父容器边对边的列表组
水平列表组
.list-group-horizontal类添加到.list-group，可以将列表项水平显示而不是垂直显示（并排而不是堆叠）创建编号列表组
可以通过简单地在.list-group元素上添加类.list-group-numbered来创建带有元素编号的列表组。P18 18_列表组颜色及自定义内容
带徽章的列表组
带徽章的列表组其实就是将bootstrap框架中的徽章组件和基础列表组件结合在一起的一个效果，只需在.list-group-item的基础上追加徽章组件“badge"。多种颜色列表项
和大多数其他组件一样，可以在列表组项目上使用相应的类来对它们进行额外的背景色设置，来对它们施加额外的强调。.list-group-item-success
.list-group-itep-secondary
.list-group-item-info
.list-group-item-warning
.list-group-item-danger
list-group-item-primary
list-group-item-dark
.list-group-item-light向列表组添加自定义内容
bootstrap框架在链接列表组的基础上增加了两个样式：
.list-group-item-heading：用来定义列表项头部样式
.list-group-item-text：用来定义列表项主要内容
这两个样式最大的作用就是用来帮组开发者可以自定义列表项里的内容P19 19_Bootstrap徽章
badge 使用.rounded-pill 类来设置药丸形状徽章（具有更多圆角的徽章）
P20 20_Bootstrap5基础表格样式及颜色
.table
table-primary
.table-success
table-danger
.table-info
.table-warning
.table-active
.table-secondary
.table-light
.table-dark创建带条纹行的表格
添加
I通过添加.table-striped类，可在内的行上看到条纹，即在基础表格的代码上为标签
.table-striped 类带边框表格
通过将类.table-bordered添加到.table类创建的表格上，就可以在表格和单元格的所有边上添加边框无边框表格
通过添加.table-bbrderless类可以取消表格和单元格所有边的边框鼠标悬停状态表格
.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：创建较小的表格
table-sm类用于通过减少内边距来设置较小的表格，使表格更紧凑并节省空间P21 21_Bootstrap5表格边框，响应式表格
响应式表格
要使任何表格具有响应性，只需将.table元素包裹在.table-responsive元素内，即可创建响应式表格。还可以使用类.table-responsive{-sml-mdl-lgl-xl）根据视口宽度指定表格何时应具有滚动条.
注意.table-responsive类是在div外包裹一个div实现P22 22_Bootstrap5图像
圆角图片
.rounded类为图像添加圆角：圆形
.rounded-circle类可以设置椭圆形图片：缩略图
img-thumbnail类用于设置图片缩略图（图片有边框）对齐图像
使用.float-start类将图像向左浮动，或使用.float-end向右浮动：图片居中
使用.mx-auto（margin:auto）和.d-block（display:block）类来设置图片居中对齐：注意，是两个一起使用.响应式图片
图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。
我们可以通过在标签中添加.img-fluid 类来设置响应式图片。
此类主要将样式 max-width：100%；和 height：auto；应用于图像，以便它很好地缩放以适合包含元素。P23 23_Bootstrap5按钮
Bootstrap5 按钮
Bootstrap 按钮样式
Bootstrap 内置了几种预定义的按钮样式，每种样式都有自己的语义目的，并添加了一些额外的按钮。
任何带有 class.btn 的元素都会继承圆角按钮的默认外观<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>按钮类可用于、
- 元素来做到这一点。
如果要使用有序列表或无序列表创建水平菜单，则需要将所有列表项放在一行中（即并排）。可以通过将类.list-inline添加到
并将类.list-inline-item添加到子