Bootstrap5 笔记

1、在head标签中添加一下两行，即可使用Bootstrap5，然后就是在需要的标签中添加类 来改变页面布局啦！

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>

2、容器 [ xs(<576px)、 sm(<768px)、md(<992px)、lg(<1200px)、xl(<1400px)、xxl(>1400px) ]

        .container 类提供响应式的固定宽度容器

        .container-fluid 类提供全宽容器

3、网格系统

      Bootstrap 的网格系统是用flexbox创建的，页面上最多允许12列

        .col-  / .col-sm-  /  .col-md-  / .col-lg-  / .col-xl-  /  .col-xxl-

4、文字

        默认的 font-size 为1rem（16px），line-height为1.5

       类 .h1 到 .h6 / .display-1 到 .display-6 都可以用来设置标题；

      <small>元素和 .small类都可以用来创建较小的文本；

      <mark>元素 .mark 类来突出显示文本；

       <abbr>元素用于标记缩写或首字母缩略词；

       <blockquote>元素用于显示来自另一个来源的内容；

5、列表

     <dl> <dt> <dd> 用于设置列表的元素

6、图像

        .rounded 类为图像添加圆角

        .rounded-circle 类为图像塑造为圆形

        .img-thumbnail 类为图像塑造为缩略图

        .float-start 类将图像向左浮动 .float-end 图像向右浮动

        为了使图像居中，我们通过向图像添加了 utility 类 .mx-auto (margin:auto) 和 .d-block (display:block)

        .img-fluid 类创建响应式图像