Bootstrap边框

Bootstrap是一个流行的前端开发框架，提供了丰富的CSS样式和组件，以帮助开发人员快速构建现代化的网站和应用程序。在Bootstrap中，边框（border）是一种常用的样式元素，可以通过使用Border通用类别来快速设计边框的元素。

注意：使用Bootstrap的Border通用类别可以方便地为元素添加或移除边框。可以选择为一个元素的四个边同时添加边框，也可以逐一为每个边添加边框。

一、增加边框

如下图：

<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>

五、边框半径

将元素加入至class可以轻松地替边框增加圆角。如图：

<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="...">

六、尺寸

使用缩放的class将圆角放大或缩小。尺寸的范围为0到3，可以透过通用类别的API进行配置。如图：

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