Bootstrap中的utilities（工具类）

变成弹性盒模型：d-flex/d-inline-flex
        变成响应式的弹性盒模型：d-{breakpoint}-flex/inline-flex

        子元素的排列方向：
            1.flex-row              正序水平排列
            2.flex-row-reverse      倒序水平排列
            3.flex-column           正序垂直排列
            4.flex-column-reverse   倒序垂直排列

        响应式的排列方式：flex-{breakpoint}-row/column/row-reverse/column-reverse

        子元素的对齐方式：
            1.主轴上的对齐  -   水平对齐
                主轴上的对齐-左对齐：justify-content-start
                主轴上的对齐-右对齐：justify-content-end
                主轴上的对齐-居中对齐：justify-content-center
                主轴上的对齐-两端对齐：justify-content-between
                主轴上的对齐-分散居中对齐：justify-content-around
                主轴上的对齐-分散居中对齐-响应式：justify-content-{breakpoint}-between/...
            2.交叉轴（纵轴）上的对齐    -   垂直对齐
                交叉轴上的对齐-顶对齐：align-items-start
                交叉轴上的对齐-底对齐:align-items-end
                交叉轴上的对齐-中间对齐:align-items-center
                交叉轴上的对齐-基线对齐:align-items-baseline
                交叉轴上的对齐-如果子元素没有设置高或者设置成了auto，子元素将占满整个容器的高度:align-items-stretch
                交叉轴上的对齐-响应式: align-items-{breakpoint}-start/...

        元素的自身的对齐方式：align-self-start/end/center/baseline/stretch

        元素的自身的对齐方式-响应式：align-self-{breakpoint}-start/end/center/baseline/stretch

        填满:flex-fill

        填满-响应式：flex-{breakpoint}-fill

        伸缩值：
            1.flex-grow-*       扩展比例，数字为0表示不扩展，数字为1表示扩展，只有这两个数字
            2.flex-shrink-*     收缩比例，数字为0表示不收缩，数字为1表示扩展，只有这两个数字

        伸缩-响应式：flex-{breakpoint}-{grow|shrink}-0/1

        自动的间距：mr-auto/ml-auto/mb-auto/mt-auto

        Wrap:flex-wrap-reverse、flex-nowrap、flex-wrap

        Wrap-响应式，flex-{breakpoint}-wrap

        排序：order-*（0-12）

        排序-响应式,order-{breakpoint}-*

        多行对齐，对于单行是没有效果的
            align-content-start        顶对齐
            align-content-end        底对齐
            align-content-center    中间对齐
            align-content-between    上下两端对齐
            align-content-around    上下分散对齐
            align-content-stretch    没有给高度或者高度为auto，那高度会取父级的高度
    
        多行对齐-响应式：align-content-{breakpoint}-end

        浮动：float-left、float-right、float-none（3.x的版本里的浮动是.pull-left/.pull-right）

        浮动-响应式：float-{breakpoint}-left/left/none

        清除浮动:   clearfix

        关闭图标：  close

        图像替换：  text-hide

        内容溢出：具有设置宽度和高度尺寸的元素上使用 .overflow-auto ， 此内容将垂直滚动。
                 具有设置宽度和高度尺寸的元素上使用 .overflow-hidden 

        定位：
            position-static         默认值，没有定位
            position-relative       相对定位
            position-absolute       绝对定位
            position-fixed          固定定位
            position-sticky         粘性定位

            fixed-top               固定在顶部
            fixed-bottom            固定在底部

            sticky-top              粘性置顶，需要放在body下的第一层级

        阴影：
            shadow-none             没有阴影
            shadow-sm               小阴影
            shadow                  正常的阴影
            shadow-lg               大的阴影

        尺寸：
            Width 25%
            Width 50%
            Width 75%
            Width 100%
            Width auto
            Height 25% 
            Height 50% 
            Height 75% 
            Height 100% 
            Height auto
            mw-100                  宽度的最大值
            mh-100                  高度的最大值

        间距：略

        文本：text-justify...

        换行和内容溢出处理:text-nowrap、text-truncate

        文字大小写转换：text-lowercase/text-uppercase/text-capitalize

        字体粗细和斜体:
                font-weight-bold            加粗字体
                font-weight-normal          正常字体
                font-weight-light           更细的字体
                font-italic                 倾斜字体

        等宽字体：text-monospace

        垂直对齐：align-baseline/align-top/align-middle/align-bottom/align-text-top/align-text-bottom

        可见性:
            visible         可以看见
            invisible       看不见，占据空间
            d-none          看不见，不占据空间
————————————————
版权声明：本文为CSDN博主「Magic-JJ」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43715364/article/details/106332035