Bootstrap5 边框(Borders)

半兽人 发表于: 2020-07-19   最后更新时间: 2020-07-19  

边框

使用边框工具来添加或删除元素的边框。从所有边界中选择,或一次选择一个。

添加边框

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

在线运行

删减边框

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

在线运行

边框颜色

使用我们的主题颜色来变更边框颜色。

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

在线运行

边框圆角

将对应的类样式添加到元素中即可以轻松地完成操作。

<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-right" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-left" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
<img src="..." class="rounded-0" alt="...">

在线运行

大小

对于较大或较小的边界半径,可以使用.rounded-lg.rounded-sm

<img src="..." class="rounded-sm" alt="...">
<img src="..." class="rounded-lg" alt="...">

在线运行



您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: Bootstrap5 文本截断(Text truncation)
下一条: Bootstrap5 颜色(Color)