教程：

https://www.runoob.com/bootstrap5/bootstrap5-tutorial.html

Bootstrap5  支持主要的最新版本浏览器，不支持  Internet  Explorer  11  及以下版本。Bootstrap5  不再依赖  jQuery，使用了原生的  JavaScript。

两个容器类
.container  类用于固定宽度并支持响应式布局的容器。.container-fluid  类用于  100%  宽度，占据全部视口（viewport）的容器。
Bootstrap  提供了一些间距类用于填充边距：
.ps-0  .ps-sm-0  .ps-md-0  .ps-lg-0  .ps-xl-0  .ps-xxl-0  
0:0,1:0.25rem,2:0.5rem,3:1rem,4:1.5rem,5:3rem,auto:auto
ps-:padding-left,pb-:padding-bottom,pe-:padding-right,pt-:padding-top
py-:padding-top    padding-bottom,px-:  padding-right    padding-left,p-:padding  全部
ms-:margin-left,mb-:margin-bottom,me-:margin-right,mt-:margin-top
my-:margin-top    margin-bottom,mx-:  margin-right    margin-left,m-:margin  全部
bg-  设置背景色，.bg-gradient  设置背景颜色渐变
border  使用边框，border-0  border-top|right|bottom|left-0  border-top|right|bottom|left  border-1……5  border-颜色
rounded  设置圆角  rounded-top|end|bottom|start|circle|pill  rounded-0……3
可以使用  .container-sm|md|lg|xl  类来创建响应式容器。容器的  max-width  属性值会根据屏幕的大小来改变。
元素向右浮动使用  .float-end  类，向左浮动使用  .float-start  类，  .clearfix  类用于清除浮动，.float-*-left|right  -  *
宽度使用  w-*  (.w-25,  .w-50,  .w-75,  .w-100,  .mw-auto,  .mw-100)  类来设置。
高度使用  h-*  (.h-25,  .h-50,  .h-75,  .h-100,  .mh-auto,  .mh-100)  类来设置。
元素的排列方式.justify-content-start  (默认)|  end|  center|  between  |  around
.flex-fill  类强制设置各子元素的宽度一样。.flex-grow-1  设置子元素使用剩下的空间。.flex-shrink-1  设置子元素的收缩规则。
从  .order-1  到  .order-12，子元素排序，数字越低权重越高
包裹子元素三个类：  .flex-nowrap  (默认),  .flex-wrap  或  .flex-wrap-reverse。设置  flex  容器是单行或者多行。
  .align-content-*  来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start  (默认),  .align-content-end,  .align-content-center,  .align-content-between,  .align-content-around  和  .align-content-stretch。这些类在只有一行的弹性子元素中是无效的。
子元素对齐可以使用  .align-items-*  类来控制，包含的值有：.align-items-start,  .align-items-end,  .align-items-center,  .align-items-baseline,  和  .align-items-stretch  (默认)。
指定子元素对齐对齐可以使用  .align-self-*  类来控制，包含的值有：.align-self-start,  .align-self-end,  .align-self-center,  .align-self-baseline,  和  .align-self-stretch  (默认)。

网格系统    
Bootstrap  5  的网格系统是响应式的，系统会自动分为最多  12  列。列会根据屏幕大小自动重新排列。
  6  个类:
.col-  针对所有设备。
.col-sm-  平板  -  屏幕宽度等于或大于  576px。
.col-md-  桌面显示器  -  屏幕宽度等于或大于  768px。
.col-lg-  大桌面显示器  -  屏幕宽度等于或大于  992px。
.col-xl-  特大桌面显示器  -  屏幕宽度等于或大于  1200px。
.col-xxl-  超大桌面显示器  -  屏幕宽度等于或大于  1400px。
创建一行(  div  class="row"  )。然后，  添加需要的列(  .col-*-*  类中设置)。  第一个星号  (*)  表示响应的设备:  sm,  md,  lg  或  xl,  第二个星号  (*)  表示一个数字,  同一行的数字相加为  12。
auto:width:auto,1:width:  8.33333333%,2:width:  16.66666667%,3:  width:  25%……12:width:100%
偏移列通过  offset-*-*  类来设置。第一个星号(  *  )可以是  sm、md、lg、xl，表示屏幕设备类型，第二个星号(  *  )可以是  0  到  11  的数字。
0:  margin-left:  0,1:margin-left:  8.33333333%,2:margin-left:  16.66666667%;……11:margin-left:  91.66666667%;
网格可以嵌套

文字排版    
标题可以使用（h1  到  h6）的样式，也可以使用  .h1  到  .h6  类来设置元素的样式，以及  .display-1  至  .display-6
文字样式

颜色    
文字颜色、背景色

表格    
.table-striped  类，设置奇偶变色；.table-bordered  类，添加边框；.table-hover  类，加鼠标悬停效果  灰色背景；.table-borderless  类，无边框表格
.table-responsive  类用于创建响应式表格。（默认  -sm  -md  -lg  -xl  -xxl）

图像形状    
.rounded  类可以让图片显示圆角效果，.rounded-circle  类可以设置椭圆形图片，.img-thumbnail  类用于设置图片缩略图(图片有边框)。
.float-start  类设置图片左对齐,.float-end  类设置图片右对齐,  .mx-auto  (margin:auto)  和  .d-block  (display:block)  类来设置图片居中对齐,.img-fluid  类来设置响应式图片

信息提示框    
提示框可以使用  .alert  类,  后面加上  .alert-success,  .alert-info,  .alert-warning,  .alert-danger,  .alert-primary,  .alert-secondary,  .alert-light  或  .alert-dark  类来实现
添加  .alert-dismissible  类，然后在关闭按钮的链接上添加  class="btn-close"  和  data-dismiss="alert"  类来设置提示框的关闭操作。.fade  和  .show  类用于设置提示框在关闭时的淡出和淡入效果

按钮    
按钮类有多种样式，并可用于  a,  button,  或  input  元素上。.btn-outline-  类设置边框。使用  .btn-lg  类设置大按钮，使用  .btn-sm  类设置小按钮
  .btn-block  类可以设置块级按钮，.d-grid  类设置在父级元素中；多个块级按钮，用  .gap-*  类来设置
.active  类可以设置按钮是点击后，  disabled  属性可以设置按钮是不可点击的。  注意    a    元素不支持  disabled  属性，你可以通过添加  .disabled  类来禁止链接的点击。
.btn-group  类来创建按钮组。可以使用  .btn-group-lg|sm|xs  类来设置按钮组的大小。.btn-group-vertical  类来创建垂直的按钮组：按钮组内可设置下拉菜单

徽章  Badges    
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将  .badge  类加上带有指定意义的颜色类  (如  .bg-secondary)  添加到  span  元素上即可。  徽章可以根据父元素的大小的变化而变化。.rounded-pill  类来设置药丸形状徽章。徽章可以插入到元素内。

进度条    
一个带有  .progress  类的  div  。里面添加一个带有  class  .progress-bar  的空的    div。添加一个带有百分比表示的宽度的  style  属性。
进度条高度默认为  16px。可以使用  CSS  的  height  属性来修改。可设置颜色。条内可添加文本。  .progress-bar-striped  类设置条纹进度条。.progress-bar-animated  类可以为进度条添加动画。

加载效果    
创建加载中效果使用  .spinner-border  类或  .spinner-grow  类。

分页    
一个基本的分页可以在    ul    元素上添加  .pagination  类。然后在    li    元素上添加  .page-item  类，  li    元素的    a    标签上添加  .page-link  类。当前页可以使用  .active  类来高亮显示。.disabled  类可以设置分页链接不可点击。.pagination-lg  类设置大字体的分页条目，.pagination-sm  类设置小字体的分页条目。可以使用工具类justify-content-center  justify-content-end来设置分页的对齐方式。

面包屑导航    
.breadcrumb  和  .breadcrumb-item  类用于设置面包屑导航：

列表组    
要创建列表组，可以在    ul    元素上添加  .list-group  类,  在    li    元素上添加  .list-group-item  类。当前链接列表项可以使用  .active  类来高亮显示。.disabled  类可以设置链接列表不可点击。.list-group-flush  类来删除列表的边框和圆角。.list-group-horizontal  类建立水平列表。  .list-group-item-success,  list-group-item-secondary,  list-group-item-info,  list-group-item-warning,  .list-group-item-danger,  list-group-item-dark  和  list-group-item-light可设置颜色

卡片    
用.card  与  .card-body  类创建卡片，卡片可以包含头部、内容、底部以及各种颜色设置。.card-header类用于创建卡片的头部样式，  .card-footer  类用于创建卡片的底部样式。背景颜色类：  .bg-primary,  .bg-success,  .bg-info,  .bg-warning,  .bg-danger,  .bg-secondary,  .bg-dark  和  .bg-light。使用  .card-title  类来设置卡片的标题  。  .card-body  类用于设置卡片正文的内容。.card-text  类用于设置卡  .card-body  类中的    p    标签，最后一行可以移除底部边距。  .card-link  类用于给链接设置颜色。
  img    添加图片，  .card-img-top（图片在文字上方）    .card-img-bottom（图片在文字下方）  .card-img-overlay  （图片作为背景）

下拉菜单    
按钮或链接需要添加  .dropdown-toggle  和  data-toggle="dropdown"  属性。  div  元素上添加  .dropdown-menu  类来设置实际下拉菜单，然后在下拉菜单的选项中添加  .dropdown-item  类。.dropdown-divider  类用于在下拉菜单中创建一个水平的分割线。.dropdown-header  类用于在下拉菜单中添加标题。可以用  .active  类来高亮显示。.disabled  类可以设置禁用。在元素上的  .dropdown  类后添加.dropend  是右对齐，  .dropstart  是左对齐。指定向右弹出的下拉菜单.dropdown-menu-end。向上弹出.dropup。向左边弹出.dropstart。.dropdown-item-text  类可以设置下拉菜单中的文本项。

折叠    
实现内容的显示与隐藏。.collapse  类放在要执行折叠的元素中。控制元素使用  a  或  button  添加  data-bs-toggle="collapse"  属性。  在  a  元素使用href="#id"，在  button  元素使用data-target="#id"  属性指向执行折叠的元素。默认折叠的内容是隐藏的，添加  .show  类让内容默认显示。  使用  data-parent  属性为折叠元素分组，同组折叠选项在一个显示时其他选项自动隐藏。

导航    
水平导航栏，可以在  ul  元素上添加  .nav类，在每个  li  选项上添加  .nav-item  类，在每个链接上添加  .nav-link  类。.flex-column  类用于创建垂直导航。
.justify-content-center  类设置居中显示，  .justify-content-end  类设置右对齐。使用  .active  类高亮显示选中。.disabled  类设置禁止。.nav-pills  类可以将导航项设置成胶囊形状。.nav-justified  类可以设置导航项齐行等宽显示。
tab选项卡：在每个链接上添加  data-bs-toggle="tab"  属性。  然后在每个选项对应的内容的上添加  .tab-pane  类，对应选项卡的内容的  div  标签使用  .tab-content  类  。如果你希望有淡入效果可以在  .tab-pane  后添加  .fade类。

导航栏    
  .navbar  类创建导航栏，后面紧跟  .navbar-expand-xxl|xl|lg|md|sm  类来创建响应式的导航栏  (大屏幕水平铺开，小屏幕垂直堆叠)
（不使用navbar-expand-则是垂直导航栏）。导航栏上的选项可以使用  ul  元素并添加  class="navbar-nav"  类。  然后在  li  元素上添加  .nav-item  类，  a  元素上使用  .nav-link  类。导航栏背景色：.bg-primary,  .bg-success,  .bg-info,  .bg-warning,  .bg-danger,  .bg-secondary,  .bg-dark  和  .bg-light。文字颜色：navbar-XX。.justify-content-start类设置居左显示。.justify-content-center  类设置居中显示，  .justify-content-end  类设置右对齐。使用  .active  类高亮显示选中。.disabled  类设置禁止。.navbar-brand  类用于高亮显示品牌/Logo。.navbar-brand  类设置图片自适应导航栏。
在按钮上添加  class="navbar-toggler",  data-bs-toggle="collapse"  与  data-target="#thetarget"  类。然后在设置了  class="collapse  navbar-collapse"  类的  div  上包裹导航内容（链接）,  div  元素上的  id  匹配按钮  data-target  的上指定的  id可创建折叠导航栏。
导航栏的表单  form  元素使用  class="form-inline"  类来排版输入框与按钮。
可以使用其他的输入框类，如  .input-group-addon  类用于在输入框前添加小标签。
.navbar-text  类设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。
  .fixed-top  类实现导航栏的顶部固定。.fixed-bottom则固定到底部。

on 与  .carousel-control-prev  一起使用，设置左侧的按钮
.carousel-control-next-icon 与  .carousel-control-next  一起使用，设置右侧的按钮
.slide 切换图片的过渡和动画效果（可选）。

模态框    
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。.fade  类可以设置模态框弹出或关闭的效果。.modal-sm等建立不同尺寸模态框。.modal-fullscreen  全屏幕显示。.modal-fullscreen-*-*  类不同尺寸全屏显示。.modal-dialog-centered居中显示。.modal-dialog-scrollable  类设置滚动条。

提示框    
提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。
  data-bs-toggle="tooltip"  创建提示框。title  属性的内容为提示框显示的内容。提示框要写在  JavaScript  的初始化代码里。
使用  data-bs-placement  属性来设定提示框显示的方向:top,  bottom,  left  或  right。

弹出框    
它在鼠标点击到元素后显示。与提示框不同的是它可以显示更多的内容。
元素添加  data-bs-toggle="popover"  创建弹出框。title  属性的内容为弹出框的标题，data-bs-content  属性显示了弹出框的文本内容。弹出框要写在  JavaScript  的初始化代码里。
使用  data-bs-placement  属性来设定弹出框显示的方向:  top,  bottom,  left  或  right。
默认情况下，弹出框在再次点击指定元素后就会关闭。使用  data-bs-trigger="focus"  属性可设置在鼠标点击元素外部区域来关闭弹出框。实现在鼠标移动到元素上显示，移除后消失的效果，可以使用  data-bs-trigger=  "hover"  。

滚动监听（Scrollspy）插件    
即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。

侧边栏导航(Offcanvas)    
Bootstrap5  侧边栏侧边栏类似于模态框，在移动端设备中比较常用。
可以使用  a  链接的  href  属性或者  button  元素使用  data-bs-target  属性来设置侧边栏。这两种情况都需要使用  data-bs-toggle="offcanvas"。（.offcanvas  隐藏内容  (默认)  .offcanvas  .show  显示内容）
.offcanvas-start  显示在左侧，.offcanvas-end  显示在右侧，.offcanvas-top  显示在顶部，.offcanvas-bottom  显示在底部

表单布局    
堆叠表单  (全屏宽度)：垂直方向；内联表单：水平方向

Bootstrap5综合应用（通过查看该页面源代码，学习更具体）