【Bootstrap5学习 day9】

发布时间:2024年01月02日

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

说明
.shadow为元素添加阴影
.shadow-sm为元素添加一个小的阴影
.shadow-lg为元素添加更大的阴影
.shadow-none从元素中移除阴影
文章来源:https://blog.csdn.net/weixin_44032244/article/details/135343189
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。