类中缀的设置技巧
1.当多个连续品目使用一个样式时，则给最小的设置即可。
比如：大屏以上内边距都是3：p-lh-3
2.超小屏不设置类中缀的样式
比如超小屏内边距时1，小屏内边距时2，中屏及以上内边距是3
p-1
p-sm-2
p-md-3
display显示
使用display属性，可以改变元素的展示效果
- .d-none就是元素消失display:none
- .d-block以块级形式显示
- .d-inline以内联形式显示
- .d-inline-block以行内块显示
- .d-flex弹性
- 显示方式都有响应式的写法，如：.d-{类中缀}-none
flex布局相关属性
https://v5.bootcss.com/docs/utilities/flex/
- flex主轴排序
- 行模式.flex-row 和.flex-row-reverse
- 列模式.flex-column和.flex-column-reverse
- 可以写响应式 .flex-{类中缀}-row
- 主轴的对齐方式
- .justify-content-start 起点
- .justify-content-end终点
- .justify-content-center居中
- .justify-content-between两端对齐
- .justify-content-around两臂间隔
- .justify-content-evenly平均分布
- 响应式的效果.justify-content-{类中缀}-{对齐方式}
- 项目交叉轴对齐
- .align-items-start交叉轴起点对齐
- .align-items-end交叉轴终点对齐
- .align-items-center交叉轴居中对齐
- 响应式的效果.align-items-{类中缀}-{方式}
- 项目的收缩和增长
- .flex-{grow|shrink}-0项目不可放大/不可收缩
- .flex-{grow|shrink}-1可放大/可收缩
浮动
https://v5.bootcss.com/docs/utilities/float/
- .float-start左浮动
- .float-end右浮动
- .float-none不浮动
- 响应式浮动显示.float-{类中缀}-{浮动方式}
- .clearfix清除父元素高度坍塌，放到父元素中
定位
（1）定位方式
- .position-relative相对定位
- .position-absolute绝对定位
- .position-fixed固定定位
注意：boot5新增了定位方向，5版本以前没有定位方向，因此5版本以前定位尽量自己写
（2）位移方向
- top-{number}对于顶部的位移位置0、50、100，分别值0%,50%,100%
- bottom-{number}对于底部的位移位置0、50、100，分别值0%,50%,100%
- start-{number}对于左侧的位移位置0、50、100，分别值0%,50%,100%
- end-{number}对于右侧的位移位置0、50、100，分别值0%,50%,100%
（3）中心位置位移
- .translate-middle使用位移x轴y轴居中
- .translate-middle-x水平方向居中
- .translate-middle-y垂直方向居中
<div class="parent position-relative">
<div class="child position-absolute start-50 top-50 translate-middle"></div>
</div>
</div>
<div class="container">
<div class="parent bg-secondary position-relative md-3">
<div class="myDiv bg-success position-absolute top-50 start-100">
定位 父相子绝
如果需要精准的定位距离，则需要自行设置样式
子元素向下移动父元素高度的50% top-50
子元素向右移动父元素宽度的100% start-100
</div>
</div>
<br>
<div class="parent bg-secondary position-relative">
<div class="myDiv bg-success position-absolute translate-middle">
如何按照自身百分比移动？
translate-middle-x 水平方向向左移动自身宽度的50%
translate-middle-y 竖直方向向上移动自身高度的50%
当两个都需要时则必须要写成 translate-middle
</div>
</div>
<br>
<div class="parent bg-primary position-relative">
<div class="MyDiv bg-success position-absolute top-50 start-50 translate-middle">
让子元素在父元素内水平居中
先定位到父元素的水平、竖直的50%
再向左向上移动自身的50%
</div>
</div>
</div>
文本
（1）文本对齐方式
写给外层父元素（块级），具有继承性的
- .text-start文本、内联左对齐
- .text-end文本、内联右对齐
- .text-center文本、内联居中对齐
- 响应式的对齐方式.text-{类中缀}-{方式}
（2）字体
- .fw-bold加粗体
- .fw-bolder特粗体
- .fw-normal正常体
- .fw-light细体
- .fw-lighter特细体
- .fst-italic斜体
（3）文本修饰线
- .text-decoration-underline下划线
- .text-decoration-line-through删除线
- .text-decoration-none无线条
栅格系统
1.行和列
父子布局，父元素包裹子元素。父元素使用.row行，子元素是父元素的列使用.col-{number}。
一行可以分为12份，最多可以容纳12个列，每个列.col-1。
在栅格布局中可以调整每个列所占的份额，如一行四列
<div class="row">
<div class="col-3">占3个份额也就是3/12</div>
<div class="col-3">占3个份额也就是3/12</div>
<div class="col-3">占3个份额也就是3/12</div>
<div class="col-3">占3个份额也就是3/12</div>
</div>
栅格布局的底层是flexbox，也就是说，你使用栅格同时也可以使用flex的相关属性。
每一个列不允许有额外的外间距，本身存在12px左右内间距（天沟）。
<div class="container">
<div class="h3">栅格系统</div>
<!--
栅格系统
把父元素分成了12份
子元素通过占父元素的份数来控制宽度
-->
<div class="parent bg-danger row">
<!-- 12个col-1的子元素占满父元素-->
<div class="col-1 bg-info p-0">我占一份</div>
<div class="col-1 bg-info p-0">我占一份</div>
<div class="col-1 bg-info p-0">我占一份</div>
<div class="col-1 bg-info p-0">我占一份</div>
<div class="col-1 bg-info p-0">我占一份</div>
<div class="col-1 bg-info p-0">我占一份</div>
<div class="col-1 bg-info p-0">我占一份</div>
<div class="col-1 bg-info p-0">我占一份</div>
<div class="col-1 bg-info p-0">我占一份</div>
<div class="col-1 bg-info p-0">我占一份</div>
<div class="col-1 bg-info p-0">我占一份</div>
<div class="col-1 bg-info p-0">我占一份</div>
<!--
注：每一个设置colxx的子元素都会自带内边距
可以通过p-0来去除
-->
</div>
<div class="parent bg-danger row">
<!-- 通过所占份数不一样控制子元素的宽度-->
<div class="col-2 bg-danger p-0">我占2份</div>
<div class="col-3 bg-info p-0">我占3份</div>
<div class="col-4 bg-secondary p-0">我占4份</div>
<div class="col-3 bg-warning p-0">我占3份</div>
</div>
<div class="parent bg-dark row">
<!--没有占满12份-->
<div class="col-2 bg-danger p-0">我占2份</div>
<div class="col-3 bg-info p-0">我占3份</div>
<div class="col-4 bg-secondary p-0">我占4份</div>
</div>
<div class="parent bg-dark row">
<!--超过12份，就会换行-->
<div class="col-2 bg-danger p-0">我占2份</div>
<div class="col-3 bg-info p-0">我占3份</div>
<div class="col-4 bg-secondary p-0">我占4份</div>
<div class="col-5 bg-warning p-0">我占5份</div>
<!-- 注：换行大多等同布局混乱。所以不要超过12份-->
</div>
<div class="parent bg-dark row">
<!--特殊的，如果需要均分的几个div，则直接写col即可-->
<div class="col bg-danger p-0">平均分</div>
<div class="col bg-info p-0">平均分</div>
<div class="col bg-secondary p-0">平均分</div>
<div class="col bg-warning p-0">平均分</div>
<div class="col bg-success p-0">平均分</div>
</div>
</div>
2.响应式栅格布局
.col-{类中缀}-{number}列的响应式写法- 注意列都是挨着的不能加外间距，可以考虑天沟，也就是在列中嵌套元素
- 当一行12份已满会自动换行
<div class="container">
<div class="h3">栅格系统</div>
<div class="parent bg-dark row mb-3">
<!-- 子元素所占份数，可以添加类中缀-->
<!-- 父元素分左右两部分
超小屏到中屏，左右比未为3：1
大屏及以上，只显示左侧并且占满父元素
超小屏：
左 col-9
右 col-3
小屏到中屏使用超小屏样式，不用设置
大屏
左 col-lg-12
右 d-lg-none
超大特大使用大屏样式不用设置
-->
<div class="bg-danger col-9 col-lg-12">左</div>
<div class="bg-info col-3 d-lg-none">右</div>
</div>
</div>
3.栅格布局的嵌套
行.row类嵌套列.col-{number}，行列布局底层是flex，容器使用容器属性，项目使用项目属性。
保证行和列清晰区分。如果需要嵌套.row>.col>.row>.col
发生嵌套之后，只要是行.row里就会分12列。列只会和上层行（父级发生分块关系），简单说子元素只分父元素的份数。
<!-- 最外层行：分为两块，一左一右 -->
<div class="row">
<!-- 左侧块 嵌套内容-->
<div class="vh-100 bg-warning col-xl-9 col-12">
<!-- 在列中嵌套，一定要加行row -->
<div class="row">
<div class="col-lg-4 col-sm-6 col-12"></div>
</div>
</div>
<!-- 右侧块 -->
<div class="vh-100 bg-danger col-xl-3 d-none d-xl-block"></div>
</div>
<div class="container">
<div class="row">
<div class="col-7">
<div class="me-2 bg-success top">左</div>
</div>
<div class="col-5">
<div class="bg-success top">右</div>
</div>
<div class="col-5">
<div class="me-2 bg-success bottom">左</div>
</div>
<div class="col-7">
<div class="row">
<div class="col">
<div class="bottom bg-info me-2">右1</div>
</div>
<div class="col">
<div class="bottom bg-info me-2">右2</div>
</div>
<div class="col">
<div class="bottom bg-info">右3</div>
</div>
</div>
</div>
<!-- 注：设置col的元素，不要加外边距-->
<!-- 如果需要外边距，则右col元素内部的元素加外边距-->
</div>
</div>