【Bootstrap5学习 day9】

Bootstrap5小工具

边框类
使用边框类为元素添加或删除边框

边框圆角
使用rounded类为元素添加圆角

浮动与清除浮动
元素向右浮动使用.float-end类，向左浮动使用.float-start类，.clearfix类用于清除浮动

	向左浮动
    向右浮动

响应式浮动
可以根据屏幕尺寸来设置浮动效果.float-*-left|right-*表示

• sm(>=576px)
• md(>=768px)
• lg(>=992px)
• xl(>=1200px)
• xxl(>=1400px)

在小型屏幕或更宽的屏幕上向右浮动
在中型屏幕或更宽的屏幕上向右浮动
在大型屏幕或更宽的屏幕上向右浮动
在超大型屏幕或更宽的屏幕上向右浮动
在特大型屏幕或更宽的屏幕上向右浮动

居中对齐
通过使用.mx-auto类来设置元素居中对齐（添加margin-left和margin-right为auto）

居中对齐

文本对齐类

class	描述
.text-start	文本左对齐
.text-center	文本居中对齐
.text-end	文本右对齐
.text-wrap	隐藏溢出文本
.text-nowrap	防止文本换行
.text-truncate	使用省略号截断文本
.text-break	将长文本截断，防止溢出
.text-lowercase	将文本转换为小写
.text-uppercase	将文本转换为大写
.text-capitalize	将每个单词的第一个字母转换成大写
.fw-bold	将元素的字体设置为粗体
.fw-bolder	将元素的字体粗细设置为更粗（相对于父元素）
.fw-normal	将元素的字体设置为正常
.fw-light	将元素的字体设置为细体
.fw-lighter	将元素的字体粗细设置为更细（相对于父元素）
.fst-italic	将元素的字体样式设置为斜体
.fst-normal	将元素的字体样式设置为正常
.text-decoration-none	从文本中删除文本修饰，例如下划线
.text-decoration-underline	给文本添加下划线
.text-decoration-line-through	在文本中间添加一行

宽度
使用w-*类（.w-25, .w-50, .w-75, .w-100, .mw-auto, . mw-100）设置元素的宽度

宽度为25%

高度
使用h-*类（.h-25, .h-50, .h-75, .h-100, .mh-auto, . mh-100）设置元素的高度

高度50%

类名	作用
.w-auto	宽度自动
.mw-100	最大宽度100%
.min-vw	最小宽度100vw
.h-auto	高度自动
.mh-100	最大高度100%
.min-vh-100	最小高度100vh
.vh-100	高度100vh

间距
在元素中设计使用内间距或者外间距时，p-内间距，这个class属性会设定padding值，m-外间距，这个属性会设定margin值.
间距的方向
t-用来设置top
b-用来设置bottom
s-用来设置start(即left)
e-用来设置end（即right）
x-用来设置left和right
y-用来设置top和bottom
blank-用来设置元素在四个方向的margin或padding
间距的距离
0-设置为0
1-设置为.25rem
2-设置为.5rem
3-设置为1rem
4-设置为1.5rem
5-设置为3rem
auto-把margin设置为auto
阴影
可以使用shadow类为元素添加阴影

类	说明
.shadow	为元素添加阴影
.shadow-sm	为元素添加一个小的阴影
.shadow-lg	为元素添加更大的阴影
.shadow-none	从元素中移除阴影