边框类
使用边框类为元素添加或删除边框
<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-*表示
<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 | 从元素中移除阴影 |