如何在 div bootstrap 下添加边框

在 Bootstrap 中，可以通过添加 CSS 类来为 div 元素添加边框样式。以下是一些常用的方法：

方法一：使用 Bootstrap 自带的边框样式类

Bootstrap 提供了一组用于添加边框样式的类，您可以将这些类应用在 div 元素上。下面是几个常用的类：

• border：为元素添加默认的边框样式。
• border-top、border-right、border-bottom、border-left：分别为元素的上、右、下、左四个方向添加边框样式。
• border-primary、border-secondary、border-success、border-danger、border-warning、border-info、border-light、border-dark、border-white：根据主题色为元素添加对应样式的边框。

示例代码：

<div class="border">这是一个带有默认边框样式的 div 元素</div>
<div class="border-top">这是一个只有上边框的 div 元素</div>
<div class="border-primary">这是一个带有主题色边框的 div 元素</div>

方法二：自定义边框样式

如果您想要自定义边框样式，可以创建自己的 CSS 类，并将其应用在 div 元素上。以下是一个示例：

<style>
.custom-border {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}
</style>

<div class="custom-border">这是一个自定义边框样式的 div 元素</div>

在上面的示例中，我们创建了一个名为 custom-border 的 CSS 类，并定义了边框样式、边框圆角和内边距。然后，在 div 元素上应用了这个自定义的 CSS 类。

方法三：使用内联样式

除了通过 CSS 类外，您还可以使用内联样式为 div 元素添加边框。以下是一个示例：

<div style="border: 1px solid #ccc; border-radius: 5px; padding: 10px;">这是一个带有内联样式边框的 div 元素</div>

在上面的示例中，我们将边框样式、边框圆角和内边距作为 div 元素的内联样式属性直接设置。

以上就是在 Bootstrap 中为 div 元素添加边框的几种常用方法。您可以根据需要选择合适的方法来实现您的样式需求。