Bootstrap5 边框(Borders)

半兽人 发表于: 2020-07-19   最后更新时间: 2021-04-27 14:58:42  
{{totalSubscript}} 订阅, 4,192 游览

边框

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

添加边框

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

在线运行

删减边框

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-end-0"></span>
<span class="border-bottom-0"></span>
<span class="border-start-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>

在线运行

边框宽度

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

在线运行

边框圆角

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

<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">

在线运行

大小

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

<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-1" alt="...">
<img src="..." class="rounded-2" alt="...">
<img src="..." class="rounded-3" alt="...">

在线运行

更新于 2021-04-27
在线,6小时前登录

查看bootstrap5更多相关的文章或提一个关于bootstrap5的问题,也可以与我们一起分享文章