Bootstrap 4 边框 - Html

简介

Bootstrap 4 是一个流行的 CSS 框架，提供了许多常用的 UI 组件和样式。其中包括边框样式。边框是页面设计中很重要的一部分，可以用来区分不同的区域和组件。Bootstrap 4 提供了许多不同的边框样式，可以很容易地为页面添加漂亮的边框。

边框样式

Bootstrap 4 提供了几种不同的边框样式，包括：

• border：普通的边框
• border-top：只有上边框
• border-right：只有右边框
• border-bottom：只有下边框
• border-left：只有左边框
• border-0：没有边框
• rounded：圆角边框
• rounded-top：只有上方圆角边框
• rounded-right：只有右方圆角边框
• rounded-bottom：只有下方圆角边框
• rounded-left：只有左方圆角边框
• rounded-circle：圆形边框
• rounded-pill：胶囊形边框
• border-color：自定义边框颜色
• border-2：设置边框宽度为 2px

这些边框样式可以与其他 Bootstrap 4 样式一起使用，例如：

<button class="btn btn-primary border rounded">按钮</button>

这个例子会给按钮添加蓝色的边框和圆角。

自定义边框颜色

Bootstrap 4 的边框样式默认是灰色的。如果您需要自定义边框颜色，可以使用 border-color 类：

<div class="border border-primary"></div>

这个例子将会为 div 添加一个蓝色的边框。

自定义边框宽度

您可以使用 border-{width} 类来设置边框的宽度，其中 {width} 是一个数字，表示边框的宽度。例如，要将边框的宽度设置为 2px，可以使用 border-2：

<div class="border border-2"></div>

这个例子会为 div 添加一个宽度为 2px 的边框。

结论

Bootstrap 4 提供了许多不同的边框样式，可以用来为页面添加漂亮的边框。您可以自定义边框的颜色和宽度来满足不同的需求。