【Bootstrap5学习 day9】

2024-01-03 22:44

文章标签 学习 day9 bootstrap5

本文主要是介绍【Bootstrap5学习 day9】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Bootstrap5小工具

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

<div class="border bg-light border-primary"></div>
<div class="border border-3"></div>
<div class="border border-top-0"></div>
<div class="border border-right-0"></div>
<div class="border border-bottom-0"></div>
<div class="border border-left-0"></div><div class="border-top"></div>
<div class="border-end"></div>
<div class="border-bottom"></div>
<div class="border-start"></div>

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

<div class="rounded bg-dark"></div>
<div class="rounded-top bg-dark"></div>
<div class="rounded-end bg-dark"></div>
<div class="rounded-bottom bg-dark"></div>
<div class="rounded-start bg-dark"></div>
<div class="rounded-circle bg-dark"></div>
<div class="rounded-pill bg-dark"></div>
<div class="rounded-0 bg-dark"></div>
<div class="rounded-1 bg-dark"></div>
<div class="rounded-2 bg-dark"></div>

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

<div class="clearfix"><span class="float-start">向左浮动</span><span class="float-end">向右浮动</span>
</div>

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

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

<div class="float-sm-end">在小型屏幕或更宽的屏幕上向右浮动</div>
<div class="float-md-end">在中型屏幕或更宽的屏幕上向右浮动</div>
<div class="float-lg-end">在大型屏幕或更宽的屏幕上向右浮动</div>
<div class="float-xl-end">在超大型屏幕或更宽的屏幕上向右浮动</div>
<div class="float-xxl-end">在特大型屏幕或更宽的屏幕上向右浮动</div>

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

<div class="mx-auto bg-primary" style="width:150px">居中对齐</div>

文本对齐类

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）设置元素的宽度

<div class="w-25 bg-primary">宽度为25%</div>

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

<div class="h-50 bg-warning">高度50%</div>

类名	作用
.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类为元素添加阴影