Bootstrap中的utilities(工具类)

太叔鸿
2023-12-01
		变成弹性盒模型: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          看不见,不占据空间
 类似资料: