Bootstrap5（display显示、flex布局相关属性、浮动、定位、文本、栅格系统）

类中缀的设置技巧

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>